W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 表单元素



本章将介绍所有HTML表单元素。


<input> 元素

最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性,可以形成多种表单元素。

Note 下一章将讲解所有的 HTML 输入类型。


<select> 元素(下拉列表)

<select> 元素用来定义 下拉 列表:

Example

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
尝试一下 »

<option> 元素用来定义待选择的选项。

列表通常会把首个选项显示为被选选项。

你也可以通过添加 selected 属性来定义预定义选项。

Example

<option value="fiat" selected>Fiat</option>
尝试一下 »

<textarea> 元素

<textarea> 元素定义多行输入字段(文本域):

Example

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
尝试一下 »

以上 HTML 代码在浏览器中显示为:



<button> 元素

<button> 元素定义可点击的 按钮

Example

<button type="button" onclick="alert('Hello World!')">Click Me!</button>
尝试一下 »

以上 HTML 代码在浏览器中显示为:



HTML5 表单元素

HTML5 增加了如下表单元素:

  • <datalist>
  • <keygen>
  • <output>
Note

默认情况下,浏览器不显示未知元素。新的元素不会破坏你的页面。


HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 列表 属性必须参照 <datalist> 元素的 id 属性。

OperaSafariChromeFirefoxInternet Explorer

Example

An <input> element with pre-defined values in a <datalist>:

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
尝试一下 »

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一个安全的方式去验证用户。

<keygen> 元素指定密钥对生成器在表单中。

当提交表单时,将生成两个密钥,一个私钥和一个公钥。

私钥存储在本地,公钥发送到服务器。

公钥可用于生成客户端证书以在将来对用户进行身份验证。

OperaSafariChromeFirefoxInternet Explorer

Example

A form with a keygen field:

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>
尝试一下 »

HTML5 <output> 元素

<output> 元素用于不同类型的输出,比如计算或脚本输出。

OperaSafariChromeFirefoxInternet Explorer

Example

Perform a calculation and show the result in an <output> element:

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
尝试一下 »

HTML 表单元素

= HTML5新标签。

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入控件
<textarea> 定义一个多行输入控件(文本域)
<label> 定义 <input> 元素的标签
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 标签定义选项列表
<keygen> 标签规定用于表单的密钥对生成器字段
<output> 标签定义不同类型的输出,比如脚本的输出