HTML5 表单 第一部分：输入类型

新增输入类型

使用 input 元素创建的基本表单字段包括文本、密码、复选框、单选按钮和提交按钮，这些内容已在 HTML 入门部分涵盖。在 HTML5 中，这些类型得到了扩展，以适应更具体的字段。

搜索

用于一个 搜索查询文本框，它的行为与标准的文本输入框完全相同。

<input type="search" name="search">

电话、URL 和电子邮件地址

其他“特殊”文本输入类型包括 tel（用于电话号码）、url（用于网址）和 email（用于电子邮件地址）。

<input type="tel" name="telephone_number">
<input type="url" name="web_address">
<input type="email" name="email_address">

数字和范围

通过 type="number" 可以创建一个简单的文本框，它还允许用户直接输入一个 数字，或者在数字之间循环（通常使用字段旁边的向上和向下箭头）。可以添加一个额外的 step 属性来指定每次递增时数字的增减量。

如果还希望数字有一个最小值或最大值，可以进一步使用 min 和 max 属性。

<input type="number" name="quantity" step="2" min="20" max="30">

再次说明，如果 支持此功能，用户将能够直接在字段中输入，或者，如果使用箭头，则以每次两个单位的增量在 20 和 30 之间循环。

可以使用 type="range" 来替代数字输入框的方法。默认情况下，它应该显示为一个带有中间滑块的水平条。然后，用户可以左右移动滑块，最左端的值为“0”，最右端的值为“100”。可以使用 min 和 max 属性来调整此范围。

<input type="range" name="temperature" min="15" max="25" step="0.5" value="18.5">

日期和时间

有几种用于 日期和时间 的输入类型。

• type="datetime"
• type="date"
• type="month"
• type="week"
• type="time"
• type="datetime-local"

如果受支持（目前尚未广泛支持，并且在不同浏览器之间的支持度也不一致），这些输入类型将提示用户以特定格式输入日期或时间，可以通过直接输入、一次性循环一周/一天/一小时/一分钟等，或者从下拉日历中选择。

颜色

最后，type="color" 用于允许用户选择一种 颜色，并以六位十六进制代码作为其值。

<input name="color" type="color" value="#ff8800">