網頁表單

**網頁表單**（英語：WebForms）可以將使用者輸入的資料，傳送到伺服器進行處理。因為網際網路的使用者會操作核取方塊、無線電鈕或文字方塊來填寫網頁上的表格，所以網頁表單的形式類似檔案或資料庫的表單（form）。例如，網頁表單可應用在線上的電子商務：以信用卡訂購產品、要求貨運，或可用於檢索資料（例如，搜尋引擎上搜尋）。

## 描述

表單被 HTML 的 `<form>` 元素所包含。並指出提交資料所用的 HTTP request 方法：`GET` 或 `POST`。

### 元素

表單可以使用的 html 使用者介面元素：

`**<form****action**="url"**>**...**</form>**`

　
: `<form>` 元素定義出 form 區域的範圍。要求 `action` 屬性。

　
: **標準化**於 HTML 2.0; 在用。

`**<button****>**...**</button>**`

　
: 通用的表單按鈕，可進一步具體化

　
: **標準化**於 HTML 4.0; 在用。

`**<datalist****>**...**</datalist>**`

　
: `option` 清單

　
: **標準化**於 HTML5.

`**<fieldset****>**...**</fieldset>**`

　
: A container for adding structure to forms. For example, a series of related controls can be grouped within a `<fieldset>`, which can then have a `<legend>` added in order to identify their function.

　
: **標準化**於 HTML 4.0; 在用。

`**<input****/>**`

　
: `<input>` 元素可實現多種控制項

　
: **標準化**於 HTML 2.0; 在用。

　
: **Input Types:**

　
: **type**="checkbox"

　
: **核取方塊**

　
: **type**="radio"

　
: **無線電鈕**.

　
: **type**="button"

　
: A general-purpose button. The element `<button>` is preferred if possible (i.e., if the client supports it) as it provides richer possibilities.

　
: **type**="submit"

　
: **提交**按鈕

　
: **type**="image"

　
: **圖片按鈕**. `src` 屬性中必須給出圖片 URL

　
: **type**="reset"

　
: **復位按鈕**把表單恢復為初值

　
: **type**="text"

　
: **單行文字輸入**.

　
: **type**="search"

　
: `text` 變種，產生搜尋條

　
: **type**="password"

　
: `text` 變種，輸入的字元用星號顯示，但仍然是明文上傳伺服器，因而可能不安全，需要用 HTTPS 協定。

　
: **type**="file"

　
: 檔案選擇，用於上傳檔案到伺服器。

　
: **type**="tel"

　
: `text` 變種，輸入電話號碼

　
: **type**="email"

　
: `text` 變種，輸入 email 位址

　
: **type**="url"

　
: `text` 變種，輸入 URLs

　
: **type**="date"

　
: 日期選擇

　
: **type**="time"

　
: A time selector.

　
: **type**="number"

　
: `text` 變種，輸入數

　
: **type**="range"

　
: 產生一個滑動條，可返回一個數。

　
: **type**="color"

　
: 顏色拾取

　
: **type**="hidden"

　
: `hidden` 輸入是不繪製因而不可見的。但仍會提交給伺服器。

`**<label****for**="id"**>**...**</label>**`

　
: 給表單 input 建立一個 label, 點擊 label 引發了點擊匹配的 input.

　
: **標準化**於 HTML 4.0; 在用。

`**<legend****>**...**</legend>**`

　
: A legend (caption) for a `<fieldset>`.

　
: **標準化**於 HTML 4.0; 在用。

`**<meter****>**...**</meter>**`

　
: A meter which needs a `value` attribute. Can also have: `min`, `low`, `high`, and `max`.

　
: **標準化**於 HTML5.

`**<option****value**="x"**>**...**</option>**`

　
: Creates an item in a `<select>` list.

　
: **標準化**於 HTML 2.0; 在用。

`**<optgroup****>**...**</optgroup>**`

　
: Identifies a group of `<option>` elements in a `<select>` list.

　
: **標準化**於 HTML 4.0; 在用。

`**<output****>**...**</output>**`

　
: The value of a form element.

　
: **標準化**於 HTML5.

`**<progress****>**...**</progress>**`

　
: A bar for showing the progress of an action.

　
: **標準化**於 HTML5.

`**<select****name**="xyz"**>**...**</select>**`

　
: Creates a selection list, from which the user can select a single option. May be rendered as a dropdown list.

　
: **標準化**於 HTML 2.0; 在用。

`**<textarea****rows**="8"**>**...**</textarea>**`

　
: A multiple-line text area, the size of which is specified by `cols` (where a column is a one-character width of text) and `rows` HTML attributes. The content of this element is restricted to plain text, which appears in the text area as default text when the page is loaded.

　
: **標準化**於 HTML 2.0; 在用。

## 歷史

網頁表單最早用於 Viola 瀏覽器。

## 參考文獻