HTML表單的詳細介紹

HTML 表單用於蒐集不同類型的使用者輸入。 HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗證。

表單

編輯

#表單是一個包含表單元素的區域。

表單元素是允許使用者在表單中（例如：文字網域、下拉清單、單選框、核取方塊等等）輸入資訊的元素。

表單使用表單標籤（

）定義。

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 域顯示為常規的文字域。

輸入

編輯

#多數情況下被用到的表單標籤就是輸入標籤（）。輸入類型是由類型屬性（type）定義的。大多數常被用到的輸入類型如下：

文本域

當使用者要在表單中鍵入字母、數字等內容時，就會用到文本域(text fields)。

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

瀏覽器顯示如下：

注意，表單本身並不可見。同時，在大多數瀏覽器中，文字域的缺省寬度是20個字元。

當使用者從若干給定的選擇中選取其一時，就會用到單選框(radio buttons)。

<form>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
</form>

瀏覽器顯示如下：

Male
Female

注意，只能從中選取其一。

如圖：

複選框

#當使用者需要從若干給定的選擇中選取一個或若干選項時，就會用到複選框（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

其他組成

##編輯

確認

按鈕

當使用者點選確認按鈕(submit)時，表單的內容會傳送到另一個檔案。 [1] 

動作屬性

表單的動作屬性(

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_form_action.asp" 的頁面。那一頁將會顯示出輸入的結果。

表單標籤

【相關推薦】

1. HTML免費影片教學

2. 詳解form表單的工作流程

3. 詳解form標籤中的method屬性

4. 帶你掌握HTML中table與form表單

5. 詳解html中form表單的參數與屬性

以上是HTML表單的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！