複製鏈接
請複製以下鏈接發送給好友

HTML表單

鎖定
HTML 表單用於蒐集不同類型的用户輸入。HTML5 Input,擁有多個新的表單輸入類型,提供了更好的輸入控制和驗證。
中文名
HTML表單
外文名
HTML FORM
解    釋
包含表單元素的區域
作    用
蒐集不同類型的用户輸入
學    科
計算機

HTML表單表單

表單是一個包含表單元素的區域。
表單元素是允許用户在表單中(比如:文本域、下拉列表、單選框複選框等等)輸入信息的元素。
表單使用表單標籤( )定義。
[1] 

HTML表單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 域顯示為常規的文本域。 [2] 

HTML表單輸入

多數情況下被用到的表單標籤是輸入標籤( )。輸入類型是由類型屬性(type)定義的。大多數經常被用到的輸入類型如下:

HTML表單文本域

當用户要在表單中鍵入字母、數字等內容時,就會用到文本域(text fields)。
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
瀏覽器顯示如下:
HTML表單 HTML表單
注意,表單本身並不可見。同時,在大多數瀏覽器中,文本域的缺省寬度是20個字符 [1] 

HTML表單單選按鈕

當用户從若干給定的的選擇中選取其一時,就會用到單選框(radio buttons)。
<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>
瀏覽器顯示如下:
Male
Female
注意,只能從中選取其一。 [1] 
如下:
HTML表單 HTML表單

HTML表單複選框

當用户需要從若干給定的選擇中選取一個或若干選項時,就會用到複選框(checkboxes)。
<form>
<input type="checkbox" name="bike" />I have a bike
<br />
<input type="checkbox" name="car" />I have a car
</form>
瀏覽器顯示如下:
I have a bike
I have a car

HTML表單密碼字段

密碼字段通過標籤 來定義: [3] 
<form>
Password: <input type="password" name="pwd">
</form>
注意:密碼字段字符不會明文顯示,而是以星號或圓點替代。

HTML表單其他組成

HTML表單確認按鈕

當用户單擊確認按鈕(submit)時,表單的內容會被傳送到另一個文件。 [1] 

HTML表單動作屬性

表單的動作屬性(action)定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
瀏覽器顯示如下:
Username:
如下:
HTML表單 HTML表單
假如您在上面的文本框內鍵入幾個字母,並且點擊確認按鈕,那麼輸入數據會被傳送到名為 "html_form_action.asp" 的頁面。那一頁將顯示出輸入的結果。 [1] 

HTML表單表單標籤

帶“#”的為 HTML5 中的新標籤。
標籤
描述
-
定義供用户輸入的表單
-
定義輸入域
-
定義文本域 (一個多行的輸入控件)
-
定義一個控制的標籤
-
定義域
-
定義域的標題
-
定義一個選擇列表
-
定義選項組
-
定義下拉列表中的選項
-
定義一個按鈕
-
已廢棄,由代替。
(#)
指定一個預先定義的輸入控件選項列表
(#)
定義了表單的密鑰對生成器字段
(#)
定義一個計算結果
參考資料