top
Loading...
HTML 表單

HTML 表單和輸入


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


在線實例

創建文本字段 (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.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

瀏覽器顯示傚果如下:

Username:

假如您在上面的文本框內鍵入幾個字母,然後點擊確認按鈕,那么輸入數據會傳送到 "html_form_action.asp" 的頁面。該頁面將顯示出輸入的結果。


更多實例

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

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

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

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

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

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

表單實例

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

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

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

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

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


HTML 表單標籤

New : HTML5新標籤

標籤 描述
<form> 定義供用戶輸入的表單
<input> 定義輸入域
<textarea> 定義文本域 (一個多行的輸入控件)
<label> 定義了 <input> 元素的標籤,一般為輸入標題
<fieldset> 定義了一組相關的表單元素,併使用外框包含起來
<legend> 定義了 <fieldset> 元素的標題
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
<button> 定義一個點擊按鈕
<datalist>New 指定一個預先定義的輸入控件選項列表
<keygen>New 定義了表單的密鑰對生成器字段
<output>New 定義一個計算結果
北斗有巢氏 有巢氏北斗