HTML5 表单 第二部分：属性和数据列表

更多属性

除了此处和早期指南中提到的属性外，还有一小组附加属性。

占位符文本

placeholder 属性可用于文本 input 字段（及其类似文本的字段，例如 type="email" 和 type="number"）以及 textarea 元素。它被用作提示，而不是标签，后者仍应使用 label 元素。

<label for="email_address">Email address</label>
<input type="email" placeholder="you@somewhere.com" name="email_address" id="email_address">

自动对焦

当页面加载时，您可能希望焦点落在某个表单字段上。例如，如果您想到一个搜索引擎，当您访问其主页时，通常不需要点击搜索框开始输入 - 您可以直接输入，因为它已经具有焦点。autofocus 属性是实现此效果的快捷方式。

<input name="query" autofocus>

数据列表

数据列表以建议列表的形式伴随一个文本字段。

<input name="country" list="country_name">
<datalist id="country_name">
    <option value="Afghanistan">
    <option value="Albania">
    <option value="Algeria">
    <option value="Andorra">
    <option value="Armenia">
    <option value="Australia">
    <option value="Austria">
    <option value="Azerbaijan">
    <!-- etc. -->
</datalist>

input 元素（可以是任何文本类型的输入）中 list 属性的值将其绑定到一个具有相应 ID（在此示例中为“country_name”）的 datalist 元素。当用户在文本字段中输入内容时，如果输入的内容与数据列表中的任何内容开头匹配，则这些匹配项将显示在文本字段下方作为建议。因此，如果输入“A”，则会显示以“A”开头的 8 个国家。如果“A”后面输入“L”，则建议列表将减少到仅“Albania”和“Algeria”，依此类推。提交表单时发送的值将是文本字段中的内容 - 它可以是列表中选择的内容，也可以是用户输入的完全不同的内容。