1.placeholder
其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。
<p>
<label for="runnername">
Runner:
</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" />
</p>
运行结果是:在输入框有'First and last name'字符,当点击输入时,字符消失.
2.autocomplete
浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。
类型 | 作用 |
on | 字段无需保护,可被重复复制和存储 |
off | 字段被保护,不可复制和存储 |
unspecified | 包含<form>的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on |
<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。
3. autofocus
页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。不能实现焦点转移
4. list特性和datalist
Webpage: <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>
webpage后输入框会有<datalist>三个网址选项列表.
5.required
其属性规定其输入区域不能为空
6.pattern
Name: <input type="text" name="usr_name" required="required" />
6.pattern
验证 input 域的模式,如果value不符合其正则表达式,那表单将通不过验证,无法提交
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
7. novalidate
属性规定在提交表单时不验证 form 或 input 域
运行效果是不验证E-mail的输入,没有@也可以提交
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
运行效果是不验证E-mail的输入,没有@也可以提交