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 其属性规定其输入区域不能为空
Name: <input type="text" name="usr_name" required="required" />
6.pattern