html5中关于input用法的改变

测试环境:Firefox 10.0、Safari 5.1、Opera 11.61, Chrome 14.0.835.202

自己测试的时候都有写在form表单里,有提交按钮验证。因为对博客使用还不是很熟练,发博文的时候只有舍弃submit验证。大家在本地练习的时候可以写上submit验证,看各个浏览器的对这些新增的类型验证的区别。

一、新增的属性和属性值

在HTML5中,大幅度地增加与改良了input属性的种类,可以简单的使用这些属性来实现之前需要使用JavaScript才能实现的。对于html5中新增的input属性支持得最多、最全面的是Opera浏览器。

  • 1. type属性

    html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型。

    url, email, date, time, datetime, month, week, number, range, search, tel, color

    • ① url类型

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

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

    • ② email类型

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

      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元素是一种专门用来输数字的文本框,并且在提交时会对输入的内容是否为数字。它们具有 minmax 与 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不支持

  • 2、require

    定义输入字段的值是否是必需的,可取值true 和 false 。当使用下列类型时无法使用:hidden, image, button, submit, reset

    Safari和ie9 不支持

  • 3、list

    引用 datalist 元素。如果定义,则一个下拉列表可用于向输入字段插入值。

    Webpage:

    仅Opera支持

  • 4、autocomplete

    autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

    注释:autocomplete 适用于 form 标签,以及以下类型的 input 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

    当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

    First name:

    Last name:

    E-mail:

  • 5、autofocus

    可取值:true 和 false

    当页面加载时,使输入字段获得焦点。注释:type="hidden" 时,无法使用。

    除了ie9 都支持

  • 6、multiple

    multiple 属性规定输入域中可选择多个值。适用于以下类型的 input 标签:email 和 file。

  • 7、pattern

    pattern 属性规定用于验证 input 域的模式(pattern)。模式(pattern) 是正则表达式。适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password。

    Safari、ie9不支持

  • 8、palceholder

    placeholder 属性提供一种提示(hint),描述输入域所期待的值。适用于text, search, url, telephone, email 以及 password。

    ie9 不支持

  • 9、height 和 width 属性

    height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。只适用于image类型的input

    全支持

顺便提一下、output

在HTML5中,追加了新的元素output。output元素定义不同类型的输出,比如计算结果或脚本的输出。output元素必须从属于某个表单,也就是说,必须将它书写在表单内部,或者对它添加form属性。

请输入两个数字 *  = 0

关于form元素上oninput中的text1.value以及text2.value,换成ID.value的形式也可以正常工作,即Text1.value和Text2.value。 output既然具有name属性,不过却不是表单控件,并不能被提交到服务器。

如果你的浏览器是Chrome、Safari、Opera、Firefox在两个输入框中输入数值后就会看到结果

html5中input不再支持align、size属性。

时间: 2024-10-19 01:39:00

html5中关于input用法的改变的相关文章

DataList:HTML5中的input输入框自动提示宝器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新增的一个非常有用的元素. DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么. HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单! <label for="country_name"

html5中的input和label写法与取值

demo 效果图如上 label是html5特有的,是定义 input 元素的标注.凡是input前面要有个label标识下,label和input真是一对好兄弟啊.<label> 标签的 for 属性应当与相关元素的 id 属性相同. <div class="blocks mgtop0 brdbtm0 clearFix"> <div class="addareaBox"> <label class="stateT

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

xampp搭建服务器环境、html5新的input类型

怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入数据的类型.根据不同的type 属性,输入类型有多种形态,输入字段可以使文本字段.复选框.密码字段.单选按钮.按钮等等.html5为我们提供了更丰富的input类型.如下: 1.email email类型用于包含e-mail地址的输入域,在提交表单时,会自动验证email域的值. iPhone中的Safari

HTML5中的placeholder属性

placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 如 <input type="text" name="loginName" placeholder="邮箱/手机号/QQ号"> 目前浏览器的支持情况 浏览器 IE6/7/8/9 IE10+ Firefox Chrome Safari  是否支持 NO YES YES

verilog中defparam的用法 (verilog调用底层模块(只改变)参数的传递)

当一个模块引用另外一个模块时,高层模块可以改变低层模块用parameter定义的参数值,改变低层模块的参数值可采用以下两种方式: 1)defparam 重定义参数 语法:defparam path_name = value ; 低层模块的参数可以通过层次路径名重新定义,如下例: module top ( .....)input....;output....;defparam U1 . Para1 = 10 ;M1 U1 (..........);endmodulemodule M1(....);

input在HTML5中的六种时间类型应用教程

[转自e良师益友网]HTML5每日坚持一练:今天介绍一下input在HTML5中的6种时间类型的应用,你可以自己尝试编出实例的哦 1.Date类型 如果在之前,我们使用js+css+dom才能实现日历选择日期的效果,在HTML5中,我们只需要设置input为date类型即可,提交表单的时候也不需要我们验证数据了,它已经帮我们实现了. 2.Time类型 此类型是一个专门用来输入时间的文本框,在提交的时候检查是否输入了有效的时间. 3.DateTime类型 datetime类型的input元素是专门

HTML5中新加的标签和属性定义

HTML5 <!DOCTYPE> 标签所有主流浏览器都支持 <!DOCTYPE> 声明.<!DOCTYPE> 声明非常重要,它是一种标准通用标记语言的文档类型声明,通过该标签,浏览器能够了解HTML5文档正在使用的HTML规范,<!DOCTYPE> 声明是HTML5文档的起始点,也就是说它必须位于HTML5文档的第一行!标签定义及使用说明:<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.<!DO

HTML5笔记1——HTML5的发展史及标签的改变

记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,记得当年用的最新的IE浏览器版本还是IE9,才刚刚开始支持HTML5.后来考虑到当时各个版本的浏览器对HTML5的支持都不怎么好,最终公司还是选择了Silverlight,想不到多年以后Silverlight没落了,HTML5却随着移动互联网的兴起而焕发出强大的活力. HTML5的发展路程 一路走来,我们回顾一下HTML的发展之路 HTML1.0