HTML5中新增了哪些input控件类型

133 阅读 0 评论 88 点赞

我是靠谱客的博主傻傻银耳汤，最近开发中收集的这篇文章主要介绍HTML5中新增了哪些input控件类型，觉得挺不错的，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

<input> 标签规定了用户可以在其中输入数据的输入字段，该元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

type 属性规定要显示的 <input> 元素的类型。

HTML5中新增的input控件类型（type 属性值）

值	描述
color	定义拾色器。
date	定义 date 控件（包括年、月、日，不包括时间）。
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email	定义用于 e-mail 地址的字段。
month	定义 month 和 year 控件（不带时区）。
number	定义用于输入数字的字段。
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
search	定义用于输入搜索字符串的文本字段。
tel	定义用于输入电话号码的字段。
time	定义用于输入时间的控件（不带时区）。
url	定义用于输入 URL 的字段。
week	定义 week 和 year 控件（不带时区）。

下面介绍类型：

这里写图片描述
点击时弹出颜色选择器，可以选择任意颜色

<input type="date" value="2021-01-17"/>
登录后复制

<input type="time" value="13:59"/>
<input type="time" value="13:59:59"/>
登录后复制

<input type="datetime-local" value="2021-01-17T13:59:59"/>
登录后复制

<input type="month" value="2021-01"/>
登录后复制

<input type="week" value="2022-W02"/>
登录后复制

<input type="datetime" value="2022-01-17T13:59:59"/>
登录后复制

说明：日期时间控件也支持min和max属性，表示可设置的最小和最大时间

<input type="date" value="2022-01-17" min="2022-01-16" max="2015-01-26"/>
登录后复制

以上就是傻傻银耳汤为你收集整理的HTML5中新增了哪些input控件类型的全部内容，希望文章能够帮你解决HTML5中新增了哪些input控件类型所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。