表單，在網(wǎng)頁中的作用不可小視，主要負(fù)責(zé)數(shù)據(jù)采集的功能，比如你可以采集訪問者的名字和e－mail地址、調(diào)查表、留言簿等等。
運(yùn)用各種表單控件收集用戶信息
Form
文本框
文本域
密碼框
隱藏框
復(fù)選框
單選框
下拉選擇框
提交按鈕
重置按鈕
$_POST
$_GET
一個(gè)表單有三個(gè)基本組成部分：表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。為了顧及不同的網(wǎng)頁設(shè)計(jì)工具，本文只講述代碼的設(shè)計(jì)，不具體講述操作方法，下面就是表單的HTML代碼設(shè)計(jì)要點(diǎn)：
表單的用途
用戶注冊(cè)某種服務(wù)時(shí)，收集其姓名、地址、電話號(hào)碼、電子郵件地址和其他信息。
收集購買物品所需的信息。例如，如果想通過Internet 購買一本書，就需要填寫姓名、郵政地址和付款方式等。
7.4.2 表單控件
1 表單標(biāo)簽
＜form＞＜/form＞
功能：用于聲明表單，定義采集數(shù)據(jù)的范圍，也就是＜form＞和＜/form＞里面包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件里。
語法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞
屬性解釋見下表：
action=url指定一來處理提交表單的格式.它可以是一個(gè)URL地址(提交給程式)或一個(gè)電子郵件地址.
method=get或post指明提交表單的HTTP方法.可能的值為： post：POST方法在表單的主干包含名稱/值對(duì)并且無需包含于action特性的URL中. get：不贊成。GET方法把名稱/值對(duì)加在action的URL后面并且把新的URL送至服務(wù)器.這是往前兼容的缺省值.這個(gè)值由于國際化的原因不贊成 使用.
enctype=cdata指明用來把表單提交給服務(wù)器時(shí)(當(dāng)method值為"post")的互聯(lián)網(wǎng)媒體形式.這個(gè)特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..."指定提交的結(jié)果文檔顯示的位置： _blank ：在一個(gè)新的、無名瀏覽器窗口調(diào)入指定的文檔； _self ：在指向這個(gè)目標(biāo)的元素的相同的框架中調(diào)入文檔；_parent：把文檔調(diào)入當(dāng)前框的直接的父FRAMESET框中；這個(gè)值在當(dāng)前框沒有父框時(shí)等價(jià)于_self； ?
例如：
＜form action="http://www.xxx.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表單將向http://www.xxx.com/test.asp以post的方式提交，提交的結(jié)果在新的頁面顯示，數(shù)據(jù)提交的媒體方式是默認(rèn)的application/x-www-form-urlencoded方式；
表單域?
表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框和下拉選擇框等，用于采集用戶的輸入或選擇的數(shù)據(jù)，下面分別講述這些表單域的代碼格式：
2 文本框
文本框是一種讓訪問者自己輸入內(nèi)容的表單對(duì)象，通常被用來填寫單個(gè)字或者簡短的回答，如姓名、地址等。
代碼格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
屬性解釋：
type="text"定義單行文本輸入框；
name屬性定義文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；
size屬性定義文本框的寬度，單位是單個(gè)字符寬度；
maxlength屬性定義最多輸入的字符數(shù)。
value屬性定義文本框的初始值
樣例1：
樣例1代碼：
＜input type="text" name="example1" size="20" maxlength="15"＞
3 文本域
也是一種讓訪問者自己輸入內(nèi)容的表單對(duì)象，只不過能讓訪問者填寫較長的內(nèi)容。
代碼格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
屬性解釋：
name屬性定義多行文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；
cols屬性定義多行文本框的寬度，單位是單個(gè)字符寬度；
rows屬性定義多行文本框的高度，單位是單個(gè)字符寬度；
wrap屬性定義輸入內(nèi)容大于文本域時(shí)顯示的方式，可選值如下：
默認(rèn)值是文本自動(dòng)換行；當(dāng)輸入內(nèi)容超過文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)；Off，用來避免文本換行，當(dāng)輸入的內(nèi)容超過文本域右邊界時(shí)，文本將向左滾動(dòng)，必須用Return才能將插入點(diǎn)移到下一行； Virtual，允許文本自動(dòng)換行。當(dāng)輸入內(nèi)容超過文本域的右邊界時(shí)會(huì)自動(dòng)轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時(shí)自動(dòng)換行的地方不會(huì)有換行符出現(xiàn)； Physical，讓文本換行，當(dāng)數(shù)據(jù)被提交處理時(shí)換行符也將被一起提交處理。
樣例2：
樣例2代碼：
＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞
4 密碼框
是一種特殊的文本域，用于輸入密碼。當(dāng)訪問者輸入文字時(shí)，文字會(huì)被星號(hào)或其它符號(hào)代替，而輸入的文字會(huì)被隱藏。
代碼格式：＜input type="password" name="..." size="..." maxlength="..."＞
屬性解釋：
type="password"定義密碼框；
name屬性定義密碼框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；
size屬性定義密碼框的寬度，單位是單個(gè)字符寬度；
maxlength屬性定義最多輸入的字符數(shù)。
樣例3：
樣例3代碼：
＜input type="password" name="example3" size="20" maxlength="15"＞
5 隱藏域
隱藏域是用來收集或發(fā)送信息的不可見元素，對(duì)于網(wǎng)頁的訪問者來說，隱藏域是看不見的。當(dāng)表單被提交時(shí)，隱藏域就會(huì)將信息用你設(shè)置時(shí)定義的名稱和值發(fā)送到服務(wù)器上。
代碼格式：＜input type="hidden" name="..." value="..."＞
屬性解釋：
type="hidden"定義隱藏域；
name屬性定義隱藏域的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；
value屬性定義隱藏域的值
例如：＜input type="hidden" name="ExPws" value="dd"＞
6 復(fù)選框
復(fù)選框允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)唯一的名稱。
代碼格式：＜INPUT type="checkbox" name="..." value="..."＞
屬性解釋：
type="checkbox"定義復(fù)選框；
name屬性定義復(fù)選框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無二的名稱；
value屬性定義復(fù)選框的值
樣例4： xxx.com xxx.com
樣例4代碼：
＜input type="checkbox" name="yesky" value="09"＞xxxcom
＜input type="checkbox" name="Chinabyte" value="08"＞xxx.com
7 單選框
當(dāng)需要訪問者在待選項(xiàng)中選擇唯一的答案時(shí)，就需要用到單選框了。
代碼格式：＜input type="radio" name="..." value="..."＞
屬性解釋：
type="radio"定義單選框；
name屬性定義單選框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，單選框都是以組為單位使用的，在同一組中的單選項(xiàng)都必須用同一個(gè)名稱；
value屬性定義單選框的值，在同一組中，它們的域值必須是不同的。
樣例5： xxx.com xxx.com
樣例5代碼：
＜input type="radio" name="myFavor" value="1"＞xxx.com
＜input type="radio" name="myFavor" value="2"＞xxx.com
8 下拉選擇框
下拉選擇框允許你在一個(gè)有限的空間設(shè)置多種選項(xiàng)。
代碼格式：
＜select name="..." size="..." multiple＞
＜o(jì)ption value="..." selected＞...＜/option＞
...
＜/select＞
屬性解釋：
size屬性定義下拉選擇框的行數(shù)；
name屬性定義下拉選擇框的名稱；
multiple屬性表示可以多選，如果不設(shè)置本屬性，那么只能單選；
value屬性定義選擇項(xiàng)的值；
selected屬性表示默認(rèn)已經(jīng)選擇本選項(xiàng)。
樣例7： xxx.com xxx.com
樣例7代碼：
＜select name="mySel" size="1"＞
＜o(jì)ption value="1" selected＞xxx.com＜/option＞
＜o(jì)ption value="d2"＞xxx.com＜/option＞
＜/select＞
樣例8：
xxx.com xxx.com internet.com按Ctrl可以多選
樣例8代碼：
＜select name="mySelt" size="3" multiple＞
＜o(jì)ption value="1" selected＞xxx.com＜/option＞
＜o(jì)ption value="d2"＞xxx.com＜/option＞
＜o(jì)ption value="3"＞internet.com＜/option＞
＜/select＞
9 表單按鈕
表單按鈕控制表單的運(yùn)作。
1.3.1提交按鈕
提交按鈕用來將輸入的信息提交到服務(wù)器。
代碼格式：＜input type="submit" name="..." value="..."＞
屬性解釋：
type="submit"定義提交按鈕；
name屬性定義提交按鈕的名稱；
value屬性定義按鈕的顯示文字；
樣例9：
樣例9代碼：
＜input type="submit" name="mySent" value="發(fā)送"＞
1.3.2復(fù)位按鈕
復(fù)位按鈕用來重置表單。
代碼格式：＜input type="reset" name="..." value="..."＞
屬性解釋：
type="reset"定義復(fù)位按鈕；
name屬性定義復(fù)位按鈕的名稱；
value屬性定義按鈕的顯示文字；
樣例10：
樣例10代碼：
＜input type="reset" name="myCancle" value="取消"＞
1.3.3一般按鈕
一般按鈕用來控制其他定義了處理腳本的處理工作。
代碼格式：＜input type="button" name="..." value="..." onClick="..."＞
屬性解釋：
type="button"定義一般按鈕；
name屬性定義一般按鈕的名稱；
value屬性定義按鈕的顯示文字；
onClick屬性，也可以是其它的事件，通過指定腳本函數(shù)來定義按鈕的行為；
樣例11：
樣例11代碼：
＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"＞
主要的表單控件：文本框、密碼框、單選框、多選框、下拉列表、文字域、圖片域、隱藏域、提交按鈕、重置按鈕等都需要溫習(xí)。
其中最重要的就是多選框，在PHP中命名多選框是比較特殊的，需要用[]來命名，一組多選的id和name在命名上都是需要注意的。PHP頁面如何接收各種控件的值都需要單獨(dú)練習(xí)。尤其是多選項(xiàng)在接收后是一個(gè)數(shù)組結(jié)構(gòu)的數(shù)據(jù)，在存入數(shù)據(jù)庫前需要轉(zhuǎn)化成字符串再入庫。
代碼示范如下：
文本框：<input type="text" name="username" id="username" />
密碼框：<input type="password" name="psd" id="psd" />
單選項(xiàng)：
下拉列表：
<select name="xueli">
</select>
多選框：
籃球<input type="checkbox" name="hobby[]" value="籃球" id="hobby1"/>
上網(wǎng)<input type="checkbox" name="hobby[]" value="上網(wǎng)" id="hobby2"/>
旅游<input type="checkbox" name="hobby[]" value="旅游" id="hobby3"/>
游泳<input type="checkbox" name="hobby[]" value="游泳" id="hobby4"/> 【提示：需要特別注意的是PHP中對(duì)于多選項(xiàng)的命名。】
隱藏域：<input type="hidden" name="id"?value="100" />
提示：隱藏域的使用目的是為了隱式傳值，所以必須有value值才有意義。
文本域：<textarea name="introduce" id="introduce"></textarea>
提交：<input name="submit" type="submit" value="注冊(cè)">
重置：<input name="reset" type="reset" value="重置">
每種控件一般常用屬性都需要寫，name屬性為了表單傳值；id屬性主要用于樣式和表單腳本驗(yàn)證；Value屬性表示控件初始值，視情形而定；size屬性主要是定義控件的大小；maxlength屬性定義最大允許輸入內(nèi)容的長度。
10 超級(jí)全局?jǐn)?shù)組變量
$_POST $_GET這兩個(gè)變量都是數(shù)組變量，下標(biāo)是表單文本框的name屬性。
echo $_POST['username'];//用戶名
echo $_POST['psd'];//密碼
echo $_POST['sex'];//性別
echo $_POST['xueli'];//學(xué)歷
echo implode(",",$_POST['hobby']);//愛好
echo $_POST['id'];//隱藏域id
echo $_POST['introduce'];//簡介
7.5.1 用戶注冊(cè)模塊功能介紹
用戶注冊(cè)模塊是學(xué)習(xí)表單用到的范例。本模塊是大多數(shù)網(wǎng)站都會(huì)用到的一個(gè)功能部分，同時(shí)這注冊(cè)模塊也是表單集中體現(xiàn)的一個(gè)地方，其中會(huì)需要用戶填寫用戶名、密碼、郵箱、學(xué)歷、愛好、性別、簡介等，而這又恰恰是表單里邊的文本框、密碼框、選擇框、單選框、文本域等，除此還有提交按鈕、重置按鈕等。之前同學(xué)們有接觸過表單，但都是在html下使用的，今天我們學(xué)習(xí)的表單??是需要和js、php程序結(jié)合的。是對(duì)表單學(xué)習(xí)的延續(xù)、同時(shí)也是在復(fù)習(xí)以往的學(xué)習(xí)知識(shí)。
注冊(cè)頁效果圖如下：
【提示：以上效果圖，并非本教學(xué)中真實(shí)頁面圖。】
7.5.2 注冊(cè)模塊需求分析（業(yè)務(wù)邏輯）
一個(gè)表單有三個(gè)基本組成部分：表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。為了顧及不同的網(wǎng)頁設(shè)計(jì)工具，本文只講述代碼的設(shè)計(jì)，不具體講述操作方法。
7.5.3 注冊(cè)模塊設(shè)計(jì)思路（實(shí)現(xiàn)思路）
用戶注冊(cè)模塊會(huì)涉及兩個(gè)頁面，一個(gè)表單頁面，一個(gè)接收頁面，其中接收頁面用戶接收表單頁面的數(shù)據(jù)
表單頁面會(huì)有文本框、密碼框、隱藏框、單選框、選擇框、復(fù)選框、文本域，按鈕會(huì)有提交按鈕、重置按鈕
在接收頁面使用php程序語言來接收表單數(shù)據(jù)，會(huì)用到$_POST $_GET兩個(gè)超級(jí)全局?jǐn)?shù)組變量。
本章通過用戶注冊(cè)學(xué)習(xí)了表單的使用，表單不只可以多用戶注冊(cè)，比如添加商品、修改商品等類似的動(dòng)作都需要表單在中間協(xié)調(diào)，希望同學(xué)們對(duì)表單有很好的理解。
