HTML 表單
什么是表單
表單就是為了搜集不同類型的用戶輸入，譬如：
網(wǎng)站注冊(cè) ?
登錄 ?
發(fā)布簡(jiǎn)歷
論壇發(fā)帖
回帖 S投票等
HTML 表單
表單是一個(gè)包含表單元素的區(qū)域。一個(gè)網(wǎng)頁(yè)可能有多個(gè)form，但是一個(gè)form對(duì)應(yīng)一個(gè)表單區(qū)域，也只能提交當(dāng)前表單區(qū)域的表單項(xiàng)
表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。
表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置:
<form method="傳送方式" action="服務(wù)器文件地址">
.input 元素
</form>
action 用來(lái)配置表單數(shù)據(jù)傳送到哪里處理，通常都是一個(gè)動(dòng)態(tài)腳本的地址，譬如一個(gè)PHP文件的地址 login.php ?
method 可以是GET也可以是POST（如果不設(shè)置，系統(tǒng)默認(rèn)是GET，但大多數(shù)情況下我們使用POST，GET以參數(shù)形式提交，用戶能直接看到提交的參數(shù)，post是通過(guò)HTTP post機(jī)制，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個(gè)過(guò)程）
HTML 表單 - 輸入元素
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。
輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：
文本域
文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。
實(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>
瀏覽器顯示如下：
密碼字段
密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義:
<!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>
瀏覽器顯示如下：
注意:密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(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>
瀏覽器顯示如下：
復(fù)選框
<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(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)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(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)按鈕，那么輸入數(shù)據(jù)會(huì)以post形式傳送到 "action.php" 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果。
HTML 表單標(biāo)簽
| ? ? ?標(biāo)簽 | ? ? ?描述 |
| ? ??<form> | ? 定義供用戶輸入的表單 |
| ? ? ?<input> | ? 定義輸入域 |
| ? ? ?<textarea> | ? 定義文本域 (一個(gè)多行的輸入控件) |
| ? ? ?<label> | ? 定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題 |
| ? ? ?<fieldset> | ??定義了一組相關(guān)的表單元素，并使用外框包含起來(lái) |
| ? ? ?<legend> | ??定義了 <fieldset> 元素的標(biāo)題 |
| ? ? ?<select> | ??定義了下拉選項(xiàng)列表 |
| ? ? ?<optgroup> | ??定義選項(xiàng)組 |
| ? ? ?<option> | ??定義下拉列表中的選項(xiàng) |
| ? ? ?<button> | ??定義一個(gè)點(diǎn)擊按鈕 |
| ? ? ?<datalist> | ??指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
| ? ? ?<keygen> | ??定義了表單的密鑰對(duì)生成器字段 |
| ? ? ?<output> | ??定義一個(gè)計(jì)算結(jié)果 |
學(xué)習(xí)更多HTML 表單標(biāo)簽，請(qǐng)?jiān)L問(wèn)我們的HTML 參考手冊(cè)
更多實(shí)例
本例演示如何在 HTML 頁(yè)面中創(chuàng)建簡(jiǎn)單的下拉列表框。下拉列表框是一個(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é)果：
本例演示如何創(chuàng)建文本域（多行文本輸入控件）。用戶可在文本域中寫入文本。可寫入字符的字?jǐn)?shù)不受限制，以及一個(gè)按鈕。你可以對(duì)按鈕上的文字進(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í)例
本例演示如何向頁(yè)面添加表單。此表單包含一個(gè)輸入框，一個(gè)文本域，單選框，復(fù)選框，下拉列表和一個(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)擊"提交"按鈕，表單數(shù)據(jù)將以post形式發(fā)生發(fā)送到form.php頁(yè)面
實(shí)例
此例演示如何從表單發(fā)送電子郵件。
<!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)擊"提交"按鈕，表單數(shù)據(jù)將以post形式發(fā)生發(fā)送到form.php頁(yè)面，點(diǎn)擊“重置”按鈕，會(huì)清空你輸入的內(nèi)容。
