玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性。
这些代码是在猎豹浏览器下实现的。
html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color
email:提交时会自动验证输入的内容是否满足格式
- 邮箱 :<input type="email" name="user_email"/>
url:提交时会自动验证输入内容是否为url
- url: <input type="url" name="user_url"/>
number:用于输入数字,其中min为最小值,max为最大值,step为点击箭头是数字的变化量,value为默认值,min,max,step,value均可不写
- 年龄:<input type="number" name="user_age" min="18" max="120" step="1" value="20"/>
range:用于应该包含一定范围内数字值的输入域,显示为滑动条
- 比例:<input type="range" name="user_range" min="10" max="100"/></br>
date pickers:有date,month,week,time,datetime,datetime-local这几种类型,
date--选取年月日,month---选取年月,week---选取年周,time--选取小时和分钟,datetime--选取年月日时间,datetime-local--选取本地时间
这里给一个datetime-local的截图
- 时间:<input type="datetime-local" name="user_date"/>
datalist:相当于下拉列表,有自动补充功能
- 网址: <input type="url" list="url_list" name="link" required /> <!-- 自动补充 -->
- <datalist id="url_list">
- <option label="web1" value="http://www.web1.com.cn" />
- <option label="web2" value="http://www.web2.com" />
- <option label="web3" value="http://www.web3.com" />
- </datalist>
color:颜色选择器
- 颜色:<input type="color"/>
还有两个类型是telephone和search,由于我使用时看不出效果来,就不在这里写了,大家自己试试。
玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性的更多相关文章
- 使用MUI的日期控件引起的探索——HTML5 input类型date属性
我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- HTML5中form的新增属性或元素
1.新增的表单元素 1.1 progress表示任务的完成情况,常用于进度条. max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于 ...
- IT兄弟连 HTML5教程 介绍HTML5给你认识 习题
1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2 ...
- 使用 HTML5 input 类型提升移动端输入体验
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- xampp搭建服务器环境、html5新的input类型
怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...
- HTML5简介及HTML5的发展前景
WEB技术发展越来越迅速,HTML5的到来更是把WEB技术推向了巅峰,目前HTML5技术已经日趋成熟,不仅在PC段,HTML5更是在移动终端上也有广泛的应用,HTML5的未来十分光明,值得我们去学习. ...
- html5 input的type属性启动数字输入法
html5 input的type属性启动数字输入法 当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
随机推荐
- Centos 7 学习之静态IP设置
原文链接:http://blog.csdn.net/johnnycode/article/details/40624403 本学习主要针对 Centos 7.0.1406 版本进行学习整理! 如果你使 ...
- HDU1176:免费馅饼(DP)
Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁 ...
- c++windows内核编程笔记day12 硬盘逻辑分区管理、文件管理、内存管理
windows系统磁盘文件存储: 分区格式:NTFS / FAT32 GetSystemDirectory();//获取系统路径 GetWindowsDirectory();//获取windows路径 ...
- 使用独立PID namespace防止误杀进程
一段错误的代码 首先看一段错误的代码: #!/bin/bash SLICE=100; slppid=1; pidfile=/var/run/vpnrulematch.pid # 停止之前的sleep ...
- 定义自己的布局RelativeLayout
绘制网格线
在Android画线必须由一个载体,无论是控制,无论是布局.实际上它们是从继承View.由画线的方式自己的控制或布局的定义是最常见的. 以下是在其定义中的小样本实现RelativeLayout绘制网络 ...
- MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白
MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVVAxOT ...
- 正则匹配去掉字符串中的html标签
1.得到超链接中的链接地址: string matchString = @"<a[^>]+href=\s*(?:'(?<href>[^']+)'|"&quo ...
- Eclipse设置的断点失效的解决办法
使用Eclipse的同胞们,如果你哪天惊奇的发现调试时,明明设置了断点,按道理就是要执行设置断点的那条语句的,可是偏偏Eclipse视你设置的断点不见,不要害怕,不要恐慌,这样的问题不应该导致偶们疯狂 ...
- ACM-简单题之Least Common Multiple——hdu1019
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- Struts2 开发环境搭建
一.开发环境 eclipse+tomcat+struts-2.2.3 eclipse下载地址:http://www.eclipse.org/downloads/ tomca ...