HTML之 表單與輸入

HTML 表單用於收集不同型別的使用者輸入。表單是一個包含表單元素的區域。表單元素是允許使用者在表單中輸入內容,比如：文字域(textarea)、下拉選單、單選框(radio-buttons)、核取方塊(checkboxes)等等。

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

表單元素是允許使用者在表單中輸入內容,比如：文字域(textarea)、下拉選單、單選框(radio-buttons)、核取方塊(checkboxes)等等。
表單使用表單標籤<form>來設定:

<form>
.
.
</form>

多數情況下被用到的表單標籤是輸入標籤（<input>）。

輸入型別是由型別屬性（type）定義的。大多數經常被用到的輸入型別如下：

文字域透過<input type="text">標籤來設定，當使用者要在表單中鍵入字母、數字等內容時，就會用到文字域。

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

瀏覽器顯示如下：

First name: 
Last name: 

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

密碼欄位透過標籤<input type="password"> 來定義:

<form>
Password:
<input type="password" name="pwd">
</form>

瀏覽器顯示效果如下:

Password: 

<input type="radio" >標籤定義了表單單選框選項

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

瀏覽器顯示效果如下:

Male
Female

<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>

瀏覽器顯示效果如下:

I have a bike
I have a car

<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>

瀏覽器顯示效果如下:

Username: 

假如您在上面的文字框內鍵入幾個字母，然後點選確認按鈕，那麼輸入資料會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。

原文地址：