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 浏览器支持。

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