html5表单类型 表单有哪些html5新控件

---

---

文章目录

• ⭐️HTML新增的表单控件

• 🌟HTML5更丰富的input种类
• 🌟"datalist" 控件

前面学过的基本控件是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>

---

---