H5新表单属性

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

autocomplete(自动完成)
能够记录用户的输入,并且给予提示

取值:
on:开启
off:关闭

示例代码:

autofocus(获取焦点)
指定页面中默认选中的元素

示例代码:

 
  
  


  

     姓名: 

     年龄 
     
  

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

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

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

    
    



    姓名:
    

    年龄:
    

    




爱好:

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

multiple(多选)
在某个input标签中选择多个值

适用情况:
该属性可以用在type为file标签内

示例代码
选择多文件时,需要按住ctrl按钮

placeholder(占位提示)
输入元素内默认显示一些提示信息,当用户输入之后自动消失

使用方式:
直接为该属性赋值想要提示的内容即可

示例代码:

新的表单元素

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

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

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

网址:
    
电话: 
        

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

option:value:指定具体的值
label:提示信息

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