HTML5 - Web 表单 2.0

Web 表单 2.0 是 HTML4 中表单功能的扩展。HTML5 中的表单元素和属性提供了比 HTML4 更高级别的语义标记，使我们免于在 HTML4 中需要的大量繁琐的脚本编写和样式设计。

HTML4 中的<input> 元素

HTML4 input 元素使用type 属性来指定数据类型。HTML4 提供以下类型 -

序号	类型和描述
1	text 一个自由格式的文本字段，通常不包含换行符。
2	password 一个用于敏感信息的自由格式文本字段，通常不包含换行符。
3	checkbox 从预定义列表中选择零个或多个值。
4	radio 一个枚举值。
5	submit 一个自由格式的按钮，用于初始化表单提交。
6	file 一个任意文件，带有 MIME 类型和可选的文件名。
7	image 相对于特定图像大小的坐标，具有额外的语义，即它必须是最后一个选定的值并初始化表单提交。
8	hidden 一个任意字符串，通常不显示给用户。
9	select 一个枚举值，类似于 radio 类型。
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 input 元素还为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 range 类型用于输入字段，这些字段应包含一个来自数字范围的值。
9	email 它只接受电子邮件值。此类型用于应包含电子邮件地址的输入字段。如果您尝试提交纯文本，它会强制您以 [email protected] 格式输入电子邮件地址。
10	url 它只接受 URL 值。此类型用于应包含 URL 地址的输入字段。如果您尝试提交纯文本，它会强制您以 http://www.example.com 格式或 http://example.com 格式输入 URL 地址。

<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>

它将产生以下结果 -

placeholder 属性

HTML5 引入了一个名为placeholder的新属性。此属性在<input> 和<textarea> 元素上为用户提供了有关可以在字段中输入什么的提示。占位符文本不得包含回车符或换行符。

以下是 placeholder 属性的简单语法 -

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

此属性仅受最新版本的 Mozilla、Safari 和 Chrome 浏览器支持。

实时演示

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

这将产生以下结果 -

autofocus 属性

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

HTML5 引入了一个名为autofocus的新属性，使用方法如下 -

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

此属性仅受最新版本的 Mozilla、Safari 和 Chrome 浏览器支持。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

required 属性

现在您不再需要 JavaScript 进行客户端验证，例如空文本框永远不会提交，因为 HTML5 引入了一个名为required的新属性，使用方法如下，并且会坚持要求有一个值 -

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

此属性仅受最新版本的 Mozilla、Safari 和 Chrome 浏览器支持。

实时演示

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

它将产生以下结果 -

打印页面