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 styl