详解HTML5新表单属性

新表单属性

最完整的表单属性可以通过查阅w3cschool-h5表单属性获取,这里仅针对常见属性讲解

autocomplete(自动完成)

能够记录用户的输入,并且给予提示,这就是autocomplete的作用

• 取值:

• on:开启

• off:关闭

• 适用情况:

  立即学习“前端免费学习笔记（深入）”；

• 一般用在input标签中

• 示例代码:

• 使用注意:

• 标签需要添加name属性

• 只有提交了一次以后才会出现提示

autofocus(获取焦点)

当某一页有很多个可供输入的元素时,用户需要使用鼠标点选元素进行输入,为了提升用户体验,我们可以通过autofocus属性来指定页面中默认选中的元素

• 使用方法:

• 需要哪个表单元素获得焦点,只需要添加该属性即可

• 不需要赋值,只需要添加属性即可,见示例代码

• 示例代码:

  
  
  
    
    
  
  
  
    姓名:
    
  
    年龄
    
  
  
  

• 使用注意:

• 在没有该属性之前,能够使用JavaScript来指定元素

• 如果页面中多个元素设置了该属性,最后一个会获得焦点

form(表单关联)

当我们想要提交数据时,需要把表单元素放到对应的form标签中,这个属性的出现让表单元素的放置位置不在受到约束

• 使用方法:

• 想要某个表单外元素跟该表单建立联系,只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可

• 示例代码

  

  新秀B2C商城系统

  新秀B2C商城系统是一款简洁易用PHP商城系统。可免费下载使用，可用于商业用途，没有时效限制，除版权标识外，所有代码都允许修改。后台功能简介：1、商城设置：基本信息，配送方式，配送范围，支付方式，财务管理；2、商品管理：商品列表，添加商品，商品分类，商品品牌，商品属性；3、订单管理：订单列表，缺货登记；4、用户互动：用户管理，留言管理，评论管理，网站公告，在线客服，用户协议；5、文章管理：文章列表

  下载

• 让表单外输入爱好的input标签跟id为userForm表单建立联系

    
    



    姓名:
    

    年龄:
    

    




爱好:

• 使用注意:

• 虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性

multiple(多选)

如果想要在某个input标签中选择多个值,可以使用该属性

• 适用情况:

  立即学习“前端免费学习笔记（深入）”；

• 该属性可以用在type为file标签内

• 示例代码

• 选择多文件时,需要按住ctrl按钮

placeholder(占位提示)

输入元素内默认显示一些提示信息,当用户输入之后自动消失,这种效果我们需要使用JavaScript来实现,知道出现了placeholder这个属性

• 使用方式:

• 直接为该属性赋值想要提示的内容即可

• 适用情况:

  立即学习“前端免费学习笔记（深入）”；

• 想要不通过JavaScript来实现提示功能

• 示例代码:

  
  

  placeholder.png

• 显示效果如下

新的表单元素

除了在input标签中增加了一些新的type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素

datalist

该元素规定了输入区域的选项列表,可以让用户有一些选项

• 测试代码:

• 注:测试代码只是body内部的代码

网址:


电话: 

• datalist:

• id:id属性,想要使用该datalist的元素需要通过list=id的方式来指定

• option:

• value:指定具体的值

• label:提示信息

• 注意:

• 如果input的type为url,option中对应的value需要使用http://开始

keygen

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

• 使用频率:低

output

属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过input标签0的方式来动态修改结果,只是相比于其他的标签,语义性更强。

• 使用频率:低

【相关推荐】

1. input标签1

2. input标签2

3. input标签3