文章詳情頁

PHP與Web頁面的交互示例詳解一

瀏覽：188日期：2022-09-09 13:38:11

前言

這篇筆記記錄的是Web表單的相關(guān)操作，Web表單主要用來在網(wǎng)頁中發(fā)送數(shù)據(jù)到服務(wù)器。比如在日常開發(fā)中，提交注冊時需要提交表單，表單從客戶端傳送到服務(wù)器，經(jīng)過服務(wù)器處理后，再將用戶所需要的信息傳遞回客戶端，進(jìn)而實(shí)現(xiàn)PHP與Web表單的交互。

表單

使用<form>元素，并在其中插入相關(guān)的表單元素，即可創(chuàng)建一個表單。表單結(jié)構(gòu)：<form name='form_name' method='method' action='url' enctype='value' target='target_win'>… //省略插入的表單元素</form >

form標(biāo)記的屬性如下表：

form標(biāo)記的屬性說明 name 表單名稱 method 設(shè)置表單的提交方式，GET或者POST方法 action 紙箱處理該表單頁面的URL enctype 設(shè)置表單內(nèi)容的編碼方式 target 設(shè)置返回信息的顯示方式

表單（form）由表單元素組成。常用的表單元素有以下幾種標(biāo)記：輸入域標(biāo)記<input>、選擇域標(biāo)記<select>和<option>、文字域標(biāo)記<textarea>等。

輸入域標(biāo)記<input>

輸入域標(biāo)記<input>是表單中最常用的標(biāo)記之一。常用的文本框、按鈕、單選按鈕、復(fù)選框等構(gòu)成了一個完整的表單。語法格式如下：

參數(shù)name是指輸入域的名稱，參數(shù)type是指輸入域的類型。在<input type=''>標(biāo)記中一共提供了10種類型的輸入?yún)^(qū)域，用戶所選擇使用的類型由type屬性決定。

下面舉幾個type屬性例子:

1、text

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>文本框：</td> <td align='left'><input name='user' type='text' value='Bill' size='20' maxlength='100'></td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行效果：

PHP與Web頁面的交互示例詳解一

name為文本框的名稱，value是文本框的默認(rèn)值，size為文本框的寬度，maxlength為文本框的最大輸入字符數(shù)，可以通過id獲取文本框的值。

2、password

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>密碼域：</td> <td align='left'> <input name='pwd' type='password' value='1234567' size='20' maxlength='100'> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

密碼域，用戶在該文本框中輸入的字符將被替換為*顯示，以起到保密作用。

3、file

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>文件域：</td> <td align='left'> <input name='file' type='file' enctype='multipart/form-data' size='20' maxlength='200'> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

文件域，當(dāng)文件上傳時，可以用來打開一個模式窗口來選擇文件。然后將文件通過表單上傳到服務(wù)器，上傳文件時需要指明表單的屬性enctype=”multipart/form-data”才可以實(shí)現(xiàn)上傳功能。

4、image

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>圖像域：</td> <td align='left'> <input name='image' type='image' src='http://m.b3g6.com/bcjs/btn__details_praise_selected.png' border='0'> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行效果：

PHP與Web頁面的交互示例詳解一

圖像域是指可以用在提交按鈕位置上的圖片，這副圖片具有按鈕的功能

5、radio

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>單選按鈕：</td> <td align='left'> <input name='sex' type='radio' value='1' checked>男 <input name='sex' type='radio' value='0' >女 </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

單選按鈕，用于設(shè)置一組選擇項(xiàng)，用戶只能選擇一項(xiàng)。checked屬性用來設(shè)置該單選按鈕默認(rèn)被選中。

6、checkbox

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>復(fù)選框：</td> <td align='left'> <input name='checkbox' type='checkbox' value='1' checked>蘋果 <input name='checkbox' type='checkbox' value='1' checked>小米 <input name='checkbox' type='checkbox' value='1' >三星 </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

復(fù)選框，允許用戶選擇多個選擇項(xiàng)。checked屬性用來設(shè)置該復(fù)選框默認(rèn)被選中。

7、submit

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>提交按鈕：</td> <td align='left'> <input name='submit' type='submit' value='提交'> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

將表單的內(nèi)容提交到服務(wù)器端

8、reset

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>重置按鈕：</td> <td align='left'> <input name='reset' type='reset' value='重置'> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

清除與重置表單內(nèi)容，用于清除表單中所有文本框的內(nèi)容，并使選擇菜單項(xiàng)恢復(fù)到初始值。

9、button

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>普通按鈕：</td> <td align='left'> <input name='button' type='button' value='注冊'> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

按鈕可以激發(fā)提交表單的動作，可以在用戶需要修改表單時，將表單恢復(fù)到初始的狀態(tài)，還可以依照程序的需要發(fā)揮其他作用。

10、hidden

