首页 > web前端 > 前端问答 > HTML5中新增了哪些input控件类型

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

青灯夜游
发布: 2022-05-30 15:34:31
原创
7022 人浏览过

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

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

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

标签规定了用户可以在其中输入数据的输入字段,该元素在

元素中使用,用来声明允许用户输入数据的 input 控件。

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

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 控件(不带时区)。

下面介绍类型:

  • color

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

  • number
    这里写图片描述
    输入范围内的数字,可以手动输入超出范围的数字,但不能提交

  • tel
    输入电话号码,只有safari支持

  • email
    自带检测功能,提交时会检测是否包含@符,并且@符前后是否有字符

  • range
    这里写图片描述

  • url
    输入的网址必须是http://开头,并且后面必须有字符,否则不能提交

  • search

    定义用于输入搜索字符串的文本字段

  • 日期控件 - date

1.png

<input type="date" value="2021-01-17"/>
登录后复制
  • 时间控件 - time

2.png

2-2.png

<input type="time" value="13:59"/>
<input type="time" value="13:59:59"/>
登录后复制
  • 日期时间控件 - datetime-local

3.png

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

4.png

<input type="month" value="2021-01"/>
登录后复制
  • 周控件 - week

5.png

<input type="week" value="2022-W02"/>
登录后复制
  • 日期时间控件--datetime

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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板