Latest web development tutorials

HTML 表單

HTML 表單用於蒐集不同類型的用戶輸入。


Examples

在線實例

創建文本字段(Text field)
本例演示如何在HTML 頁面創建文本域。 用戶可以在文本域中寫入文本。

創建密碼字段
本例演示如何創建HTML 的密碼域。

(在本頁底端可以找到更多實例。)


HTML 表單

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

表單元素是允許用戶在表單中輸入內容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

表單使用表單標籤<form> 來設置:

<form>
.
input 元素
.
</form>


HTML 表單- 輸入元素

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

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


文本域(Text Fields)

文本域通過<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:

注意:密碼字段字符不會明文顯示,而是以星號或圓點替代。


單選按鈕(Radio Buttons)

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

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

瀏覽器顯示效果如下:

Male
Female

複選框(Checkboxes)

<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

提交按鈕(Submit Button)

<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" 的頁面。 該頁面將顯示出輸入的結果。


Try it 更多實例

單選按鈕(Radio buttons)
本例演示如何在HTML 中創建單選按鈕。

複選框(Checkboxes)
本例演示如何在HTML 頁中創建複選框。 用戶可以選中或取消選取複選框。

簡單的下拉列表
本例演示如何在HTML 頁面中創建簡單的下拉列錶框。 下拉列錶框是一個可選列表。

預選下拉列表
本例演示如何創建一個簡單的帶有預選值的下拉列表。

文本域(Textarea)
本例演示如何創建文本域(多行文本輸入控件)。 用戶可在文本域中寫入文本。 可寫入字符的字數不受限制。

創建按鈕
本例演示如何創建按鈕。 你可以對按鈕上的文字進行自定義。

Try it 表單實例

帶邊框的表單
本例演示如何在數據周圍繪製一個帶標題的框。

帶有輸入框和確認按鈕的表單
本例演示如何向頁面添加表單。 此表單包含兩個輸入框和一個確認按鈕。

帶有復選框的表單
此表單包含兩個複選框和一個確認按鈕。

帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。

從表單發送電子郵件
此例演示如何從表單發送電子郵件。


HTML 表單標籤

New : HTML5新標籤

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果