HTML5表单的新Input类型

新Input类型

1、新的输入类型
新Input类型介绍
序号 输入类型 描述
1 <input type="email"> 应该包含e-mail 地址的输入域
2 <input type="url"> 网站文本框
3 <input type="search"> 查询文本框
4 <input type="number"> 数字文本框
5 <input type="range"> 滑动条
6 <input type="color"> 颜色文本框
7 <input type="date"> 选取日、月、年
8 <input type="month"> 选取月、年
9 <input type="week"> 选取周和年
10 <input type="time"> 选取时间(小时和分钟)
11 <input type="datetime"> 选取时间、日、月、年(UTC 时间)
12 <input type="datetime-local"> 选取时间、日、月、年(本地时间

2.新Input类型实例

email类型用于应该包含e-mail地址的输入域,在提交表单时,会自动验证email域的值。

<input type="email" name="user_email" />

url类型的input元素是一种专门用来输入url地址的文本框,你输入一个不是URL的字符串,他会在前面自动补充上http://。

<input type="url" placeholder="请输入网址"/>

Search类型的input元素是一种专门用来输入搜索关键词的文本框的文本框

<input type="search" autocomplete="on"/>

number 类型用于应该包含数值的输入域,还能够设定对所接受的数字的限定:

<input type="number" name="points" min="10" max="100"/>

range 类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条

<input type="range" max="9" min="0" step="2" />

color类型的input元素用来选取颜色,它提供了一个颜色选取器。

<input type="color" value="#ff00ff"/>

date类型对的input元素用来从日历中选取一个日期

<input type="date" />

©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持:淮阴工学院计算机与软件工程学院《Web开发技术》教学团队