HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

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

<form action="demo_form.php" method="get">
<input type="number" name="points" min="" max="" step="" value=""> //数字框里默认值为6(value值)
<input type="submit">

使用下面的属性来规定对数字类型的限定:

属性 描述
disabled 规定输入字段是禁用的
max 规定允许的最大值
maxlength 规定输入字段的最大字符长度
min 规定允许的最小值
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必需的
size 规定输入字段中的可见字符数
step 规定输入字段的的合法数字间隔
value 规定输入字段的默认值

range类型

<input type="range" id="a" value="">

等效于

<input type="range" id="a" value="" min="0' max="">

Input的类型(type)的更多相关文章

  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  2. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  3. HTML5移动开发中的input输入框类型

    HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...

  4. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  5. [oldboy-django][2深入django]学生管理(Form)-- 编辑(设置input标签属性,设置input标签默认显示值,设置input的类型)

    1 django 后台实现设置input标签属性,设置input标签默认显示值,设置input输入框类型 # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及sub ...

  6. html5 input number类型使用整理

      一.  html5 input中的数字number类型, 只能输入整数,如果要输入浮点数呢,可以通过max.min和step去定义. type="number" 数字类型 mi ...

  7. select2取值报错,Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

    用到了 select2 组件来多选收件人,用搜狗浏览器(6.2版高速模式)在执行到如下这句时报错(Uncaught InvalidStateError: Failed to read the 'sel ...

  8. 限制Input输入类型的常见代码集合

    搜集整理常见的限制INPUT输入类型的实现方式: 1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g ...

  9. Matlab无法打开M文件的错误( Undefined function or method 'uiopen' for input arguments of type 'char)

    错误提示: Undefined function or method 'uiopen' for input arguments of type'char 解决方案: 运行命令 restoredefau ...

随机推荐

  1. WP8.1学习系列(第七章)——应用选项卡Pivot交互UX

    “应用选项卡”模式用于用户经常在中间导航的多个 UI 页面.如果你的应用基于单个主题(例如,电影.棒球等),该模式尤其有用.每页都将为用户显示与该应用呈现的整体数据相关的一些内容.“应用选项卡”模式可 ...

  2. 【Laravel5】 定制错误页面

    laravel5   所有异常错误都由类   App\Exceptions\Handler    处理,该类包含两个方法:   report   和   render . 这里我们只看 render  ...

  3. 使用 github Pages 服务建立个人独立博客全过程

    你是否有这样子的需求,只是想简单的写写文章,记录下自己的学习心得.成长经历等,都是些文字内容,不需要配置使用数据库.不想购买服务器自己搭建站点,只是想安安静静的用比较舒服的方式来写篇文章. 静态博客就 ...

  4. Github for Windows 登录时报代理问题?

    Github for Windows 登录时报如下错误: 不要被它的提示信息误导了. 登录失败,跟代理半毛钱关系都没有. 是 .net framework 组件 的问题. 更新下 .net frame ...

  5. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  6. 免费的Web服务

    这个网站包括和很多免费的Web服务,比如传说中的天气预报.手机号归属地.IP地址归属地.列车时刻表.邮箱验证.验证码图片生成.还有什么股票,基金 http://www.webxml.com.cn/zh ...

  7. Hive学习之Union和子查询

    Union的语法格式如下: select_statement UNION ALL select_statement UNION ALL select_statement ... Union用于将多个S ...

  8. LeetCode 16 3Sum Closest (最接近target的3个数之和)

    题目链接 https://leetcode.com/problems/3sum-closest/?tab=Description     Problem : 找到给定数组中a+b+c 最接近targe ...

  9. TFS Build做Web应用持续集成发布的一个技巧

    由于面向接口编程的关系,许多实现往往是动态注入运行,在一个项目中直接引用实现dll编译是不合理的.通常我们会在Post Build Event中添加一些xcopy命令将运行时才需要的dll复制到输出目 ...

  10. 不同.NET Framework版本下ASP.NET FormsAuthentication的兼容性

    假设站点A加密使用.NET Framework 2.0,站点B解密使用.NET Framework 4.0,除了保持MachineKey相同外还需要进行如下设置: 1.Web.config的<a ...