HTML5新增的input类型

本文介绍HTML5标准中新增的input类型，如email、number、range、搜索与候选列表、日期和时间等。

email

input元素的type属性设置为email时可以创建输入电子邮箱地址的文本框，其外观与普通文本框无异，但其数据如果不为空就必须是正确格式的电子邮箱地址。下面的代码显示了相关应用。

HTML

<form action="test.aspx">
    <p>
        <label for="email">电子邮箱</label>
        <input type="email" id="email" name="email" />
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

在email字段中，如果内容不为空又不是正确格式的电子邮箱地址会弹出提示信息，而且表单无法提交，如下图所示。

email字段

请注意，这里只是判断电子邮箱地址的基本格式，无法验证其有效性；实际应用中，可以通过发送邮件并提供验证码的方法验证邮箱的真实性和有效性。

number

input元素的type属性设置为number时会创建输入数值的字段，如下面的代码。

HTML

<form action="test.aspx">
    <p>
        <label for="num">数值</label>
        <input type="number" id="num" name="num" />
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

这里，number字段中无法输入非数值字符。此外，number字段还可以使用以下属性设置数值相关参数：

min，设置允许的最小值。
max，设置允许的最大值。
step，设置上、下按钮点击一次增加或减少的数值，默认值为1。

下面的代码演示了number字段与相关属性的应用。

HTML

<form action="test.aspx">
    <p>
        <label for="num">数值</label>
        <input type="number" id="num" name="num"
               min="0" max="100" step="5"/>
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

Chrome浏览器中显示的效果如下图所示。

number字段

range

input元素的type属性设置为range时显示为通过滑块选择数据的字段，可以通过min和max属性设置最小值和最大值，如下面的代码。

HTML

<form action="test.aspx">
    <p>
        <label for="num">数值</label>
        <input type="range" id="num" name="num"
               min="0" max="100" />
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

Chrome浏览器中显示的效果如下图所示。

range字段

搜索与候选列表

实际上，使用type属性为search的input元素，除了在输入内容后会显示一个X图标用于清除输入内容以外，其它用法与普通的text字段相同，它作为语义元素的意义可能更多一些。

在网站中经常会使用搜索功能，而现代化的搜索框都可以提供候选结果列表，在HTML5标准中，这个功能很容易实现，可以使用input元素结合datalist和option元素。下面的代码模拟了搜索框与候选列表的应用。

HTML

<form action="test.aspx">
    <p>
        <label for="keyword">查询内容</label>
        <input type="search" id="keyword" name="keyword" list="dlst1" />
        <datalist id="dlst1">
            <option>Tom</option>
            <option>Tim</option>
            <option>John</option>
            <option>Jimmy</option>
            <option>张三</option>
            <option>张山</option>
            <option>李四</option>
        </datalist>
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

代码中，input元素的type属性值设置为search，list属性指定datalist元素的id，本例为dlst1；接下来，使用datalist元素定义了候选数据列表元素，其中的列表项使用option元素定义。下图演示了搜索关键字的效果。

实现搜索框

本例使用普通的文本框也可以得到相同的效果，实际工作中，完整的搜索及候选功能还需要JavaScript代码和服务器端资源的支持，在后续的开发技术合集中会有更多讨论。

日期与时间

input元素的type属性还可以使用date、time、datetime、datetime-local属性值，但实际应用中，选择日期的功能会应用的更多一些，下面的代码演示了相关应用。

HTML

<form action="test.aspx">
    <p>
        <label for="date1">选择日期</label>
        <input type="date" id="date1" name="date1" />
    </p>
    <p>
        <input type="submit" value="提交表单" class="button1" />
    </p>
</form>

Chrome浏览器中的操作效果如下图所示。

选择日期

其他类型

HTML5标准中，input元素的type属性还可以设置为url和tel，分别用于输入URL地址和电话。实际应用中，文本格式的要求是多样化的，真正的数据验证规则需要根据应用功能和相关要求而定。下一章会讨论客户端的数据基本验证，其中会包含文本格式的验证方法；应注意，最终的数据验证需要在服务器端完成，只有完全符合要求的数据才能保存到数据库。