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 透明色 RGBA使用介绍
Aug 06 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 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
php zend解密软件绿色版测试可用
2008/04/14 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
react学习笔记之state以及setState的使用
2017/12/07 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python的标准模块包json详解
2017/03/13 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python 识别图片中的文字信息方法
2018/05/10 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python实现IOU计算案例
2020/04/12 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
.net笔试题
2014/03/03 面试题
经典婚礼主持开场白
2014/03/13 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python