1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

HTML 5之表单新功能解析

作者:用户 来源:互联网 时间:2016-03-03 18:31:18

html表单属性类型输入前端 js form前端, js, form提交一个解析表单输入类型

HTML 5之表单新功能解析 - 摘要: 本文讲的是HTML 5之表单新功能解析, 时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵-

时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML 5.虽然HTML 5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML 5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML 5离我们不再遥远.

51CTO推荐专题:HTML 5 下一代Web开发标准详解

学习HTML 5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML 5中对表单功能的更新.。 

一、表单结构更自由

XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML 5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来.

比如:


  1. <form id="iform"> 
  2. <input type="text"> 
  3.     ...  
  4. </form> 
  5. <input value="我在id为iform的表单外" form="foo"> 

二、多样的输入类型(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示)

email输入类型


  1. <input type="email" name="email"> 

此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.

url输入类型


  1. <input type="url"> 

上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样. number输入类型


  1. <input type="date"> 
  2. <input type="time"> 
  3. <input type="month"> 
  4. <input type="week"> 

这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.

range输入类型


  1. <input type="number"> 

此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

search输入类型


  1. <input type="search"> 

此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.

tel输入类型


  1. <input type="tel"> 

此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

color输入类型


  1. <input type="color"> 

此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中.

三、新增的表单属性

placeholder属性


  1. <input type="text" placeholder="点击我会以清除"> 

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持.

require/pattern属性


  1. <input type="text" name="require" required=""> 
  2. <input type="text" name="require1" required="required"> 
  3. <input type="text" name="require2" pattern="^[1-9]\d{5}$"> 

表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.

autofocus属性


  1. <input type="text" autofocus="true"> 

默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().

list属性


  1. <input type="text" list="ilist"> 
  2. <datalist id="ilist"> 
  3.     <option label="a" value="a"> 
  4.     </option><option label="b" value="b"> 
  5.     </option><option label="c" value="c"> 
  6. </option></datalist> 

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.

max/min/step属性


  1. <input type="range" max="100" min="1" step="20"> 

限制值的输入范围,以及值的输入渐进程度,比如可在number设定输入最大值最小值,或者在range中设定拖动阶梯.

autocomplete属性


  1. <input type="text" autocomplete="on"> 

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
 

原文链接:http://mrthink.net/html5-newfeatures-form/

【编辑推荐】



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索html , 表单 , 属性 , 类型 , 输入 , 前端 js form , 前端, js, form提交 , 一个 , 解析表单 输入类型 html5新功能、html5的新功能、html5 表单验证、html5手机表单模板、html5 form表单 模板,以便于您获取更多的相关知识。

代码-菜鸟提问:关于网站建立的树系统解析

...本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 编辑软件:eclipse, webstorm 解决方案三: 不涉及编程的话,可以使用Frontpage、Expression(Frontpage的继任者)这些WYSIWYG...

Bootstrap每天必学之表单_javascript技巧

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7....

dedecms5.7(织梦)源码解析之程序安装补全篇

...提示、系统环境检测、数据库和网站基本信息填写、提交表单信息进入index.php文件处理、提示安装成功等功能,可以说是引导用户一步步安装的页面。 module-install.php文件该文件主要作用为安装模块,具体作用请见如下代码和注...

OLDboy-python第八期运维教程

...a标签07 HTML之h和select标签08 HTML之input系列标签09 HTML之form表单10 HTML之for和table以及列表标签11 HTML之fieldset标签12 CSS之样式概要和各种选择器13 CSS之样式背景图片14 CSS之样式边框和内外边距15 CSS之样式 position16 模态对话框Demo17本节...

Bootstrap每天必学之表单

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7....

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备