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. Labview多列列表框

    前面板创建多列列表框 如何写入数据: 右键  创建属性节点  项名  创建属性节点  项符号 创造自定义项符号:  右键 创建调用节点  自定义项符号 设置为自定义符号 然后添加索引号 利用图片与声音 ...

  2. div不固定高度垂直居中

    父容器的css属性 display:table;overflow:hidden;子容器的css属性 vertical-align:middle;display:table-cell; <!DOC ...

  3. Spring 基于构造函数的依赖注入

    基于构造函数依赖注入 sprig通过bean创建对象时,会通过bean提供的参数来选择调用某个构造函数.上例中, <constructor-arg ref="spellChecker& ...

  4. Java前后端依赖

    有时候我们的一个类需要依赖另外一个类,这种就是依赖关系,创建对象的工作一般由spring容器来完成然后注入给调用者,这种就是依赖注入. 代码可参考1227210565朋友空间 DispatcherSe ...

  5. AI五子棋第四周——接近尾声

    欢乐时光过得特别快~ 真是快乐的一周,就是项目进展几乎纹丝不动. 燃尽图?? (添加了背景音乐,找到了一个很好的音乐素材网站!) (添加了俩图标:重开,和音乐.) (调了一下前后端通讯,基本能通话了, ...

  6. 手动清除mac的广告弹框病毒 MacOSDefender

    最近在浏览亚马逊, 京东的时候, 发现会自动弹出很多广告到浏览器, 其实是中了病毒MacOSDefender. 这个病毒非常烦人, 会在你浏览电商网页的时候拼命的打开广告页面, 而且还会弹出一些提示, ...

  7. JMeter在linux服务器上使用

    环境部署: 1.在Linux服务器先安装jdk:此步骤省略,可参考百度经验:https://jingyan.baidu.com/article/6b18230980c294ba59e15967.htm ...

  8. Java中如何拆分字符串为字符数组

    题目:输入一串字符,由(){}[]组成,判断是否所有的括号都是闭括号,是的返回TRUE,不是返回FALSE. /*输入字符串,拆解为字符数组 * 用函数s.charAt(i)来完成 * * */imp ...

  9. 【转】Cookie/Session机制详解

    Cookie/Session机制详解   会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息 ...

  10. [WC2006]水管局长

    原题链接 前言 搞不懂为什么要写LCT,搞不懂为什么要加强数据.像这道题是用父亲表示法来做的.虽然复杂度不是log,但是现在下面这份代码却是无论从空间,还是代码量,还是时间都是优秀不止一点. 而且这样 ...