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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值