网页表单

网页表单（英语：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）.