網頁表單
外觀
網頁表單(英語: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/>
- 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.
- A general-purpose button. The element
- 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
, andmax
. - 標準化於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) androws
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; 在用。