新表单属性
最完整的表单属性可以通过查阅w3cschool-h5表单属性获取,这里仅针对常见属性讲解
autocomplete(自动完成)
能够记录用户的输入,并且给予提示,这就是
autocomplete的作用
取值:
on:开启
off:关闭
适用情况:
一般用在input标签中
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" >
<input type="text" autocomplete="on" name="userName">
<input type="submit">
</form>
</body>
</html>使用注意:
标签需要添加
name属性只有提交了一次以后才会出现提示
autofocus(获取焦点)
当某一页有很多个可供输入的元素时,用户需要使用鼠标点选元素进行输入,为了提升用户体验,我们可以通过
autofocus属性来指定页面中默认选中的元素
使用方法:
需要哪个
表单元素获得焦点,只需要添加该属性即可不需要赋值,只需要添加属性即可,见示例代码
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" > 姓名:<input type="text" name="userName"> <br/> 年龄<input type="number" name="telNum" autofocus> <input type="submit"> </form> </body> </html>
使用注意:
在没有该属性之前,能够使用
JavaScript来指定元素如果页面中多个元素设置了该属性,最后一个会获得焦点
form(表单关联)
当我们想要提交数据时,需要把
表单元素放到对应的form标签中,这个属性的出现让表单元素的放置位置不在受到约束
使用方法:
想要某个
表单外元素跟该表单建立联系,只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可示例代码
让表单外输入爱好的
input标签跟id为userForm表单建立联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="userForm" >
姓名:<input type="text" name="userName">
<br/>
年龄:<input type="number" name="telNum" autofocus>
<br/>
<input type="submit">
</form>
<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>使用注意:
虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性
multiple(多选)
如果想要在某个
input标签中选择多个值,可以使用该属性
适用情况:
该属性可以用在type为
file标签内示例代码
选择多文件时,需要按住
ctrl按钮<input type="file" multiple >
placeholder(占位提示)
输入元素内默认显示一些提示信息,当用户输入之后自动消失,这种效果我们需要使用
JavaScript来实现,知道出现了placeholder这个属性
使用方式:
直接为该属性赋值想要提示的内容即可
适用情况:
想要不通过
JavaScript来实现提示功能示例代码:
placeholder.png
显示效果如下
<input type="text"placeholder="输入用户名">
新的表单元素
除了在input标签中增加了一些新的
type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素
datalist
该元素规定了输入区域的选项列表,可以让用户有一些选项
测试代码:
注:测试代码只是
body内部的代码
网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn"/>
<option label="Google" value="http://www.google.com"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>
电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
<option value="186xxx" label="移动">移动</option>
<option value="187xxx" label="联通">联通</option>
<option value="135xxx" label="天翼">天翼</option>
</datalist>datalist:
id:id属性,想要使用该
datalist的元素需要通过list=id的方式来指定option:
value:指定具体的值
label:提示信息
注意:
如果input的type为
url,option中对应的value需要使用http://开始
keygen
keygen 元素是密钥对生成器（key-pair generator）。