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. 微信小程序拒绝授权,反复调起原生授权框。

    最近堕落了,有一阵子没有更新博客园了.一是比较忙,其次也没什么好的题材和工作中的解决方案可以分享的,想想还是把罕见的反复调起原生小程序授权框的方案拿出来说说.   市面上常见的解决方案是第一次拒绝后, ...

  2. web后台工作流程

    浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF.image及其他格式.用户用URI(Uniform Reso ...

  3. CSS效果:焦点图片

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  4. FCC JS基础算法题(5):Return Largest Numbers in Arrays(找出多个数组中的最大数)

    题目描述: 找出多个数组中的最大数右边大数组中包含了4个小数组,分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新数组.提示:你可以用for循环来迭代数组,并通过arr[i]的方式来访问数组 ...

  5. 再见了,我最爱的OI~~~

    唔,迟到了三个月的感言呢. 我就这样离开OI了,成为了一个退役的OIer,当年高一的时候还觉得自己有很多时间,没想转眼间自己就退役了.呵呵,来到OI 从没有在这个世界带起一丝风浪,也没有拿到一个满意的 ...

  6. 部署Qt应用时候报错0xc000007b

    情况: 在开发环境可以运行,部署到其他电脑无法运行: 排错:百度.谷歌了很多方法不行,后来发现添加了Qt\5.11.0\mingw53_32\bin环境变量,程序执行正常,去掉就报错:猜测估计是dll ...

  7. Python学习之路并发编程--信号量、事件、队列及生产消费模型

    1. 信号量 对于多进程来说,多个进程同时修改数据,就可能出现安全隐患,所以引入了锁,这一机制,但锁只能有一把来控制一个的开关,当你需要几把锁的时候,就可能用到信号量的概念.他是用了锁的原理,内置了一 ...

  8. 重写外部图片URL,变成自己的URL

     1.获取原图链接 上传一张图片文件到淘图,得到以下链接: https://img.alicdn.com/imgextra/i4/358272220/TB2hCqxmB8lpuFjSspaXXXJKp ...

  9. CSS制作环形进度条

    参考来源 <Radial progress indicator using CSS>,该文核心是用纯CSS来做一个环形的进度条.纯css的意思就是连百分比这种数字,都是css生成的.文章作 ...

  10. Vue2.5学习路线及基础知识总结。

    在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...