无涯教程-HTML5 - 表单标签 Web Forms 2.0是对HTML4中的表单函数的扩展。与HTML4相比，HTM

Web Forms 2.0是对HTML4中的表单函数的扩展。与HTML4相比，HTML5中的表单元素和属性提供了更高程度的语义标签，使无涯教程摆脱了HTML4所需的繁琐脚本和样式。

HTML4 Input 标签

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

Sr.No.	Type & Remark
1	text 单行输入文本
2	password 密码
3	checkbox 多选
4	radio 单选
5	submit Form表单提交
6	file 文件上传
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 /> 
  </span><span class="pun">&lt;</span><span class="pln">label </span><span class="kwd">for</span><span class="pun">=</span><span class="str">"lastname"</span><span class="pun">&gt;</span><span class="kwd">last</span><span class="pln"> name</span><span class="pun">:</span><span class="pln"> </span><span class="pun">&lt;/</span><span class="pln">label</span><span class="pun">&gt;</span><span class="pln"> 
  </span><span class="pun">&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"lastname"</span><span class="pun">&gt;&lt;</span><span class="pln">br </span><span class="pun">/&gt;</span><span class="pln"> 

  </span><span class="pun">&lt;</span><span class="pln">label </span><span class="kwd">for</span><span class="pun">=</span><span class="str">"email"</span><span class="pun">&gt;</span><span class="pln">email</span><span class="pun">:</span><span class="pln"> </span><span class="pun">&lt;/</span><span class="pln">label</span><span class="pun">&gt;</span><span class="pln"> 
  </span><span class="pun">&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"email"</span><span class="pun">&gt;&lt;</span><span class="pln">br</span><span class="pun">&gt;</span><span class="pln"> 

  </span><span class="pun">&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"radio"</span><span class="pln"> name</span><span class="pun">=</span><span class="str">"sex"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"male"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="typ">Male</span><span class="str">&lt;br&gt;</span><span class="pln"> 
  </span><span class="pun">&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"radio"</span><span class="pln"> name</span><span class="pun">=</span><span class="str">"sex"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"female"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="typ">Female</span><span class="str">&lt;br&gt;</span><span class="pln"> 
  </span><span class="pun">&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"submit"</span><span class="pln"> </span><span class="kwd">value</span><span class="pun">=</span><span class="str">"send"</span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">input type</span><span class="pun">=</span><span class="str">"reset"</span><span class="pun">&gt;</span><span class="pln"> 

</p>
</form>
...

HTML5 Input 标签

除了上述属性外，HTML5输入元素还为 type 属性引入了几个新值，这些在下面列出。

Sr.No.	Type & Remark
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值。如果您尝试提交简单文本，它将强制仅以http://www.example.com格式或http://example.com格式输入URL地址。

Output 标签

HTML5引入了一个新元素<output>，用于表示不同类型输出的输出，例如脚本编写的输出，for属性的值是其他元素的ID的空格分隔列表。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
     </span><span class="kwd">function</span><span class="pln"> showResult</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        x</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">[</span><span class="str">"myform"</span><span class="pun">][</span><span class="str">"newinput"</span><span class="pun">].</span><span class="pln">value</span><span class="pun">;</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">forms</span><span class="pun">[</span><span class="str">"myform"</span><span class="pun">][</span><span class="str">"result"</span><span class="pun">].</span><span class="pln">value</span><span class="pun">=</span><span class="pln">x</span><span class="pun">;</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</head>
<body>
  </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"/cgi-bin/html5.cgi"</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"get"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myform"</span><span class="tag">&gt;</span><span class="pln">
     Enter a value : </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"newinput"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
     </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Result"</span><span class="pln">  </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showResult</span><span class="pun">();</span><span class="atv">"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
     </span><span class="tag">&lt;output</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"result"</span><span class="tag">&gt;&lt;/output&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">
	

</body>
</html>

它将产生以下输出-

Placeholder 属性

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

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

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

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

<!DOCTYPE HTML>
<html>
<body>
  </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"/cgi-bin/html5.cgi"</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"get"</span><span class="tag">&gt;</span><span class="pln">
     Enter email : </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"newinput"</span><span class="pln"> 
        </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"email@example.com"</span><span class="tag">/&gt;</span><span class="pln">
     </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">

</body>
</html>

这将产生以下输出-

Autofocus 属性

HTML5引入了一个名为 autofocus 的新属性，该属性将按以下方式使用-

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

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

<!DOCTYPE HTML>
<html>
<body>
  </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"/cgi-bin/html5.cgi"</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"get"</span><span class="tag">&gt;</span><span class="pln">
     Enter email : </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"newinput"</span><span class="pln"> </span><span class="atn">autofocus</span><span class="tag">/&gt;</span><span class="pln">
     </span><span class="tag">&lt;p&gt;</span><span class="pln">Try to submit using Submit button</span><span class="tag">&lt;/p&gt;</span><span class="pln">
     </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">
  

</body>
</html>

Required 属性

HTML5引入了一个名为 required 的新属性，表示该属性必须有值，不能空 -

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