HTML 5 Input 类型

HTML 5 表单属性

 

 

HTML 5 的新的表单属性

 

本章讲解涉及 <form> <input> 元素的新属性。 新的 form 属性:

autocomplete novalidate

新的 input 属性:

 

autocomplete autofocus form

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height width

list

 

min, max step multiple

pattern (regexp) placeholder required

浏览器支持

 

Input type

 

IE

 

Firefox

 

Opera

 

Chrome

 

Safari

 

autocomplete

 

8.0

 

3.5

 

9.5

 

3.0

 

4.0


 

 

autofocus

 

No

 

No

 

10.0

 

3.0

 

4.0

 

form

 

No

 

No

 

9.5

 

No

 

No

 

form overrides

 

No

 

No

 

10.5

 

No

 

No

 

height and width

 

8.0

 

3.5

 

9.5

 

3.0

 

4.0

 

list

 

No

 

No

 

9.5

 

No

 

No

 

min, max and step

 

No

 

No

 

9.5

 

3.0

 

No

 

multiple

 

No

 

3.5

 

No

 

3.0

 

4.0

 

novalidate

 

No

 

No

 

No

 

No

 

No

 

pattern

 

No

 

No

 

9.5

 

3.0

 

No

 

placeholder

 

No

 

No

 

No

 

3.0

 

3.0

 

required

 

No

 

No

 

9.5

 

3.0

 

No

 

autocomplete 属性

 

autocomplete 属性规定 form input  域应该拥有自动完成功能。

 

注释: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签: text, search, url, telephone, email, password, datepickers, range 以及 color。

 

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项

<!DOCTYPE HTML>

<html>

<body>

<form action="/example/HTML 5/demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" />

<input type="submit" />

</form>

<p>下面的输入域在 form 元素之外,但仍然是表单的一部分。</p>

Last name: <input type="text" name="lname" form="user_form" />

 属性

min、max step 属性

 

min、max step 属性用于为包含数字或日期的 input  类型规定限定(约束)。

 

max 属性规定输入域所允许的最大值。

 

min 属性规定输入域所允许的最小值。

 

step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。 注释:min、max step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range 下面的例子显示一个数字域,该域接受介于 0 10 之间的值,且步进为 3(即合法的值为 0、3、6 9): 实例

Points: <input type="number" name="points" min="0" max="10" step="3" />


multiple 属性

multiple 属性规定输入域中可选择多个值。

注释:multiple 属性适用于以下类型的 <input> 标签:email file 实例

Select images: <input type="file" name="img" multiple="multiple" />


novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form input  域。

注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.

实例

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

<input type="submit" />

</form>


pattern 属性

pattern 属性规定用于验证 input 域的模式(pattern)。

模式(pattern 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

注释: 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" /> 


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" />







 

 

 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值