〖大前端 - 基础入门三大核心之 html 篇⑮〗- HTML5新增的表单控件

文章介绍了HTML5中新增的多种input类型，包括color、date、time等，强调了它们的兼容性和在不同设备上的表现。此外，还详细讲解了<datalist>控件如何为输入框提供预设选项，实现智能感应功能。

说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
福利：加入社区的小伙伴们，除了可以获取博主所有付费专栏的阅读权限之外，还有机会加入星荐官共赢计划，详情请戳我。
当前子专栏基础入门三大核心篇也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。

作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能共赢”推动共建技术人成长共同体。

🏆 白宝书系列
🏅 Python全栈白宝书
🏅 产品思维训练白宝书
🏅 全域运营实战白宝书
🏅 大前端全栈架构白宝书

前面学过的基本控件是HTML4和HTML5都支持的控件，所以兼容性也很好。下面我们来介绍HTML5新增的表单控件。

⭐️HTML新增的表单控件

🌟HTML5更丰富的input种类

先来看HTML5新增了哪些input种类：

type属性值	控件
color	颜色选择控件
data、time	日期、时间选择控件
email	电子邮件输入控件
file	文本选择控件
number	数字输入控件
range	拖曳条
search	搜索框
url	网址输入控件

这些控件可以兼容到IE9。并且手机端的兼容也很好。不同的浏览器展示的样子稍有不同，但是作用是一样的。

下面直接看例子：

示例代码：

<form>
    <p>
        颜色选择控件：
        <input type="color">
    </p>
    <p>
        日期控件：
        <input type="date" required>
    </p>
    <p>
        时间控件：
        <input type="time">
    </p>
    <p>
        电子邮件输入控件：
        <input type="email" required>
    </p>
    <p>
        文本选择控件：
        <input type="file" required>
    </p>
    <p>
        数字输入控件：
        <input type="number">
    </p>
    <p>
        拖曳条：
        <input type="range" min="10" max="20">
    </p>
    <p>
        搜索框：
        <input type="search">
    </p>
    <p>
        url:
        <input type="url">
    </p>
</form>

上面的电子邮件输入控件看起来和普通的单行文本框差不多，其实是有区别的，随便输入几个字符，点击提交按钮就可以看出差别：

url控件也一样，提交的时候会校验填写的内容的格式，所以需要输入正确的网址格式才可以校验通过（如http://www.baidu.com）。

<input>标签中的required属性

required属性代表此项为必填项，提交表单前必须填写，否则不能提交表单。

🌟"datalist" 控件

<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。

<datalist>控件可以结合<input>标签的list属性来使用。

下面直接看例子：

示例代码：

<form>
    <p>
        智能感应控件:
        <input type="text" list="province-list">
        <datalist id="province-list">
            <option value="河北">
            <option value="河南">
            <option value="山西">
            <option value="广西">
            <option value="广东">
            <option value="山东"> 
        </datalist>
    </p>
</form>