表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中(比如:文本域、下拉列表、單選框、複選框等等)輸入信息的元素。
表單使用表單標籤(<form>)定義。
<form> <input /></form>
Input類型
HTML5擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
1.Input 類型- email
email 類型用於應該包含e-mail 地址的輸入域。在提交表單時,會自動驗證email 域的值。
2.Input 類型- url
url 類型用於應該包含URL 地址的輸入域。在提交表單時,會自動驗證url 域的值。
3.Input 類型- number
number 類型用於應該包含數值的輸入域。您還能夠設定對所接受的數字的限定:
4.Input 類型- range
range 類型用於應該包含一定範圍內數字值的輸入域。
range 類型顯示為滑動條。
您還能夠設定對所接受的數字的限定:
5.Input 類型- Date Pickers(數據檢出器)
HTML5 擁有多個可供選取日期和時間的新輸入類型:
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間(小時和分鐘)
datetime - 選取時間、日、月、年(UTC 時間)
datetime-local - 選取時間、日、月、年(本地時間)
6.Input 類型- search
search 類型用於搜尋域,比如站點搜尋或Google 搜尋。
search 域顯示為常規的文本域。
輸入
多數情況下被用到的表單標籤是輸入標籤(<input>)。輸入類型是由類型屬性(type)定義的。大多數經常被用到的輸入類型如下:
文本域
當用戶要在表單中鍵入字母、數字等內容時,就會用到文本域(text fields)。
瀏覽器顯示如下:
注意,表單本身並不可見。同時,在大多數瀏覽器中,文本域的預設寬度是20個字元。
單選按鈕
當用戶從若干給定的的選擇中選取其一時,就會用到單選框(radio buttons)。
瀏覽器顯示如下:
注意,只能從中選取其一。
如圖:
複選框
當用戶需要從若干給定的選擇中選取一個或若干選項時,就會用到複選框(checkboxes)。
瀏覽器顯示如下:
密碼欄位
密碼欄位通過標籤 <input type="password"> 來定義:
注意:密碼欄位字元不會明文顯示,而是以星號或圓點替代。
其他組成
確認按鈕
當用戶單擊確認按鈕(submit)時,表單的內容會被傳送到另一個檔案。
動作屬性
表單的動作屬性(action)定義了目的檔案的檔案名稱。由動作屬性定義的這個檔案通常會對接收到的輸入數據進行相關的處理。
瀏覽器顯示如下:
Username:
如下圖:
假如您在上面的文本框內鍵入幾個字母,並且點擊確認按鈕,那么輸入數據會被傳送到名為 "html_form_action.asp" 的頁面。那一頁將顯示出輸入的結果。
表單標籤
帶“#”的為 HTML5 中的新標籤。
標籤 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個多行的輸入控制項) |
<label> | 定義一個控制的標籤 |
<fieldset> | 定義域 |
<legend> | 定義域的標題 |
<select> | 定義一個選擇列表 |
<optgroup> | 定義選項組 |
<option> | 定義下拉列表中的選項 |
<button> | 定義一個按鈕 |
<isindex> | 已廢棄,由<input>代替。 |
<datalist>(#) | 指定一個預先定義的輸入控制項選項列表 |
<keygen>(#) | 定義了表單的密鑰對生成器欄位 |
<output>(#) | 定義一個計算結果 |