玩转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下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
随机推荐
- oracle 在操作blob该字段是否会产生很多redo
操作blob该字段是否会产生很多redo,答案是否定的.以下来做一个实验,測试数据库版本号是11.2.0.1.0: --创建一张表做測试之用 create table test_blob ( id ...
- 15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
- 数据结构——bitmap
近期在看<编程珠玑>这本书. 第1章中引入了bitmap(位图)的数据结构. 曾经没有接触过, 抽出时间研究了一下,记录下来. 书中描写叙述的情景: 1. 最多1000万个7位数电话号码( ...
- 7.数据本地化CCString,CCArray,CCDictionary,tinyxml2,写入UserDefault.xml文件,操作xml,解析xml
数据本地化 A CCUserDefault 系统会在默认路径cocos2d-x-2.2.3\projects\Hello\proj.win32\Debug.win32下生成一个名为UserDef ...
- zoj 2822 Sum of Different Primes (01背包)
///给你n 求他能分解成多少个的不同的k个素数相加之和 ///01背包,素数打表 # include <stdio.h> # include <algorithm> # in ...
- mysql相关日志汇总
日志作为重要的查询问题的手段.所以尽量记录上自己须要的日志.以供自己查询一些问题. MySQL有下面几种日志: 错误日志: -log-err 查询日志: -log 慢查询日志: -log-slow-q ...
- cocos2d-x 消类游戏,类似Diamond dash 设计
前几天刚刚在学习cocos2d-x,无聊之下自己做了一个类似Diamond dash的消类游戏,今天放到网上来和大家分享一下.我相信Diamond dash这个游戏大家都玩过,游戏的规则是这样的,有一 ...
- c++野指针 之 实战篇
一:今天做poj上的3750那个题,用到了list的erase方法.提交之后总是报runtime error! 纠结了好长时间.曾有一度怀疑过vector的erase和list的erase处理方式不一 ...
- docker 的安装
官方站点上有各种环境下的 安装指南,这里主要介绍下Ubuntu和CentOS系列的安装. Ubuntu 系列安装 Docker 通过系统自带包安装 Ubuntu 14.04 版本号系统中已经自带了 D ...
- 怎样在C++中获得完整的类型名称
Wrote by mutouyun. (http://darkc.at/cxx-get-the-name-of-the-given-type/) 地球人都知道C++里有一个typeid操作符能够用来获 ...