HTML5 - input标签新属性

使用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>