离线下载
PDF版 ePub版

极客学院团队出品 · 更新于 2018-11-28 11:00:42

HTML5 表单 2.0

Web 表单 2.0 就是 HTML4 表单特性的一个扩展。HTML5 中的表单元素和属性相比 HTML4 提供了更大程度的语义标记,移除了大量 HTML4 中需要的繁琐脚本和样式。

HTML4 中的 <input> 元素

HTML4 输入框元素使用 type 属性指定数据类型。HTML4 提供了下列类型:

类型 描述
text 自由形式的文本字段,名义上没有换行符。
password 用于敏感信息的自由形式的文本字段,名义上没有换行符。
checkbox 预定义列表中的一组零个或多个值。
radio 一个枚举值。
submit 一个自由形式的启动表单的按钮。
file 带有 MIME 类型的任意文件以及可选的文件名。
image 一个坐标,相对于特定图片的尺寸,额外的语义是它必须是最后选中的值,同时启动表单提交。
hidden 默认不显示给用户的任意字符串。
select 枚举值,类似 radio 类型。
textarea 自由形式的文本字段,名义上没有换行的限制。
button 自由形式的按钮,可以启动按钮相关的任何事件。

下面是一个使用标注标签,单选按钮以及提交按钮的简单示例:

...
<form action="http://example.com/cgiscript.pl" method="post">
    <p>
    <label for="firstname">first name: </label>
              <input type="text" id="firstname"><br />
    <label for="lastname">last name: </label>
              <input type="text" id="lastname"><br />
    <label for="email">email: </label>
              <input type="text" id="email"><br>
    <input type="radio" name="sex" value="male"> Male<br>
    <input type="radio" name="sex" value="female"> Female<br>
    <input type="submit" value="send"> <input type="reset">
    </p>
 </form>
 ...

HTML5 中的 <input> 元素

除了上面提到的属性,HTML5 给输入框元素的 type 属性引入了几个新值。如下表所列。

注意: 请使用最新版的 Opera 浏览器运行下面所有例子。

类型 描述
datetime 按照 ISO 8601 编码,时区设置为 UTC 的日期和时间(包括年,月,日,时,分,秒,分秒)。
datetime-local 按照 ISO 8601 编码的日期和时间(包括年,月,日,时,分,秒,分秒),不带时区信息。
date 按照 ISO 8601 编码的日期(包括年,月,日)。
month 由 ISO 8601 编码的年和月组成的日期。
week 由 ISO 8601 编码的年和星期数组成的日期。
time 按照 ISO 8601 编码时间(包括时,分,秒,和分秒)。
number 只接受数值。step 属性可以指定精度,默认为1。
range range 类型适用于应该包含某个范围内数值的输入字段。
email 只接受邮箱值。这个类型适用于应该包含一个邮箱地址的输入字段。如果尝试提交一个简单的文本,它会强制要求输入 email@example.com 格式的邮箱地址。
url 只接受 URL 值。这个类型适用于应该包含一个 URL 地址的输入字段。如果尝试提交一个简单的文本,它会强制要求输入 http://www.example.com 或者 http://example.com 格式的 URL 地址。

<output> 元素

HTML5 还引入了一个新元素 <output>,用来表示不同类型的输出结果,比如输出由脚本所写。

还可以用 for 属性指定输出元素和文档中影响计算的其他元素之间的关系(比如,作为输入源或者参数)。for 属性的值是一个由空格分隔的其他元素的 IDs 列表。

便于学习这一概念 - 请进行在线练习

placeholder 属性

HTML5 引入了一个叫做 palceholder 的新属性。这个属性在 <input> 和 <textarea> 元素上为用户提供了在这个字段可以输入什么的提示。占位符字符不能包含回车符或者换行符。

下面是 placeholder 属性的简单语法:

<input type="text" name="search" placeholder="search the web"/>

这个属性只有最新版的 Mozilla,Safari 以及 Chrome 浏览器支持。

便于学习这一概念 - 请进行在线练习

required 属性

现在,我们不需要使用 JavaScript 处理诸如空文本框永远不能被提交的这类客户端验证了,因为 HTML5 引入了一个叫做 required 的新属性,可以按照如下方式使用,它会保证输入框有值:

<input type="text" name="search" required/>

这个属性只有最新版的 Mozilla,Safari 以及 Chrome 浏览器支持。

便于学习这一概念 - 请进行在线练习

上一篇: HTML5 事件 下一篇: HTML5 SVG