HTML 表單用于收集不同類(lèi)型的用戶(hù)輸入。
創(chuàng)建文本字段 (Text field)
本例演示如何在 HTML 頁(yè)面創(chuàng)建文本域。用戶(hù)可以在文本域中寫(xiě)入文本。
創(chuàng)建密碼字段
本例演示如何創(chuàng)建 HTML 的密碼域。
(在本頁(yè)底端可以找到更多實(shí)例。)
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶(hù)在表單中輸入內(nèi)容,比如:文本域 (textarea)、下拉列表、單選框 (radio-buttons)、復(fù)選框 (checkboxes)等等。
表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置:
<form>
.
input elements
.
</form>
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽(<input>)。<input> 元素是最重要的表單元素。
輸入類(lèi)型是由類(lèi)型屬性(type)定義的。大多數(shù)經(jīng)常被用到的輸入類(lèi)型如下:
文本域通過(guò) <input type="text"> 標(biāo)簽來(lái)設(shè)定,當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí),就會(huì)用到文本域。您可以在編程測(cè)試中創(chuàng)建文本輸入框!
<form>
姓名: <input type="text" name="firstname"><br>
電話(huà)號(hào)碼: <input type="text" name="lastname">
</form>
瀏覽器顯示如下:
姓名:
電話(huà)號(hào)碼:
注意:表單本身并不可見(jiàn)。同時(shí),在大多數(shù)瀏覽器中,文本域的缺省寬度是 20 個(gè)字符。
密碼字段通過(guò)標(biāo)簽 <input type="password"> 來(lái)定義:
瀏覽器顯示效果如下:
密碼:
注意:密碼字段字符不會(huì)明文顯示,而是以星號(hào)或圓點(diǎn)替代。
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)。在編程測(cè)試中練習(xí)使用單選按鈕!
<form>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
瀏覽器顯示效果如下:
男
女
<input type="checkbox"> 定義了復(fù)選框. 用戶(hù)需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。在實(shí)戰(zhàn)測(cè)試中學(xué)習(xí)使用復(fù)選框!
<form>
<input type="checkbox" name="vehicle" value="Bike">我有自行車(chē)<br>
<input type="checkbox" name="vehicle" value="Car">我有小車(chē)
</form>
瀏覽器顯示效果如下:
我有自行車(chē)
我有小車(chē)
<input type="submit"> 定義了提交按鈕.
當(dāng)用戶(hù)單擊確認(rèn)按鈕時(shí),表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
瀏覽器顯示截圖效果如下:
假如您在文本框內(nèi)鍵入幾個(gè)字母,然后點(diǎn)擊確認(rèn)按鈕,那么輸入數(shù)據(jù)會(huì)傳送到 "html_form_action.php" 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果。
單選按鈕 (Radio buttons)
本例演示如何在 HTML 中創(chuàng)建單選按鈕。
復(fù)選框 (Checkboxes)
本例演示如何在 HTML 頁(yè)中創(chuàng)建復(fù)選框。用戶(hù)可以選中或取消選取復(fù)選框。
簡(jiǎn)單的下拉列表
本例演示如何在 HTML 頁(yè)面中創(chuàng)建簡(jiǎn)單的下拉列表框。下拉列表框是一個(gè)可選列表。
預(yù)選下拉列表
本例演示如何創(chuàng)建一個(gè)簡(jiǎn)單的帶有預(yù)選值的下拉列表。
文本域 (Textarea)
本例演示如何創(chuàng)建文本域(多行文本輸入控件)。用戶(hù)可在文本域中寫(xiě)入文本。可寫(xiě)入字符的字?jǐn)?shù)不受限制。
創(chuàng)建按鈕
本例演示如何創(chuàng)建按鈕。你可以對(duì)按鈕上的文字進(jìn)行自定義。
帶邊框的表單
本例演示如何在數(shù)據(jù)周?chē)L制一個(gè)帶標(biāo)題的框。
帶有輸入框和確認(rèn)按鈕的表單
本例演示如何向頁(yè)面添加表單。此表單包含兩個(gè)輸入框和一個(gè)確認(rèn)按鈕。
帶有復(fù)選框的表單
此表單包含兩個(gè)復(fù)選框和一個(gè)確認(rèn)按鈕。
帶有單選按鈕的表單
此表單包含兩個(gè)單選框和一個(gè)確認(rèn)按鈕。
從表單發(fā)送電子郵件
此例演示如何從表單發(fā)送電子郵件。
New : HTML5 新標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<form> | 定義供用戶(hù)輸入的表單 |
<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)擊按鈕 |
New | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
New | 定義了表單的密鑰對(duì)生成器字段 |
New | 定義一個(gè)計(jì)算結(jié)果 |
更多建議: