深入剖析HTML5表单

       作为从事前段开发的人员要做到精一专多，这就需要时刻学习***的知识，那我们就必需提到WEB开发领域的HTML5.

久治网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。成都创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

        学习HTML5半年有余了,虽然对它的离线存储以及canvas等革新性技术还是一知半解,但我还是希望我现在所学到的能帮助更多的前端人学习这门毋庸置疑是新趋势的技术.本文我将详细介绍一下HTML5中对表单功能的更新. 阅读本文前建议在Opera***版中打开样例演示页查看样例演示。

 一、表单结构更自由

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

 
 
 
    
  
  
  
  1.     
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.     ...    
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.     
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.    
    10. 
  
  
  
  10.  
    11.

二、多样的输入类型

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

 
 
 
    
  
  
  
  1.    
    2.

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

 
 
 
    
  
  
  
  1.    
    2.

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

 
 
 
    
  
  
  
  1.     
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.     
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.    
    8.

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

number输入类型(这些个很牛X的)

 
 
 
    
  
  
  
  1.   
    2.

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

range输入类型 

 
 
 
    
  
  
  
  1.   
    2.

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

search输入类型

 
 
 
    
  
  
  
  1.   
    2.

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

tel输入类型

 
 
 
    
  
  
  
  1.   
    2.

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

color输入类型

 
 
 
    
  
  
  
  1.   
    2.

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

 三、新增的表单属性

placeholder属性

 
 
 
    
  
  
  
  1.   
    2.

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

require/pattern属性

 
 
 
    
  
  
  
  1.     
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.    
    6.

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

autofocus属性

 
 
 
    
  
  
  
  1. INPUT autofocus="true">  
    2.

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

list属性

 
 
 
    
  
  
  
  1.     
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.        
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.        
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.        
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.    
    12.

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

max/min/step属性

 
 
 
    
  
  
  
  1.   
    2.

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

autocomplete属性

 
 
 
    
  
  
  
  1.   
    2.

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
       在本文中我给大家分享了关于HTML5的表单的一些新功能，新属性，如果有心了解更多的话，就利用网络或多看下这本书多学习一下。

文章标题：深入剖析HTML5表单
转载来于：http://www.shufengxianlan.com/qtweb/news45/291445.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App开发知识

行业网站建设

尊格展览　　 　成都h5建站开发　　 　力比特机械　　 　微信小程序公众号开发　　 　主动防护网　　 　温江服务器托管　　 　重庆水土三线托管　　 　草坪音箱　　 　SSL认证　　 　四川鸿达　　 　成都网站推广　　 　网站排名　　 　铁科精智测控　　 　德阳服务器托管　　 　申请域名　　 　等级保护测评　　 　网站快速收录　　 　自适应网页设计　　 　成都圣月窗帘　　 　云服务器香港