HTML5 的新的表单属性

1 新的 form 属性:
   autocomplete
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项

PS:白话文:该属性也就是可以点出上次输入的text文本框的值

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>


2  新的 input 属性:
  2.1 autofocus:属性规定在页面加载时,域自动地获得焦点,适用于所有 <input> 标签的类型
User name: <input type="text" name="user_name"  autofocus="autofocus" />
  2.2
   注释:form 属性适用于所有 <input> 标签的类型。 form 属性必须引用所属表单的 id:
  
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />


2.3
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释:list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>


2.4

pattern 属性
pattern 属性规定用于验证 input 域的模式(pattern)。 模式(pattern) 是正则表达式。
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
 
   Country code: <input type="text" name="country_code" pattern="[A-z]{3}"     title="Three letter country code" />


2.5
placeholder 属性:默认值
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
 <input type="search" name="user_search"  placeholder=请输入值" />


2.6

required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name: <input type="text" name="usr_name" required="required" />


3   HTML5 中的新标签。
     3.1 <abbr>  定义缩写。  鼠标移到 PRC 就会有abbr的提示
   The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.


  3.2  bdo 元素可覆盖默认的文本方向。 rtl左到右,rtl 右到左

<bdo dir="rtl">Here is some text</bdo>:显示Here is some Hebrew text
<bdo dir="rtl">Here is some text</bdo>:显示Here is some Hebrew text

猜你喜欢

转载自zhang1989101.iteye.com/blog/2356085