HTML 表单元素


本章介绍了所有HTML表单元素.


<input>元素

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

<input>元素可以通过多种方式显示,具体取决于type属性.

实例

<input name="name" type="text">
运行 »

如果省略type属性,则输入字段将获取默认类型:"text".

所有不同的输入类型将在下一章中介绍.


<select>元素

<select>元素定义了一个下拉列表 :

实例

<select name="cars">
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">奥迪</option>
</select>
运行 »

<option>元素定义了一个可以选择的选项.

默认情况下,选择下拉列表中的第一个项目.

要定义预先选择的选项,请将selected属性添加到选项中:

实例

<option value="fiat" selected>菲亚特</option>
运行 »

可见值:

使用size属性指定可见值的数量:

实例

<select name="cars" size="3" >
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">奥迪</option>
</select>
运行 »

允许选择多个:

使用multiple属性允许用户选择多个值:

实例

<select name="cars" size="4" multiple >
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="fiat">菲亚特</option>
  <option value="audi">奥迪</option>
</select>
运行 »

<textarea>元素

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

实例

<textarea name="message" rows="10" cols="30">
那只猫在花园里玩耍.
</textarea>
运行 »

rows属性指定文本区域中可见的行数.

cols属性指定文本区域的可见宽度.

这就是上面的HTML代码将如何在浏览器中显示:

您还可以使用CSS定义文本区域的大小:

实例

<textarea name="message" style="width:200px; height:600px">
那只猫在花园里玩耍.
</textarea>
运行 »


<button>元素

<button>元素定义了一个可点击的按钮 :

实例

<button type="button" onclick="alert('Hello World!')">点击我!</button>
运行 »

这就是上面的HTML代码将如何在浏览器中显示:


注意:始终为button元素指定type属性.不同的浏览器可以对按钮元素使用不同的默认类型.


HTML5表单元素

HTML5添加了以下表单元素:

  • <datalist>
  • <output>

注意:浏览器不显示未知元素.旧版浏览器虽然不支持新元素但是不会"破坏"您的网页.


HTML5 <datalist>元素

<datalist>元素指定<input>元素的预定义选项列表.

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

<input>元素的 list属性必须引用 <datalist>元素的 id属性.

Opera Safari Chrome Firefox Internet Explorer

实例

<form action="/action_page">
  <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 <output>元素

<output>元素表示计算的结果(如脚本执行的结果).

Opera Safari Chrome Firefox Internet Explorer

实例

执行计算并在<output>元素中显示结果:

<form action="/action_page"
  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> 指定一个预先定义的输入控件选项列表
<output> 定义一个计算结果