網頁表單

網頁表單（英語：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]。

參考文獻

1. ViolaWWW. webdesignmuseum.org. Web Design Museum. [17 February 2022]. （原始內容存檔於2023-07-09）.