HTML <input> 标签属性
浏览器支持
IE、Firefox、Chrome、Safari、Opera等所有浏览器都支持 <input> 标签。
定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
HTML 与 XHTML 之间的差异
在 HTML 中,<input> 标签没有结束标签。
在 XHTML 中,<input> 标签必须被正确地关闭。
提示和注释:
提示:请使用 label 元素为某个表单控件定义标签。
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
HTML 4.01 与 HTML5之间的差异
在 HTML 4.01 中, "align" 数据已经不再使用。HTML5 中不支持该属性。 可以使用CSS来定义 <input> 元素的对齐方式。
在 HTML5中, <input> 添加了几个属性,并且添加了对应的值。
属性
new : HTML5 中的新属性。
属性 | 值 | 描述 | 定义与用法 | 实例/备注 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。 提示:请避免使用该属性。应该在服务器端验证文件上传 |
在文件上传中使用 accept 属性,本例中的输入字段可以接受 GIF 和 JPEG 两种图像: |
||||||||||||||||||||
align |
|
不赞成使用。规定图像输入的对齐方式。 |
align 属性只能与 <input type="image"> 配合使用。它规定图像输入相对于周围其他元素的对齐方式。 浏览器支持只有 "left" 和 "right" 值得到所有浏览器的支持。
|
在 HTML 4.01 中,不赞成使用 input 元素的 align 属性。在 XHTML 1.0 Strict DTD 中不支持该属性。
请使用 CSS 代替。 CSS 语法:<input type="image" style="float:right" /> |
||||||||||||||||||||
alt | text | 定义图像输入的替代文本。 | alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。
alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。 注释:即使 alt 属性不是必需的属性,但是当输入类型为 image 时,仍然应该设置该属性。如果不使用该属性,就有可能对文本浏览器或非可视的浏览器造成使用障碍。 除了 Safari,所有主流的浏览器都支持 "alt" 属性。 |
<input type="image" src="submit.jpg"
|
||||||||||||||||||||
autocomplete |
|
规定是否使用输入字段的自动完成功能。 no默认。规定启用自动完成功能。 |
autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。 提示:在某些浏览器中,您可能需要手动启用自动完成功能。 |
启用自动完成功能的表单(其中一个输入字段禁用了自动完成):
<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"
|
||||||||||||||||||||
autofocus |
autofocus |
规定输入字段在页面加载时是否获得焦点。 (不适用于 type="hidden") |
autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。 如果使用该属性,则 input 元素会获得焦点。 |
<form action="demo_form.asp">
First name:<input type="text" name="fname"
|
||||||||||||||||||||
checked | checked | 规定此 input 元素首次加载时应当被选中。 | checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。 checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。 |
<form action="form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Car"
|
||||||||||||||||||||
disabled | disabled | 当 input 元素加载时禁用此元素。 | disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。 注释:disabled 属性无法与 <input type="hidden"> 一起使用。 |
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname"
|
||||||||||||||||||||
form![]() |
formname | 规定输入字段所属的一个或多个表单。 |
form 属性规定 input 元素所属的一个或多个表单。 form 属性的值必须是其所属表单的 id。 如需引用一个以上的表单,请使用空格分隔的列表。 |
位于表单之外的输入字段: |
||||||||||||||||||||
formaction |
URL |
覆盖表单的 action 属性。 (适用于 type="submit" 和 type="image") |
formaction 属性覆盖 form 元素的 action 属性。 该属性适用于 type="submit" 以及 type="image"。 可能的值:
|
带有两个提交按钮的表单(不同的 action 值):
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit"
|
||||||||||||||||||||
formenctype |
见定义与用法 |
覆盖表单的 enctype 属性。 (适用于 type="submit" 和 type="image") |
formenctype 属性覆盖 form 元素的 enctype 属性。 该属性与 type="submit" 和 type="image" 配合使用。
|
带有两个提交按钮的表单(拥有有不同的编码方式): <form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname" /><br />
<input type="submit" value="Submit" />
<input type="submit"
|
||||||||||||||||||||
formmethod |
|
覆盖表单的 method 属性。 (适用于 type="submit" 和 type="image") |
formmethod 属性覆盖 form 元素的 method 属性。 可以通过以下方式发送 form-data :
该属性与 type="submit" 以及 type="image" 配合使用。 |
下面的提交按钮覆盖了表单的 HTTP 方法: <form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit"
|
||||||||||||||||||||
formnovalidate |
formnovalidate |
覆盖表单的 novalidate 属性。 如果使用该属性,则提交表单时不进行验证。 |
formnovalidate 属性覆盖 form 元素的 novalidate 属性。 如果使用该属性,则提交表单时按钮不会执行验证过程。 该属性适用于 <form> 以及以下类型的 <input>:text, search, url, telephone, email, password, date pickers, range 以及 color。 |
带有两个提交按钮的表单(一个进行验证,另一个不验证): <form action="demo_form.asp" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /><br />
<input type="submit"
|
||||||||||||||||||||
formtarget |
|
覆盖表单的 target 属性。 (适用于 type="submit" 和 type="image") |
formtarget 属性覆盖 form 元素的 target 属性。 该属性与 type="submit" 以及 type="image" 配合使用。 注释:HTML5 不支持框架和框架集。现在,parent, top 和 framename 值大多用于 iframe。 |
带有两个提交按钮的表单,会提交到不同的目标窗口: <form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit"
|
||||||||||||||||||||
height |
|
定义 input 字段的高度。(适用于 type="image") |
height 属性只适用于 <input type="image">,它规定 image input 的高度。 提示:为图片指定高度和宽度是一个好习惯。如果设置了这些属性,当页面加载时会为图片预留需要的空间。而如果没有这些属性,则浏览器就无法了解图像的尺寸,也就无法为其预留合适的空间。情况是当页面和图片加载时,页面布局会发生变化。 |
用图片作为提交按钮的表单: <form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit" width="128"
|
||||||||||||||||||||
list![]() |
datalist-id | 引用包含输入字段的预定义选项的 datalist 。 | list 属性引用数据列表,其中包含输入字段的预定义选项。 |
带有 datalist 的表单: <form action="demo_form.asp">
Webpage: <input type="url"
|
||||||||||||||||||||
max![]() |
|
规定输入字段的最大值。 请与 "min" 属性配合使用,来创建合法值的范围。 |
max 属性规定输入字段所允许的最大值。 提示:max 属性与 min 属性配合使用,可创建合法值范围。 注释:max 和 min 属性适用于以下 <input> 类型:number, range, date, datetime, datetime-local, month, time 以及 week。 |
带有指定范围的数字输入字段: Points: <input type="number" name="points" min="0"
|
||||||||||||||||||||
maxlength | number | 规定输入字段中的字符的最大长度。 |
maxlength 属性规定输入字段的最大长度,以字符个数计。 maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。 |
下面这个 HTML 表单带有最大长度分别是 85 和 55 个字符的两个输入字段: <form action="form_action.asp" method="get"> <p>Name: <input type="text" name="fullname" |
||||||||||||||||||||
min![]() |
|
规定输入字段的最小值。 请与 "max" 属性配合使用,来创建合法值的范围。 |
min 属性规定输入字段所允许的最小值。 提示:min 属性与 max 属性配合使用,可创建合法值范围。 注释:max 和 min 属性适用于以下 <input> 类型:number, range, date, datetime, datetime-local, month, time 以及 week。 |
带有指定范围的数字输入字段: Points: <input type="number" name="points"
|
||||||||||||||||||||
multiple |
multiple | 如果使用该属性,则允许一个以上的值。 |
multiple 属性规定输入字段可选择多个值。 如果使用该属性,则字段可接受多个值。 注释:multiple 属性使用欧冠与以下 <input> 类型:email 和 file。 |
可接受多个值的文件上传字段: <form action="demo_form.asp" method="get">
Select images: <input type="file" name="img"
|
||||||||||||||||||||
name | field_name | 定义 input 元素的名称。 |
name 属性规定 input 元素的名称。 name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。 注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 |
带有两个文本字段和一个提交按钮的 HTML 表单: <form action="form_action.asp" method="get"> <p>Name: <input type="text" |
||||||||||||||||||||
pattern![]() |
regexp_pattern |
规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
pattern 属性规定用于验证输入字段的模式。 模式指的是正则表达式。您可以在我们的 JavaScript 教程中阅读到这方面的内容。 注释:pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。 提示:请使用标准的 "title" 属性来描述模式。 |
只能包含三个字母的文本字段(数字或特殊字符): Country code: <input type="text" name="country_code"
|
||||||||||||||||||||
placeholder |
text | 规定帮助用户填写输入字段的提示。 |
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。 注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。 |
带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get">
<input type="search" name="user_search"
|
||||||||||||||||||||
readonly | readonly | 规定输入字段为只读。 |
readonly 属性规定输入字段为只读。 只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。 readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。 readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。 |
带有两个文本字段和一个提交按钮的 HTML 表单: <form action="form_action.asp" method="get">
Name:<input type="text" name="email" />
Country:<input type="text" name="country" value="China"
|
||||||||||||||||||||
required |
required | 指示输入字段的值是必需的。 |
required 属性规定必需在提交之前填写输入字段。 如果使用该属性,则字段是必填(或必选)的。 注释:required 属性适用于以下 <input> 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 |
带有必填字段的表单: <form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name"
|
||||||||||||||||||||
size |
number_of_char |
定义输入字段的宽度。 |
size 属性规定输入字段的宽度。 对于 <input type="text"> 和 <input type="password">,size 属性定义的是可见的字符数。而对于其他类型,size 属性定义的是以像素为单位的输入字段宽度(characters/pixels)。 由于 size 属性是一个可视化的设计属性,我们推荐您使用 CSS 来代替它。 CSS 语法:<input style="width:100px" /> |
下面这个 HTML 表单分别有两个输入字段,宽度分别是 35 个字符和 18 个字符: <form action="form_action.asp" method="get"> <p>Email: <input type="text" name="email" |
||||||||||||||||||||
src | URL | 定义以提交按钮形式显示的图像的 URL。 | src 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。
src 属性必须与 <input type="image"> 同时使用。 作为提交按钮使用的图像的 URL。 可能的值:
|
下面的表单拥有两个输入字段以及一个图像形式的提交按钮: <form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="image"
|
||||||||||||||||||||
step![]() |
number | 规定输入字的的合法数字间隔。 |
step 属性规定输入字段的合法数字间隔(假如 step="3",则合法数字应该是 -3、0、3、6,以此类推)。 提示:step 属性可以与 max 以及 min 属性配合使用,以创建合法值的范围。 注释:step、max 以及 min 属性适用于以下 <input> 类型:number, range, date, datetime, datetime-local, month, time 以及 week。 |
带有合法数字间隔的数字输入控件: <form action="demo_form.asp" method="get">
<input type="number" name="points"
|
||||||||||||||||||||
type |
|
规定 input 元素的类型。 |
|
|||||||||||||||||||||
value | value | 规定 input 元素的值。 | value 属性为 input 元素设定值。
对于不同的输入类型,value 属性的用法也不同:
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。 注释:value 属性无法与 <input type="file"> 一同使用。 |
下面的表单拥有两个输入字段以及一个提交按钮 - 它们都带有预定义的值: <form action="form_action.asp" method="get"> First name: <input type="text" name="fname" |
||||||||||||||||||||
width![]() |
|
定义 input 字段的宽度。(适用于 type="image") |
width 属性只适用于 <input type="image">,它规定 image input 的宽度。 提示:为图片指定高度和宽度是一个好习惯。如果设置了这些属性,当页面加载时会为图片预留需要的空间。而如果没有这些属性,则浏览器就无法了解图像的尺寸,也就无法为其预留合适的空间。情况是当页面和图片加载时,页面布局会发生变化。 |
用图片作为提交按钮的表单: <form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="image" src="img_submit.gif" alt="Submit"
|