HTML5表单：工具箱中的可靠工具

我们已经对页面的大部分进行了编码，现在您几乎了解了有关新HTML5元素及其语义的所有知识。但是，在我们开始在网站外观上进行工作（我们将在第7章中进行操作）之前，我们将快速绕过HTML5 Herald的首页以浏览注册页面。这将说明HTML5必须提供的Web形式。

HTML5 Web表单引入了新的表单元素，输入类型，属性，本机验证和其他表单功能。多年来，我们在界面中一直使用许多这些功能：表单验证，组合框，占位符文本等。不同之处在于，在我们不得不诉诸JavaScript来创建这些行为之前；现在它们可以直接在浏览器中使用。您需要做的就是在标记中包含属性以使其可用。

HTML5不仅使开发人员可以更轻松地标记表单，而且对用户也更好。由于客户端验证由浏览器本地处理，因此不同站点之间的一致性更高，并且许多页面在没有所有多余JavaScript的情况下可以更快地加载。

让我们潜入吧！

工具箱中的可靠工具

表单通常是开发人员在其页面中添加的最后一件事-许多开发人员发现表单简直无聊。好消息是HTML5为编码形式注入了更多乐趣。在本章的最后，我们希望您期待在标记中使用适当的表单元素。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

让我们从普通的老式HTML开始我们的注册表单：

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>form</span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register<span style="color:#999999">"</span></span> <span style="color:#669900">method</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>post<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>header</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>h1</span><span style="color:#999999">></span></span>Sign Me Up!<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>h1</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>I would like to receive your fine publication.<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>header</span><span style="color:#999999">></span></span>

  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>ul</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register-name<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>My name is:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register-name<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>name<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>address<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>My email address is:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>address<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>address<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>url<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>My website is located at:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>url<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>url<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span> 
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I would like my password to be:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>p</span><span style="color:#999999">></span></span>(at least 6 characters, no spaces)<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>p</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>password<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>rating<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>On a scale of 1 to 10, my knowledge of HTML5 is:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>rating<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>rating<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>startdate<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>Please start my subscription on:<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>startdate<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>startdate<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>quantity<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>I would like to receive <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>quantity<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>quantity<span style="color:#999999">"</span></span><span style="color:#999999">></span></span> copies of <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>cite</span><span style="color:#999999">></span></span> The HTML5 Herald<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>cite</span><span style="color:#999999">></span></span>.<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>label</span> <span style="color:#669900">for</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>upsell<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>Also sign me up for <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>cite</span><span style="color:#999999">></span></span>The CSS3 Chronicle<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>cite</span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>label</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>checkbox<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>upsell<span style="color:#999999">"</span></span> <span style="color:#669900">name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>upsell<span style="color:#999999">"</span></span> <span style="color:#669900">value</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>CSS Chronicle<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span><span style="color:#999999">></span></span>
      <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>submit<span style="color:#999999">"</span></span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>register-submit<span style="color:#999999">"</span></span> <span style="color:#669900">value</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>Send Post Haste<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
    <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span>
  <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>ul</span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>form</span><span style="color:#999999">></span></span></code></span>

此样本注册表单使用的表单元素自HTML最早版本以来就可用。此表单通过label和p元素向用户提供有关每个字段中期望的数据类型的线索，因此，即使您的Netscape 4.7和IE5用户（喜欢！）也可以理解该表单。它有效，但是肯定可以改进。

在本章中，我们将对该表单进行增强，使其包含HTML5表单功能。HTML5提供了特定于电子邮件地址，URL，数字，日期等的新输入类型。除了这些之外，HTML5引入了可与新输入类型和现有输入类型一起使用的属性。这些使您可以提供占位符文本，根据需要标记字段，并声明可接受的数据类型-所有这些都无需JavaScript。

我们将在本章后面介绍所有新添加的输入类型。在此之前，让我们看一下HTML5提供的新表单属性。