HTML5 – Web Forms 2.0

Web Forms 2.0是HTML4表单功能的扩展。HTML5中的表单元素和属性提供比HTML4更高的语义标记，使我们从HTML4中需要的许多繁琐的脚本和样式中解放出来。

HTML4中的输入（`<input>`）元素

在HTML4中，输入元素使用 type 属性来指定数据类型。HTML4提供以下类型：

排序	类型和描述
1	text 一个自由格式的文本字段，名义上没有换行符。
2	password 一个自由格式的文本字段，用于敏感信息，名义上没有换行符。
3	checkbox 从预定义列表中选择零个或多个值的集合。
4	radio 枚举值。
5	submit 一个自由形式的按钮，启动表单提交。
6	file 一个具有MIME类型和可选文件名的任意文件。
7	image 与特定图像大小相关的坐标，具有额外的语义，必须选择最后一个值并启动表单提交。
8	hidden 一个任意的字符串，通常不显示给用户。
9	select 枚举值，类似于单选按钮。
10	textarea 一个自由格式的文本字段，名义上没有换行约束。
11	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 浏览器尝试以下所有示例。

序号	类型和描述
1	datetime 一个日期和时间（年，月，日，小时，分钟，秒，分数秒）按照ISO 8601编码，时区设置为UTC。
2	datetime-local 一个按ISO 8601编码的日期和时间（年，月，日，小时，分钟，秒，分数秒），没有时区信息。
3	date 按照ISO 8601编码的日期（年，月，日）。
4	month 按照ISO 8601编码的包含年份和月份的日期。
5	week 按照ISO 8601编码的包含年份和一周数的日期。
6	time 按照ISO 8601编码的时间（小时，分钟，秒，分数秒）。
7	number 只接受数值。step属性指定精度，默认为1。
8	range 用于输入框中应包含一系列数字值的input类型。
9	email 只接受电子邮件地址。此类型用于应包含电子邮件地址的输入字段。如果尝试提交简单文本，则强制输入电子邮件地址仅采用email@example.com格式。
10	url 只接受URL地址值。此类型用于输入字段应包含URL地址。如果尝试提交简单文本，则强制输入URL地址的格式为http://www.example.com 或者 http://example.com。

`<output>`元素

HTML5引入了一个新元素<output>，用于表示不同类型的输出结果，例如由脚本编写的输出。

您可以使用 for 属性来指定输出元素与文档中其他受计算影响的元素之间的关系（例如作为输入或参数）。 for属性的值是其他元素的ID的空格分隔列表。

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">

         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>

   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text"name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>

   </body>
</html>

它将产生以下结果 −

HTML5 - Web Forms 2.0

placeholder属性

HTML5引入了一种名为 placeholder 的新属性。这个属性用于 <input> 和 <textarea> 元素，为用户提供了可以在字段中输入的提示。占位符文本不能包含回车或换行。

这是 placeholder 属性的简单语法 −

<input type="text" name="search" placeholder="搜索互联网"/>

该属性只支持最新版本的Mozilla，Safari和Chrome浏览器。

<!DOCTYPE HTML>

<html>
   <body>

      <form action="/cgi-bin/html5.cgi" method="get">
         输入电子邮件：<input type="email" name="newinput" 
            placeholder="email@example.com"/>
         <input type="submit" value="提交" />
      </form>

   </body>
</html>

这将产生以下结果 −

HTML5 - Web Forms 2.0

自动聚焦属性

这是一个简单的一步模式，可以在文档加载时使用JavaScript轻松编程，自动聚焦于一个特定的表单字段。

HTML5引入了一个名为 自动聚焦属性 ，如下所示 −

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

该属性只支持最新版本的Mozilla，Safari和Chrome浏览器。

<!DOCTYPE HTML>

<html>
   <body>

      <form action="/cgi-bin/html5.cgi" method="get">
         输入电子邮件：<input type="text" name="newinput" autofocus/>
         <p>尝试使用提交按钮提交</p>
         <input type="submit" value="提交" />
      </form>

   </body>
</html>

必填属性

现在您无需使用JavaScript进行客户端验证，例如空文本框永远不会被提交，因为HTML5引入了一个名为 必填属性 required ，如下所示，并且会坚持要求填写内容。

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

该属性只支持最新版本的Mozilla，Safari和Chrome浏览器。

<!DOCTYPE HTML>

<html>
   <body>

      <form action="/cgi-bin/html5.cgi" method="get">
         输入电子邮件：<input type="text" name="newinput" required/>
         <p>尝试使用提交按钮提交</p>
         <input type="submit" value="提交" />
      </form>

   </body>
</html>

它将产生以下结果 −

HTML5 - Web Forms 2.0