表单元素的required,autocomplete,list用法

required:html

当在一个表单元素如:input中加上required属性时,点击提交表单按钮,针对input会弹出一个默认的警告信息,以下图:浏览器

代码以下:ui

<form id="myForm">
    Add your telephone:
    <input type="tel" name="phone" placeholder="input your telephone" required="required"/>
</form>
<input type="submit" form="myForm"/>

注意submit按钮并无放在form里面,此处是用id连接submit与form关系的。这样让submit脱离了form,能够实现一些特殊的视觉效果。orm

autocomplete:htm

自动为咱们提供所输入过的字符。可能的值为off、on,默认值为on。以下图:blog

autocomplete的数据来自于浏览器(user agent)get

list/datalist:input

在HTML5中提供了一个list属性,能够用来提供autocomplete值,能够连接http://caniuse.com/#search=datalist查看支持状况。it

代码以下:io

<form id="myForm">
    Add your telephone:
    <input type="tel" name="phone" list="myDataList" 
           placeholder="input your telephone" 
           required="required"/>
</form>
<input type="submit" form="myForm"/>
<datalist id="myDataList">
    <option value="dog">
    <option value="duck">
</datalist>
相关文章
相关标签/搜索