網頁表單
網頁表單(英語: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/>
<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.
- 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; 在用。
参考文献
- . webdesignmuseum.org. Web Design Museum. [17 February 2022]. (原始内容存档于2023-07-09).
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.