使用html5中input标签的新属性时,需注意浏览器的兼容性。
- autofocus
自动获取焦点
<input type="text" name="username" autofocus />
- placeholder
默认信息
<input type="text" name="username" placeholder="请输入用户名" />
- required
表示必填项。若没填写,将无法提交表单,并在提交表单时将给出提示信息。
<form action="#" method="get">
<input type="text" name="username" required />
<input type="submit" name="submit">
</form>
可使用setCustomValidity()函数设置required属性的提示信息
<form action="#" method="get">
<input type="text" name="username" id="username" required />
<input type="submit" name="submit">
</form>
<script>
document.querySelector("#username").setCustomValidity("用户名不能为空");
</script>
- form
使用场景:某input标签在form表单外,但是提交时其值也需要作为参数一起传递。
使用方法:将input标签中form属性的值填写为待提交表单的id即可。
<form action="#" id="test" method="get">
<input type="text" name="username" required />
<input type="submit" name="submit">
</form>
<input type="text" name="email" form="test" />
- list
list属性需与datalist标签一起使用,规定输入域的选项列表。
注意:当input标签使用list属性后,并不表示input标签中的值只能是选项列表中的。
<input type="text" name="email" list="email"/>
<datalist id="email">
<option value="327645605@qq.com"></option>
<option value="327645605@163.com"></option>
</datalist>