今天正式开始学习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类型和属性的更多相关文章

  1. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  2. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  3. HTML5中form的新增属性或元素

    1.新增的表单元素 1.1 progress表示任务的完成情况,常用于进度条. max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于 ...

  4. IT兄弟连 HTML5教程 介绍HTML5给你认识 习题

    1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2 ...

  5. 使用 HTML5 input 类型提升移动端输入体验

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  6. xampp搭建服务器环境、html5新的input类型

    怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...

  7. HTML5简介及HTML5的发展前景

    WEB技术发展越来越迅速,HTML5的到来更是把WEB技术推向了巅峰,目前HTML5技术已经日趋成熟,不仅在PC段,HTML5更是在移动终端上也有广泛的应用,HTML5的未来十分光明,值得我们去学习. ...

  8. html5 input的type属性启动数字输入法

    html5 input的type属性启动数字输入法   当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...

  9. 使用 HTML5 input 类型提升移动端输入体验(键盘)

    在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...

随机推荐

  1. oracle 在操作blob该字段是否会产生很多redo

    操作blob该字段是否会产生很多redo,答案是否定的.以下来做一个实验,測试数据库版本号是11.2.0.1.0: --创建一张表做測试之用 create table test_blob (   id ...

  2. 15个最好的HTML5前端响应式框架(2014)

    文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...

  3. 数据结构——bitmap

    近期在看<编程珠玑>这本书. 第1章中引入了bitmap(位图)的数据结构. 曾经没有接触过, 抽出时间研究了一下,记录下来. 书中描写叙述的情景: 1. 最多1000万个7位数电话号码( ...

  4. 7.数据本地化CCString,CCArray,CCDictionary,tinyxml2,写入UserDefault.xml文件,操作xml,解析xml

     数据本地化 A CCUserDefault 系统会在默认路径cocos2d-x-2.2.3\projects\Hello\proj.win32\Debug.win32下生成一个名为UserDef ...

  5. zoj 2822 Sum of Different Primes (01背包)

    ///给你n 求他能分解成多少个的不同的k个素数相加之和 ///01背包,素数打表 # include <stdio.h> # include <algorithm> # in ...

  6. mysql相关日志汇总

    日志作为重要的查询问题的手段.所以尽量记录上自己须要的日志.以供自己查询一些问题. MySQL有下面几种日志: 错误日志: -log-err 查询日志: -log 慢查询日志: -log-slow-q ...

  7. cocos2d-x 消类游戏,类似Diamond dash 设计

    前几天刚刚在学习cocos2d-x,无聊之下自己做了一个类似Diamond dash的消类游戏,今天放到网上来和大家分享一下.我相信Diamond dash这个游戏大家都玩过,游戏的规则是这样的,有一 ...

  8. c++野指针 之 实战篇

    一:今天做poj上的3750那个题,用到了list的erase方法.提交之后总是报runtime error! 纠结了好长时间.曾有一度怀疑过vector的erase和list的erase处理方式不一 ...

  9. docker 的安装

    官方站点上有各种环境下的 安装指南,这里主要介绍下Ubuntu和CentOS系列的安装. Ubuntu 系列安装 Docker 通过系统自带包安装 Ubuntu 14.04 版本号系统中已经自带了 D ...

  10. 怎样在C++中获得完整的类型名称

    Wrote by mutouyun. (http://darkc.at/cxx-get-the-name-of-the-given-type/) 地球人都知道C++里有一个typeid操作符能够用来获 ...