HTML5新增的8类INPUT输入类型介绍


Posted in HTML / CSS onJuly 06, 2015

已经有的输入类型 HTML代码示例:

复制代码
代码如下:

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">
   
在HTML5中,增加了多个新的表单input输入类型,通过使用这些新增元素,可以实现更好的输入控制和验证。
1、email类型的应用
email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证email输入框的值。
复制代码
代码如下:

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

2、url类型的应用
url类型的input元素提供用于输入url地址这类特殊文本的文本框。

复制代码
代码如下:

<input type="url" name="user_url" />

3、number类型的应用
number类型的input元素提供用于输入数值的文本框。

复制代码
代码如下:

<input type="number" name="number1" min="1" max="20" step="4" />

4、range类型的应用
range类型的input元素提供用于输入包含一定范围内数字值得文本框,在网页中显示为滚动条。

复制代码
代码如下:

<input type="range" name="range1" min="1" max="30" />

5、日期检出类型的应用
输入类型 HTML代码  功能说明

复制代码
代码如下:

date <input type="date">

选取日、月、年
month <input type="month">
选取月、年
复制代码
代码如下:

week <input type="week">

选取周和年
复制代码
代码如下:

time <input type="time">

选取时间(小时和分钟)
复制代码
代码如下:

datetime <input type="datetime">

选取时间、日、月、年(UTC时间)
复制代码
代码如下:

datetime-local
<input type="datetime-local"> 选取时间、日、月、年(本地时间)

6、search类型的应用

search类型的input元素提供用于输入搜索关键词的文本框。

复制代码
代码如下:

<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}

7、tel类型的应用
tel类型的input元素提供专门用于输入电话号码的文本框。

复制代码
代码如下:

<input type="tel" name="tel" />

8、color类型的应用
color类型的input元素提供专门用于设置颜色的文本框。

复制代码
代码如下:

<input type="color" name="color" />
HTML / CSS 相关文章推荐
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 #HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 #HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 #HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 #HTML / CSS
带你认识HTML5中的WebSocket
May 22 #HTML / CSS
用HTML5制作视频拼图的教程
May 13 #HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 #HTML / CSS
You might like
77A一级收信机修理记
2021/03/02 无线电
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Using the TextRange Object
2006/10/14 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python的类方法和静态方法
2014/12/13 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
Flask处理Web表单的实现方法
2021/01/31 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
J2EE相关知识面试题
2013/08/26 面试题
电子信息毕业生自荐信
2013/11/16 职场文书
抄作业检讨书
2014/02/17 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript