① url类型

url类型的input元素是一种专门用来输入URL地址的文本框。提交时如果该文本框中的内容不是URL地址格式的文字,则不允许提交。

非url提交时Firefox、Chrome 提示错误,Opera自动将url框中值转化为url格式,ie9和safari不支持,正常提交

② email类型

email类型的input元素是一种专门用来输入email的文本框。提交时如果该文本框中的内容不是email地址格式的文字则不允许提交,但是它并不检查email地址是否存在,提交时该文本框可以为空,除非加上了 属性。

email类型的文本框具有一个 multiple 属性——它允许在该文本框中输入一串以逗号分割的email地址。当然并不强制要求用户输入该email地址列表。

Firefox、Chrome、Opera 非email提交时提示错误,支持required,ie9和safari不支持,正常提交

③ date类型

date类型的input元素是深受开发者喜爱的一种元素我们也经常看到网页中要求我们输入的各种各样的日期,例如生日、购买日期、订票日期等。date类型的input元素以日历的形式方便用户输入。当该文本框获取焦点时,显示日历,可以在日历总选择日期进行输入。

Opera点击弹出一个日历下拉框,但不允许手动输入。Chrome、Safari表现一致,但Safari在提交时没有验证,在输入框右侧有上下两个按钮,点击加减天,Firefox、ie9不支持

④ time类型

time类型的input元素是一种专门用来输入时间的文本框,并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器。

Opera类似系统的时间设置框。Chrome、Safari表现一致,但Safari在提交时没有验证,在输入框右侧有上下两个按钮,点击加减分钟,Firefox、ie9不支持

⑤ datetime类型

datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效性检查。

Opera支持的最好,很类似date和time的组合。Chrome、Safari表现一致,但Safari在提交时没有验证,在输入框右侧有上下两个按钮,点击加减分钟,Firefox、ie9不支持

⑥ datetime-local类型

datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框,并且在提交时会对输入的日期和时间进行有效检查。

Opera中和datetime表现上的区别就是末尾少了个UTC。Chrome、Safari表现一致,但Safari在提交时没有验证,Firefox、ie9不支持

⑦ month类型

month类型的input元素是一种专门用来输年月份的文本框,并且在提交时会对输入的月份进行有效检查。

Opera中和date类似,只是只能选择到月份。Chrome、Safari表现一致,但Safari在提交时没有验证,Firefox、ie9不支持

⑧ week类型

week类型的input元素是一种专门用来输周号的文本框,并且在提交时会对输入的周号进行有效检查。

Opera提供下拉选择,不允许手动输入。Chrome、Safari表现一致,但Safari在提交时没有验证,Firefox、ie9不支持

⑨ number类型

number类型的input元素是一种专门用来输数字的文本框,并且在提交时会对输入的内容是否为数字。它们具有 min、max 与 step 属性。 带有数值控制按钮,以控制其数值,使之不超过最大值于最小值,同时在点击该数值控制按钮时,其中的数值会按step属性进行增减,当然也可以直接在其中输入数字。

Opera、Chrome、Safari表现一致,但Safari在提交时没有验证,Firefox、ie9不支持

⑩ range类型

range类型的input元素是一种只允许输入一段范围内数值的文本框,它具有min属性与max属性,可以设定最小值与最大值(默认为0与100),它还具有step属性,可以制定每次拖动的维度,用滑动条的方式进行值的制定。

Opera中滑条带刻度、Chrome、Safari不带,Firefox、ie9不支持

⑾ search类型

search类型的input元素是一种专门用来输入搜索关键词的文本框的文本框。search类型与text类型仅仅在外观上有却别。在Safari浏览器中,它的外观为操作系统默认的圆角矩形文本框,但这个外观可以用css央视表进行改写。在其他浏览器中,TA的外观暂与text类型的文本框外观相同,但可以用css样式表进行改写。(-webkit-appearance:textfield)

Safari和Chrome在输入框有内容时会默认在输入框右边出现一个×

⑿ tel类型

tel类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则,不强制输入数字(因为许多电话号码通常带有其他文字),譬如86-010-86670831.但是开发者可以通过 pattern属性来制定对于输入的电话号码格式的验证。

Safari和ie不支持

⒀ tel类型

color类型的input元素用来选取颜色,它提供了一个颜色选取器。目前它只在Opear浏览器与BlackBerry浏览器中被支持。

Safari和ie不支持

html5 规定input域,html5中关于input用法相关推荐

  1. html5表单域,html5表单控件和表单域

    一.表单控件 文章目录 一.表单控件 1.1 认识表单 1.2 input控件 1.2.1 文本框与密码框 1.2.2 单选框和复选框 1.2.3 默认选中表单属性 1.2.4 input按钮组 1. ...

  2. input python2.7_python 中的input

    渣渣之路. 一. 在python编程初学者指南中的第六章.使用参数和返回值的例子中: # -*- coding: utf-8 -*- def display(message): print messa ...

  3. linux 内核 input,初识linux中的input设备

    原标题:初识linux中的input设备 究竟何谓input设备,相信市场上卖宠物小狗的大妈都能一口答出来,你能不知道么?对,就是我们传说中的输入设备.说到输入设备,相信用过电脑的兄弟都不会陌生了,即 ...

  4. python3中的 input函数_Python3中的input函数

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...

  5. 用html5点击消失,input点击后placeholder中的提示消息消失

    html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消 ...

  6. HTML5 中的 input 元素的输入类型(type 属性的取值)

    目录 输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...

  7. Html5中的input标签之多少

    请问在input的标签中的type属性你知道多少呀!我们一起来回顾回顾(Html5第一课) Html5中type必有的以下的特殊属性 color date datetime datetime-loca ...

  8. html5复选框控制按钮状态,HTML input checkbox复选按钮简介说明

    摘要: 下文讲述html代码中input type='checkbox'时的相关属性简介说明,如下所示: input type='checkbox' 简介 当input标签中type='checkbo ...

  9. HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

最新文章

  1. python程序默认执行与多线程
  2. LeetCode Binary Tree Preorder Traversal(二叉树的前序遍历)
  3. redis中的事务、lua脚本和管道的使用场景
  4. 节点图一般的比例_基于图的异常检测(二):LOCKINFER
  5. 如何对用户进行细分-邮件营销中用户细分的方法
  6. 如何用c语言验证一个定理,验证动量定理方法一
  7. [转]C++类成员修饰const和mutable
  8. WebService学习总结(二)——WebService相关概念介绍
  9. PREEMPT_RT 3.18.136 实时时延评估
  10. 淘汰过时的工具也有错?微软的 Blazor 框架会是下一个 SilverLight?
  11. IIS出现server application error的解决办法
  12. matlab多元正态性检验,Matlab正态分布性检验
  13. JS逆向-易班登录password参数(RSA加密)
  14. Debug---Eclipse断点调试基础
  15. 纪念日该给女朋友送什么礼物?
  16. Macbook删除苹果系统,装单系统win10系统
  17. 白鹭引擎王泽:重度H5游戏性能优化技巧
  18. des加密解密 代码 java_java 实现DES 加密解密的示例
  19. Java 反射 - Java 访问器
  20. 【无标题】使用element-ui中的el-date-picker,中间的至字显示不全的原因及解决

热门文章

  1. 【转】 使用 AppFuse 快速构建 J2EE 应用
  2. simulink仿真设置
  3. 使用ffmpeg循环推流(循环读取视频文件)推送RTMP服务器的方法
  4. hadoop基础教程
  5. 数据库MySQL关系模型之基本概念
  6. JDBC: Java连接MySQL
  7. imx6 板卡移植官方yocto版本(1_安装环境)
  8. 第12章 样式(三)
  9. 分销与供应链海外采购电子元器件,你需要了解哪些报关知识?
  10. 又肝了下微服务 API 网关“金刚”,也是蛮香的~