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 两种图像：
<form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>
如果不限制图像的格式，可以写为：accept="image/*"
align
  • left
  • right
  • top
  • middle
  • bottom
 不赞成使用。规定图像输入的对齐方式。

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" alt="Submit" align="right" />

autocomplete
  • on
  • off

规定是否使用输入字段的自动完成功能。

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" autocomplete="off" /><br />
  <input type="submit" />
</form>

autofocus

 autofocus

规定输入字段在页面加载时是否获得焦点。

（不适用于 type="hidden"）

  

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

如果使用该属性，则 input 元素会获得焦点。

    <form action="demo_form.asp"> 
  First name:<input type="text" name="fname" autofocus="autofocus" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" />
</form>
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" checked="checked" /> I have a car
</form>
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" disabled="disabled" /></p>
  <input type="submit" value="Submit" />
</form>
form formname 规定输入字段所属的一个或多个表单。  

form 属性规定 input 元素所属的一个或多个表单。

form 属性的值必须是其所属表单的 id。

如需引用一个以上的表单，请使用空格分隔的列表。

   
位于表单之外的输入字段：
Last name: <input type="text" name="lname" form="nameform" />

formaction

 URL

覆盖表单的 action 属性。

（适用于 type="submit" 和 type="image"）

  

formaction 属性覆盖 form 元素的 action 属性。

该属性适用于 type="submit" 以及 type="image"。

可能的值：

  • 绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
  • 相对 URL - 指向站点内的文件（比如 src="example.htm"）
  带有两个提交按钮的表单（不同的 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" formaction="demo_admin.asp" value="Submit as admin" />
</form>

formenctype

 见定义与用法

覆盖表单的 enctype 属性。

（适用于 type="submit" 和 type="image"）

  

formenctype 属性覆盖 form 元素的 enctype 属性。

该属性与 type="submit" 和 type="image" 配合使用。

值描述
application/x-www-form-urlencoded 在发送前对所有字符进行编码（默认）。
multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain 将空格转换为 "+" 符号，但不编码特殊字符。
 

带有两个提交按钮的表单（拥有有不同的编码方式）：

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname" /><br />
  <input type="submit" value="Submit" />
  <input type="submit" formenctype="multipart/form-data" value="Submit" />
</form>

formmethod
  • get
  • post

覆盖表单的 method 属性。

（适用于 type="submit" 和 type="image"）

  

formmethod 属性覆盖 form 元素的 method 属性。

可以通过以下方式发送 form-data ：

  • 以 URL 变量 (使用 method="get") 的形式来发送
  • 以 HTTP post (使用 method="post") 的形式来发送

该属性与 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" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

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" formnovalidate="formnovalidate" value="Submit" />
</form>

formtarget
  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 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" formtarget="_blank" value="Submit" />
</form>

height
  • pixels
  • %
 定义 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" height="128"/>
</form>
list datalist-id 引用包含输入字段的预定义选项的 datalist 。  list 属性引用数据列表，其中包含输入字段的预定义选项。  

带有 datalist 的表单：

<form action="demo_form.asp">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
max
  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用，来创建合法值的范围。

  

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

提示：max 属性与 min 属性配合使用，可创建合法值范围。

注释：max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

  

带有指定范围的数字输入字段：

Points: <input type="number" name="points" min="0" max="10" />
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" maxlength="85" /></p>
  <p>Email: <input type="text" name="email" maxlength="55" /></p>
  <input type="submit" value="Submit" />
</form>
min
  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用，来创建合法值的范围。

  

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

提示：min 属性与 max 属性配合使用，可创建合法值范围。

注释：max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

  

带有指定范围的数字输入字段：

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

multiple

 multiple 如果使用该属性，则允许一个以上的值。  

multiple 属性规定输入字段可选择多个值。

如果使用该属性，则字段可接受多个值。

注释：multiple 属性使用欧冠与以下 <input> 类型：email 和 file。

  

可接受多个值的文件上传字段：

<form action="demo_form.asp" method="get">
  Select images: <input type="file" name="img" multiple="multiple" />
  <input type="submit" />
</form>
name field_name 定义 input 元素的名称。  

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

  

带有两个文本字段和一个提交按钮的 HTML 表单：

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>
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" pattern="[A-z]{3}"
  title="Three letter 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" placeholder="Search W3School" />
  <input type="submit" />
</form>
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" readonly="readonly" />
  <input type="submit" value="Submit" />
</form>

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" required="required" />
  <input type="submit" />
</form>
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" size="35" /></p>
  <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p>
  <input type="submit" value="Submit" />
</form>
src URL 定义以提交按钮形式显示的图像的 URL。  src 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。

src 属性必须与 <input type="image"> 同时使用。

作为提交按钮使用的图像的 URL。

可能的值：

  • 绝对 URL - 指向另一个站点（比如 src="www.example.com/submit.gif"）
  • 相对 URL - 指向网站内的文件（比如 src="submit.gif"）
  

下面的表单拥有两个输入字段以及一个图像形式的提交按钮：

<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" src="submit.jpg" alt="Submit" align="right" />
</form>
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" step="3" />
  <input type="submit" />
</form>
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
 规定 input 元素的类型。
button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
 
value value 规定 input 元素的值。  value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

  • type="button", "reset", "submit" - 定义按钮上的显示的文本
  • type="text", "password", "hidden" - 定义输入字段的初始值
  • type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<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" value="George" /><br />
  Last name: <input type="text" name="lname" value="Bush" /><br />
  <input type="submit" value="Submit form" />
</form>
width
  • pixels
  • %
 定义 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" width="128" height="128"/>
</form>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2018-04-26 16:49  香橙鸡蛋  阅读(663)  评论(0)  编辑  收藏  举报