Input 类型: color(拾色器)

color 类型用在input字段主要用于选取颜色,如下所示:

支持浏览器

实例

从拾色器中选择一个颜色:

选择你喜欢的颜色: <input type="color" name="favcolor">
 
 

Input 类型: date(日期选择器)

date 类型允许你从一个日期选择器选择一个日期。

支持浏览器

实例

定义一个时间控制器:

生日: <input type="date" name="bday">
 
 

Input 类型: email(邮件)

email 类型用于应该包含 e-mail 地址的输入域。

支持浏览器

实例

在提交表单时,会自动验证 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

提示: iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。

Input 类型: number(数量选择框)

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

支持浏览器

实例

定义一个数值输入域(限定):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

HTML5 新的 Input 类型的更多相关文章

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

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

  2. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

  3. HTML5——拖放 地理定位 视频 音频 新的input类型

    拖放 ————>   设置元素为可拖放 拖动什么 放到何处 进行放置 实例[来回拖放] 地理定位 使用地理定位 处理错误和拒绝 在地图中显示结果 基于脚本的交互式地图 给定位置的信息 用户移动时 ...

  4. 案例-html5新标签-input和video

    <form action=""> <fieldset> <!--fieldset标签:可将表单内的元素分组 ,常与legend搭配使用--> & ...

  5. HTML/HTML5 Input类型&&表单

    1.HTML 中"不常用"input类型中的属性值: disabled:输入字段禁用: maxlength:输入字段的最大字符长度: readonly:输入字符只读,无法修改: s ...

  6. Html5学习进阶三 Input 类型

    HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range Date ...

  7. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  8. 检测浏览器对HTML5新input类型的支持

    HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...

  9. 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

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

随机推荐

  1. 虚拟机中ubuntu不能联网问题的解决——NAT方式

    困惑我多时的Ubuntu联网问题终于解决啦,开心!!!现记录如下,方便日后取用. 可先直接尝试第3步,若不行,则走完全程. 1.查看/设置下NAT的网络 打开VMware Workstation, 点 ...

  2. Python帮助

    我们可以很容易的通过Python解释器获取帮助.如果想知道一个对象(object)更多的信息,那么可以调用help(object)!另外还有一些有用的方法,dir(object)会显示该对象的大部分相 ...

  3. Microsoft宣布为Power BI提供AI模型构建器,关键驱动程序分析和Azure机器学习集成

    微软的Power BI现在是一种正在大量结合人工智能(AI)的商业分析服务,它使用户无需编码经验或深厚的技术专长就能够创建报告,仪表板等.近日西雅图公司宣布推出几款新的AI功能,包括图像识别和文本分析 ...

  4. mysql数据库的增量备份和全备

    还有一种简单的方法 参考 https://blog.csdn.net/u010098331/article/details/50932064 (注意:5.6版本以上新加了gtid 功能,gtid开启之 ...

  5. ES5数组、对象常用方法总结

    数组方法: Array.isArray(items);判断判断一个变量是否包含数组数据: forEach(function(value, index, fullArray){ }); every(fu ...

  6. Python学习之路基础篇--06Python基础+dict的学习

    字典和列表其实差不多,所说3.6 之前的版本字典是没有顺序的.是Python中唯一的映射数据类型,key 是可哈希(不可变数据类型),如元组.bool.int 和 str:value 是任意数据类型. ...

  7. zznuoj 1540 : 直线与圆

    题目描述 给出一个圆的圆心坐标与圆的半径,和一条直线上的两点坐标,求这条直线与圆有多少个交点. 输入 输入3个实数x,y,r值分别表示圆心坐标与圆的半径,输入4个实数x1,y1,x2,y2表示直线上的 ...

  8. .net core+Spring Cloud学习之路 一

    文章开头唠叨两句. 2019年了,而自己参加工作也两年有余了,用一个词来概括这两年多的生活,就是:“碌碌无为”. 也不能说一点收获都没有,但是很少.2019来了,我立志要打破现状,改变自己,突破自我. ...

  9. opencv+qt+vtk,编程时报错'detail':ambiguous symbol

    解决办法: 把#include <vtkSmartPointer.h>放到所有头文件的最前面:

  10. bootstrap研究感想1

    我—>新人,特纯的新人,受到方大神的建议,开始写博客,写一些工作时敲代码时的感受,学习模仿大神时的感悟. -------------------------------------------- ...