隱藏域，用于在表單中以隱含方式提交變量值。隱藏域在頁面中對于用戶是不可見的，添加隱藏域的目的在于通過隱藏的方式收集或者發(fā)送信息。

選擇域標(biāo)記<select>和<option>

通過選擇域標(biāo)記<select>和<option>可以建立一個列表或者菜單。菜單的使用是為了節(jié)省空間，正常狀態(tài)下只能看到一個選項(xiàng)，單擊右側(cè)的下三角按鈕打開菜單后才能看到全部的選項(xiàng)。列表可以顯示一定數(shù)量的選項(xiàng)，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來查看各選項(xiàng)。

語法格式如下：

<select name='name' size='value' multiple><option value='value' selected>選項(xiàng)1</option><option value='value'>選項(xiàng)2</option><option value='value'>選項(xiàng)3</option>…</select>

參數(shù)name表示選擇域的名稱；參數(shù)size表示列表的行數(shù)；參數(shù)value表示菜單選項(xiàng)值；參數(shù)multiple表示以菜單方式顯示數(shù)據(jù)，省略則以列表方式顯示數(shù)據(jù)。

1、列表方式

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>喜歡哪種編程語言：</td> <td > <select name='name' id='code'> <option value='1' selected>Java語言</option> <option value='2'>C語言</option> <option value='3'>JS語言</option> <option value='4'>PHP語言</option> </select> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

下拉列表框，通過選擇域標(biāo)記<select>和<option>建立一個列表，列表可以顯示一定數(shù)量的選項(xiàng)，如果超出了這個數(shù)量，會自動出現(xiàn)滾動條，瀏覽者可以通過拖動滾動條來查看各選項(xiàng)。selected屬性用來設(shè)置該菜單時默認(rèn)被選中。

2、菜單方式

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>喜歡哪種編程語言：</td> <td > <select name='name' multiple> <option value='1' selected>Java語言</option> <option value='2'>C語言</option> <option value='3'>JS語言</option> <option value='4'>PHP語言</option> </select> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

> multiple屬性用于菜單列表```<select>```標(biāo)記中，指定該選項(xiàng)的用戶可以使用Shift和Ctrl鍵進(jìn)行多選

文字域標(biāo)記<textarea>

文字域標(biāo)記<textarea>用來制作多行的文字域，可以在其中輸入更多的文本。

語法格式如下：

參數(shù)name表示文字域的名稱；rows表示文字域的行數(shù)；cols表示文字域的列數(shù)（這里的rows和cols以字符為單位）；value表示文字域的默認(rèn)值，warp用于設(shè)定顯示和送出時的換行方式，值為off表示不自動換行，值為hard表示自動硬回車換行，換行標(biāo)記一同被發(fā)送到服務(wù)器，輸出時也會換行，值為soft表示自動軟回車換行，換行標(biāo)記不會被發(fā)送到服務(wù)器，輸出時仍然為一列。

例如：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><title>PHP語言基礎(chǔ)</title></head><body><form action='index.php' method='post' name='form1' enctype='multipart/form-data'> <tr bgcolor='#FFCC33'> <td align='right'>請寫下你的留言：</td> <td > <textarea rows='5' cols='20' name='remark' id='remark'>留言...</textarea> </td> </tr></form><?phpheader('Content-Type:text/html; charset=gb2312');?></body></html>

運(yùn)行結(jié)果：

PHP與Web頁面的交互示例詳解一

到此這篇關(guān)于PHP與Web頁面的交互示例詳解一的文章就介紹到這了,更多相關(guān)PHP與Web頁面的交互內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！

PHP

上一條：PHP中->和=>的含義及使用示例解析下一條：基于php+MySql實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)實(shí)例

相關(guān)文章：

1. js實(shí)現(xiàn)碰撞檢測2. 用Spring JMS使異步消息變得簡單3. JS實(shí)現(xiàn)前端動態(tài)分頁碼代碼實(shí)例4. 一文帶你徹底理解Java序列化和反序列化5. 關(guān)于IDEA 2020.3 多窗口視圖丟失的問題6. PHP驗(yàn)證碼工具－Securimage7. PHP使用Swagger生成好看的API文檔8. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條9. 通過實(shí)例解析Python文件操作實(shí)現(xiàn)步驟10. Python 下載Bing壁紙的示例

排行榜

					
					一文帶你徹底理解Java序列化和反序列化
用Spring JMS使異步消息變得簡單
關(guān)于IDEA 2020.3 多窗口視圖丟失的問題
PHP驗(yàn)證碼工具－Securimage
js實(shí)現(xiàn)碰撞檢測
JS實(shí)現(xiàn)前端動態(tài)分頁碼代碼實(shí)例
AspectJ 支持JAVA 5的新特性
Android 簡單的實(shí)現(xiàn)滑塊拼圖驗(yàn)證碼功能
Java源碼解析之SortedMap和NavigableMap
ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條
Django 模板中常用的過濾器實(shí)現(xiàn)
				