HTML 5 Input 类型

来源：互联网发布：程序员的自我修养微盘编辑：程序博客网时间：2024/06/02 03:10

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

Firefox

Opera

Chrome

Safari

autocomplete

8.0

3.5

9.5

3.0

4.0

autofocus

10.0

3.0

4.0

form

9.5

form overrides

10.5

height and width

8.0

3.5

9.5

3.0

4.0

list

9.5

min, max and step

9.5

3.0

multiple

3.5

3.0

4.0

novalidate

pattern

9.5

3.0

placeholder

3.0

required

9.5

3.0

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

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

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

阅读全文

0 0