今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性。

这些代码是在猎豹浏览器下实现的。

html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color

email:提交时会自动验证输入的内容是否满足格式

  1. 邮箱 :<input type="email" name="user_email"/>

url:提交时会自动验证输入内容是否为url

  1. url: <input type="url" name="user_url"/>

number:用于输入数字,其中min为最小值,max为最大值,step为点击箭头是数字的变化量,value为默认值,min,max,step,value均可不写

  1. 年龄:<input type="number" name="user_age" min="18" max="120" step="1" value="20"/>

range:用于应该包含一定范围内数字值的输入域,显示为滑动条

  1. 比例:<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的截图

  1. 时间:<input type="datetime-local" name="user_date"/>

datalist:相当于下拉列表,有自动补充功能

  1. 网址: <input type="url" list="url_list" name="link" required /> <!-- 自动补充 -->
  2. <datalist id="url_list">
  3. <option label="web1" value="http://www.web1.com.cn" />
  4. <option label="web2" value="http://www.web2.com" />
  5. <option label="web3" value="http://www.web3.com" />
  6. </datalist>

color:颜色选择器

  1. 颜色:<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. Centos 7 学习之静态IP设置

    原文链接:http://blog.csdn.net/johnnycode/article/details/40624403 本学习主要针对 Centos 7.0.1406 版本进行学习整理! 如果你使 ...

  2. HDU1176:免费馅饼(DP)

    Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼别处都不掉,就掉落在他身旁 ...

  3. c++windows内核编程笔记day12 硬盘逻辑分区管理、文件管理、内存管理

    windows系统磁盘文件存储: 分区格式:NTFS / FAT32 GetSystemDirectory();//获取系统路径 GetWindowsDirectory();//获取windows路径 ...

  4. 使用独立PID namespace防止误杀进程

    一段错误的代码 首先看一段错误的代码: #!/bin/bash SLICE=100; slppid=1; pidfile=/var/run/vpnrulematch.pid # 停止之前的sleep ...

  5. 定义自己的布局RelativeLayout 绘制网格线

    在Android画线必须由一个载体,无论是控制,无论是布局.实际上它们是从继承View.由画线的方式自己的控制或布局的定义是最常见的. 以下是在其定义中的小样本实现RelativeLayout绘制网络 ...

  6. MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白

    MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVVAxOT ...

  7. 正则匹配去掉字符串中的html标签

    1.得到超链接中的链接地址: string matchString = @"<a[^>]+href=\s*(?:'(?<href>[^']+)'|"&quo ...

  8. Eclipse设置的断点失效的解决办法

    使用Eclipse的同胞们,如果你哪天惊奇的发现调试时,明明设置了断点,按道理就是要执行设置断点的那条语句的,可是偏偏Eclipse视你设置的断点不见,不要害怕,不要恐慌,这样的问题不应该导致偶们疯狂 ...

  9. ACM-简单题之Least Common Multiple——hdu1019

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  10. Struts2 开发环境搭建

    一.开发环境 eclipse+tomcat+struts-2.2.3        eclipse下载地址:http://www.eclipse.org/downloads/        tomca ...