9、爱上表单：HTML5 与 CSS3 的表单优化指南

爱上表单：HTML5 与 CSS3 的表单优化指南

1. 为表单字段添加自动聚焦功能

在过去，若要为特定表单字段添加输入焦点，我们只能依赖 JavaScript。但如今，HTML5 让我们能够原生实现这一功能。

1.1 操作步骤

以 Ally Creative 的联系表单（http://allycreative.net/contact ）为例，他们通过以下代码实现了自动聚焦：

<form action="" method="post">
  <ol id="left">
    <li>
      <label for="contact-name" class="label-fade">Jane Doe of ACME Corporation</label>
      <input type="text" id="contact-name" name="contact-name" title="Name / Business" autofocus />
    </li>
    <li>
      <label for="contact-mail" class="label-fade">jane.doe@acme.com</label>
      <input type="text" id="contact-mail" name="contact-mail" title="E-mail Addy" />
    </li>
    <li&g