HTML 表單和輸入


HTML 表單用於收集用戶的輸入信息。

HTML 表單表示文檔中的一個區域,此區域包含交互控件,將用戶收集到的信息發送到 Web 服務器。


Examples

在線實例

實例

以下實例創建了一個表單,包含兩個輸入框:

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

嚐試一下 »

實例

以下實例創建了一個表單,包含一個普通輸入框和一個密碼輸入框:

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

嚐試一下 »

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


HTML 表單

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

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

我們可以使用 <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 action="">
<input type="radio" name="sex" value="male"><br>
<input type="radio" name="sex" value="female">
</form>

瀏覽器顯示效果如下:



複選框(Checkboxes)

<input type="checkbox"> 定義了複選框。

複選框可以選取一個或多個選項:

實例

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜歡自行車<br>
<input type="checkbox" name="vehicle" value="Car">我喜歡小汽車
</form>

瀏覽器顯示效果如下:

我喜歡自行車
我喜歡小汽車

提交按鈕(Submit)

<input type="submit"> 定義了提交按鈕。

當用戶單擊確認按鈕時,表單的內容會被傳送到服務器。表單的動作屬性 action 定義了服務端的文件名。

action 屬性會對接收到的用戶輸入數據進行相關的處理:

實例

<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 文件,該頁麵將顯示出輸入的結果。

以上實例中有一個 method 屬性,它用於定義表單數據的提交方式,可以是以下值:

  • post:指的是 HTTP POST 方法,表單數據會包含在表單體內然後發送給服務器,用於提交敏感數據,如用戶名與密碼等。

  • get:默認值,指的是 HTTP GET 方法,表單數據會附加在 action 屬性的 URL 中,並以 ?作為分隔符,一般用於不敏感信息,如分頁等。例如:https://rb.wikimirror.xyz/?page=1,這裏的 page=1 就是 get 方法提交的數據。

實例

<!-- 以下表單使用 GET 請求發送數據到當前的 URL,method 默認位 GET。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下表單使用 POST 請求發送數據到當前的 URL。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 表單使用 fieldset, legend, 和 label 標簽 -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

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 定義一個計算結果