HTML 表單
HTML 表單和輸入
HTML 表單用於蒐集不同類型的使用者輸入。
線上實例
建立文字欄位 (Text field)
本例示範如何在 HTML 頁面建立文字網域。使用者可以在文字網域中寫入文字。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
建立密碼欄位
本例示範如何建立HTML 的密碼域。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
（在本頁底端可以找到更多實例。）
HTML 表單
表單是一個包含表單元素的區域。
表單元素是允許使用者在表單中輸入內容,例如：文字域(textarea)、下拉清單、單選框(radio-buttons)、複選框(checkboxes)等等。
表單使用表單標籤<form> 來設定:
<form> . input 元素 . </form>
HTML 表單- 輸入元素
多數情況下被用到的表單標籤是輸入標籤（<input>）。
輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
文字域（Text Fields）
#文字域透過<input type="text"> 標籤來設定，當使用者要在表單中鍵入字母、數字等內容時，就會用到文字網域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>瀏覽器顯示如下：
注意:表單本身並不可見。同時，在大多數瀏覽器中，文字域的缺省寬度是20個字元。
密碼欄位
密碼欄位透過標籤<input type="password"> 來定義:
<form> Password: <input type="password" name="pwd"> </form>瀏覽器顯示效果如下:
注意:密碼欄位字元不會明文顯示，而是以星號或圓點取代。
單選按鈕（Radio Buttons）
<input type="radio"> 標籤定義了表單單選方塊選項
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>瀏覽器顯示效果如下:
複選框（Checkboxes）
<input type="checkbox"> 定義了複選框. 使用者需要從若干在給定的選擇中選取一個或若干選項。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>瀏覽器顯示效果如下:
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當使用者點擊確認按鈕時，表單的內容會傳送到另一個文件。表單的動作屬性定義了目的檔案的檔案名稱。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。 :
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>瀏覽器顯示效果如下:
假如您在上面的文字方塊內鍵入幾個字母，然後點擊確認按鈕，那麼輸入資料就會傳送到"html_form_action.php" 的頁面。該頁面將顯示輸入的結果。
更多實例
單選按鈕(Radio buttons)
本範例示範如何在 HTML 中建立單選按鈕。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> <p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
複選框(Checkboxes)
本範例示範如何在HTML 頁面中建立複選框。使用者可以選取或取消選取複選框。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
簡單的下拉清單
本例示範如何在HTML 頁面中建立簡單的下拉列錶框。下拉列錶框是一個可選清單。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
預選下拉清單
本例示範如何建立一個簡單的帶有預選值的下拉清單。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
文字網域(Textarea)
本範例示範如何建立文字網域（多行文字輸入控制項）。使用者可在文字網域中寫入文字。可寫入字元的字數不受限制。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
建立按鈕
本範例示範如何建立按鈕。你可以對按鈕上的文字進行自訂。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html>
執行實例 »
點擊 "執行實例" 按鈕查看線上實例
表單實例
有邊框的表單
本範例示範如何在資料周圍繪製一個有標題的方塊。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
有輸入框和確認按鈕的表單
本範例示範如何為頁面新增表單。此表單包含兩個輸入框和一個確認按鈕。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php"> First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br> <input type="submit" value="提交"> </form> <p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
帶有複選框的表單
此表單包含兩個複選框和一個確認按鈕。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br> <input type="submit" value="提交"> </form> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <form action="demo-form.php" method="get"> <input type="radio" name="sex" value="Male"> Male<br> <input type="radio" name="sex" value="Female" checked="checked"> Female<br> <input type="submit" value="提交"> </form> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
從表單傳送電子郵件
此範例示範如何從表單傳送電子郵件。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h3>发送邮件到 someone@example.com:</h3> <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="发送"> <input type="reset" value="重置"> </form> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
HTML 表單標籤
New# : HTML5新標籤
