form表单新特性个函数

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

验证 input 域的模式,如果value不符合其正则表达式，那表单将通不过验证，无法提交

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

 7. novalidate

属性规定在提交表单时不验证 form 或 input 域

<form action="demo_form.asp" novalidate="novalidate">
  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

 
 运行效果是不验证E-mail的输入,没有@也可以提交