HTML 表單
什麼是表單
#表單就是為了蒐集不同類型的使用者輸入，譬如：
網(wǎng)站註冊?
登入?
發(fā)布履歷
論壇發(fā)文
回帖S投票等
##HTML 表單
表單是一個(gè)包含表單元素的區(qū)域。一個(gè)網(wǎng)頁可能有多個(gè)form，但是一個(gè)form對應(yīng)一個(gè)表單區(qū)域，也只能提交當(dāng)前表單區(qū)域的表單項(xiàng)目
表單元素是允許使用者在表單中輸入內(nèi)容,例如：文字網(wǎng)域(textarea) 、下拉清單、單選方塊(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標(biāo)籤<form> 來設(shè)定:#########.input 元素############</form>#########
#<form method="傳送方式" action="伺服器檔案位址">
action 用來設(shè)定表單資料傳送到哪裡處理，通常都是一個(gè)動態(tài)腳本的位址，譬如一個(gè)PHP檔案的位址login.php ?
method 可以是GET也可以是POST（如果不設(shè)置，系統(tǒng)預(yù)設(shè)是GET，但大多數(shù)情況下我們使用POST，GET以參數(shù)形式提交，使用者能直接看到提交的參數(shù)，post是透過HTTP post機(jī)制，將表單內(nèi)各個(gè)欄位與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL位址?？床坏竭@個(gè)過程）
#HTML 表單- 輸入元素
多數(shù)情況下被用到的表單標(biāo)籤是輸入標(biāo)籤（<input>）。
輸入類型是由類型屬性（type）定義的。大多數(shù)常用到的輸入類型如下：
文字域
#文字域透過<input type="text"> 標(biāo)籤來設(shè)定，當(dāng)使用者要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會用到文字域。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form> 文本域: <input type="text" name="firstname"><br> 文本域: <input type="text" name="lastname"> </form> </body> </html>
瀏覽器顯示如下：
密碼欄位
密碼欄位透過標(biāo)籤<input type="password"> 來定義:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form> 姓名: <input type="text" name="firstname"><br> 密碼: <input type="password" name="lastname"> </form> </body> </html>
瀏覽器顯示如下：
注意:密碼欄位字元不會明文顯示，而是以星號或圓點(diǎn)取代。
單選按鈕
#<input type="radio"> 標(biāo)籤定義了表單單選框選項(xiàng)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form> </body> </html>
瀏覽器顯示如下：
複選框
<input type="checkbox"> 定義了複選框. 使用者需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <input type="checkbox" name="vehicle" value="自行車">自行車 <input type="checkbox" name="vehicle" value="汽車">汽車 <input type="checkbox" name="vehicle" value="飛機(jī)">飛機(jī) <input type="checkbox" name="vehicle" value="輪船">輪船 </body> </html>
瀏覽器顯示如下：
#提交按鈕
<input type="submit"> 定義了提交按鈕.
當(dāng)使用者點(diǎn)擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會被傳送到另一個(gè)檔案。表單的動作屬性定義了目的檔案的檔案名稱。由動作屬性定義的這個(gè)檔案通常會對接收到的輸入資料進(jìn)行相關(guān)的處理。 :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form name="input" action="action.php" method="post"> 用戶名 <input type="text" name="user"><br/> 密 碼 <input type="password" name="user"> <input type="submit" value="Submit"> </form> </body> </html>
瀏覽器顯示如下：
假如您在上面的文字方塊內(nèi)鍵入幾個(gè)字母，然後點(diǎn)擊確認(rèn)按鈕，那麼輸入資料會以post形式傳送到"action.php" 的頁面。該頁面將顯示輸入的結(jié)果。
HTML 表單標(biāo)籤
| ? ? ?標(biāo)籤 | ? ? ?說明 |
| ? ? ?<fieldset> | ??定義了一組相關(guān)的表單元素，並使用外框包含起來 |
| ? ? ?< ;legend> | ??定義了<fieldset> 元素的標(biāo)題 |
| ??定義了下拉選項(xiàng)清單 | |
| ??定義選項(xiàng)群組 | |
| ??定義下拉清單中的選項(xiàng) |
| ??定義一個(gè)點(diǎn)選按鈕 | |
| ??指定一個(gè)預(yù)先定義的輸入控制選項(xiàng)清單 | |
| #??定義了表單的金鑰對產(chǎn)生器欄位 |
學(xué)習(xí)更多HTML 表單標(biāo)籤，請?jiān)煸L我們的HTML 參考手冊
#更多實(shí)例
本範(fàn)例示範(fàn)如何在HTML 頁面中建立簡單的下拉列錶框。下拉列錶框是一個(gè)可選清單。帶有預(yù)選值的下拉清單。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action=""> <select name="學(xué)歷"> <option value="小學(xué)">小學(xué)</option> <option value="初中">初中</option> <option value="大專" selected>大專</option> <option value="本科">本科</option> <option value="碩士">碩士</option> <option value="博士">博士</option> </select> </form> </body> </html>
程式運(yùn)行結(jié)果：
#本範(fàn)例示範(fàn)如何建立文字域（多行文字輸入控制項(xiàng)）。使用者可在文字網(wǎng)域中寫入文字?？蓪懭胱衷淖?jǐn)?shù)不受限制，以及一個(gè)按鈕。你可以對按鈕上的文字進(jìn)行自訂。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action=""> <textarea rows="8" cols="20"> 我是一個(gè)文本框。 </textarea> <input type="button" value="提交"> </form> </body> </html>
程式運(yùn)行結(jié)果：
#表單實(shí)例
本範(fàn)例示範(fàn)如何為頁面新增表單。此表單包含一個(gè)輸入框，一個(gè)文字域，單選框，複選框，下拉列表和一個(gè)確認(rèn)按鈕。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="form.php" method="post"> 作者: <input type="text" name="Name" ><br> 文本內(nèi)容:<br/> <textarea rows="8" cols="20"> </textarea><br/> <input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br/> <select name="學(xué)歷"> <option value="小學(xué)">小學(xué)</option> <option value="初中">初中</option> <option value="大專" selected>大專</option> <option value="本科">本科</option> <option value="碩士">碩士</option> <option value="博士">博士</option> </select> <input type="submit" value="提交"> </form> </body> </html>程式運(yùn)行結(jié)果：
點(diǎn)擊"提交"按鈕，表單資料將以post形式發(fā)生傳送至form.php頁面
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <form action="form.php" method="post"> 姓名:<br> <input type="text" name="name" ><br> E-mail:<br> <input type="text" name="mail" ><br> 你的意見:<br> <textarea cols="20" rows="2"> </textarea><br/> <input type="submit" value="發(fā)送"> <input type="reset" value="重置"> </form> </body> </html>###程式運(yùn)行結(jié)果：###############點(diǎn)擊"提交"按鈕，表單資料將以post形式發(fā)生傳送至form.php頁面，點(diǎn)選「重置”按鈕，會清空你輸入的內(nèi)容。 #####################
