Web Forms 2.0（Web Forms 2.0）

优质

小牛编辑

138浏览

2023-12-01

Web Forms 2.0是HTML4中的表单功能的扩展。 HTML5中的表单元素和属性提供了比HTML4更大程度的语义标记，并使我们免于HTML4中所需的大量繁琐的脚本和样式。

HTML4中的《input》元素

HTML4输入元素使用type属性指定数据类型.HTML4提供以下类型 -

Sr.No.	类型和描述
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属性引入了几个新值。这些列在下面。

NOTE - 使用最新版本的Opera浏览器尝试以下所有示例。

Sr.No.	类型和描述
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 范围类型用于输入字段，其中应包含一系列数字中的值。
9	email 它只接受电子邮件价值。此类型用于应包含电子邮件地址的输入字段。如果您尝试提交简单文本，则会强制仅以email@example.com格式输入电子邮件地址。
10	url 它只接受URL值。此类型用于应包含URL地址的输入字段。如果您尝试提交简单文本，则会强制仅以http://www.example.com格式或http://example.com格式输入网址。

元素

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

您可以使用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引入了一个名为placeholder的新属性。 “input”和“textarea”元素的此属性为用户提供了可以在字段中输入的内容的提示。占位符文本不得包含回车符或换行符。

以下是占位符属性的简单语法 -

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

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

<!DOCTYPE HTML>
<html>
   <body>
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "email@example.com"/>
         <input type = "submit" value = "submit" />
      </form>
   </body>
</html>

自动对焦属性

这是一个简单的一步式模式，在文档加载时可以在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>

必需的属性

现在你不需要使用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>