〖大前端 - 基础入门三大核心之 html 篇⑮〗- HTML5新增的表单控件
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利：加入社区的小伙伴们，除了可以获取博主所有付费专栏的阅读权限之外，还有机会加入 星荐官共赢计划 ，详情请戳我 。
- 当前子专栏 基础入门三大核心篇 也是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益。
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
- 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
- 🏅 Python全栈白宝书
- 🏅 产品思维训练白宝书
- 🏅 全域运营实战白宝书
- 🏅 大前端全栈架构白宝书
文章目录
- ⭐️HTML新增的表单控件
- 🌟HTML5更丰富的input种类
- 🌟"datalist" 控件
前面学过的基本控件是HTML4和HTML5都支持的控件，所以兼容性也很好。下面我们来介绍HTML5新增的表单控件。
⭐️HTML新增的表单控件
🌟HTML5更丰富的input种类
先来看HTML5新增了哪些input种类：
| type属性值 | 控件 |
|---|---|
| color | 颜色选择控件 |
| data、time | 日期、时间选择控件 |
| 电子邮件输入控件 | |
| 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）。
标签中的required属性
required属性代表此项为必填项，提交表单前必须填写，否则不能提交表单。
🌟"datalist" 控件
控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。
控件可以结合标签的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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！