• 技术文章 >web前端 >前端问答

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

    青灯夜游青灯夜游2022-05-30 15:34:31原创102

    新增13个类型:1、color,拾色器控件;2、date,日期控件,包括年月日,但不包括时间;3、tel,电话号码控件;4、time,时间控件(不带时区);5、“datetime-local”,日期时间控件;6、search,搜索控件等等。

    本教程操作环境: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 控件(不带时区)。

    下面介绍类型:

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

    1.png

    <input type="date" value="2021-01-17"/>

    2.png

    2-2.png

    <input type="time" value="13:59"/>
    <input type="time" value="13:59:59"/>

    3.png

    <input type="datetime-local" value="2021-01-17T13:59:59"/>

    4.png

    <input type="month" value="2021-01"/>

    5.png

    <input type="week" value="2022-W02"/>

    6.png

    <input type="datetime" value="2022-01-17T13:59:59"/>

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

    7.png

    <input type="date" value="2022-01-17" min="2022-01-16" max="2015-01-26"/>

    相关推荐:《html视频教程

    以上就是HTML5中新增了哪些input控件类型的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5 html
    上一篇:jquery怎么实现元素遍历 下一篇:acronym标签html5还支持吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• html5的svg是什么• html5中新增加的表单元素有哪些• html5元素的分类有哪些• html5的div一行可以放两个吗• html5中列表和表格的区别是什么• figure是html5的新增标签吗
    1/1

    PHP中文网