網頁表單

網頁表單（英語：WebForms）可以將用戶輸入的數據，發送到服務器進行處理。因為互聯網的使用者會操作複選框、單選按鈕或文本框來填寫網頁上的表格，所以網頁表單的形式類似文件或數據庫的表單（form）。例如，網頁表單可應用在線上的電子商務：以信用卡訂購產品、要求貨運，或可用於檢索數據（例如，搜索引擎上搜索）。

網頁表單範本。這份表單是以 HTML table 呈現的。

描述

表單被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"

文件選擇（英語：file select），用於上傳文件到服務器。

 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瀏覽器^[1]。