網頁表單

網頁表單(英語:WebForms)可以将用户输入的数据,发送到服务器进行处理。因为互联网的使用者會操作复选框、单选按钮或文本框來填写網頁上的表格,所以網頁表單的形式类似文件数据库的表單(form)。例如,網頁表單可應用在線上的電子商務:以信用卡订购产品、要求貨運,或可用于检索数据(例如,搜索引擎搜索)。

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

描述

表單被HTML<form>元素所包含。并指出提交数据所用的HTTP request方法:GETPOST

元素

表單可以使用的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).