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. js循环出相同name,不同id的按钮,对其进行点击回复操作

    function getseat(){ var option= "<button class='btn'style='margin:5px;' onclick='onclickSeat ...

  2. pypi镜像源加速第三方库在线安装

    使用pypi镜像源加速第三方库在线安装 用easy_install和pip来安装第三方库很方便 它们的原理其实就是从Python的官方源pypi.python.org/pypi 下载到本地,然后解包安 ...

  3. 显示react配置

    1. 由于react默认隐藏webpack配置需要手动显示. npm run eject //Are you sure you want to eject? This action is perman ...

  4. DG Switch over

    DG切换迁移Switch over切换文档 本篇文档,整体结构:1.切换前检查确认2.DG切换角色操作3.切换后检查确认 目录:一.切换前检查确认1.数据库版本2.DG架构,IP信息及切换角色前后3. ...

  5. 【EMV L2】Application Usage Control

    [Application Usage Control] Tag9F07,卡片数据,2bytes: Indicates issuer’s specified restrictions on the ge ...

  6. 垃圾回收(GC Garbage collection)

    JS有自动垃圾清理机制, 如果有不需要用的对象,只需要设置对象=null即可 Var a = new object() a = null

  7. struts1和struts2和springMVC的区别和介绍

    MVC是web开发常用的模式,M即模型层(Model):主要由javabean来实现.V即视图层(View):主要由jsp.velocity.freemarker等.C即控制层(Controller) ...

  8. python学习1---列表、矩阵、数组

    1.列表与数组区别 numpy数组的所有元素类型是相同的,而列表的元素类型是任意的. 2.numpy数组与矩阵区别 矩阵必须是二维的,数组可以是多维的,matrix是array的一个分支. matri ...

  9. Python全栈之路----常用模块----软件开发目录规范

    目录基本内容 log  #日志目录 conf  #配置目录 core/luffycity  #程序核心代码目录  #luffycity 是项目名,建议用小写 libs/modules  #内置模块 d ...

  10. html中头meta信息

    一.页面关键字 网站关键字:用户通过搜索引擎能搜到该网站的词汇.最好控制在10个以内. 基本语法: <meta name="keywords" content="具 ...