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绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP Pear 安装及使用
2009/03/19 PHP
php中常用的预定义变量小结
2012/05/09 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
js实现图片懒加载效果
2017/07/17 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
JS执行控制之节流模式实例分析
2018/12/21 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python random模块常用方法
2014/11/03 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
pycharm远程调试openstack代码
2017/11/21 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
彩妆大赛策划方案
2014/05/13 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
贷款承诺书
2015/01/20 职场文书
四风之害观后感
2015/06/09 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript