input

HTML <input> 元素被使用，以接受来自用户的数据，以创建基于web的表单交互控制。

Live示例

要了解<input>各种类型的外观，请尝试编辑type以下可编辑实例中的属性值; 您将在输入时看到输出更新。在每一种情况下，初始值（text）产生一个基本的文本输入，但可以尝试其它值，例如number，color，checkbox，radio，date，file，month，password，range，或time。

• type=button: link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab
• type=checkbox: button, menuitemcheckbox, option, switch
• type=image: link, menuitem, menuitemcheckbox, menuitemradio, radio, switch
• type=radio: menuitemradio
• type=color|date|datetime|datetime-local|email|file: None
• type=hidden|month|number|password|range|research: None
• type=search|submit|tel|text|url|week: None

DOM interface [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement)   

表单<input>类型

<input>的工作方式根据其type属性值的不同而有很大的不同，因此不同的类型会在他们自己的单独参考页面中进行介绍。 如果未指定此属性，则采用的默认类型为文本。

可用的类型如下所示：

• button：没有默认行为的按钮。
• checkbox：允许选择/取消选择单个值的复选框。
• color：HTML5用于指定颜色的控件。除了接受简单的颜色作为文本颜色选择器的用户界面没有要求的功能（更多信息。
• date：HTML5用于输入日期（年，月，日，无时间）的控件。
• datetime-local：HTML5用于输入日期和时间的控件，不带时区。
• email：HTML5用于编辑电子邮件地址的字段。
• file：让用户选择文件的控件。使用accept属性来定义控件可以选择的文件类型。
• hidden：未显示但其值已提交给服务器的控件。
• image：一个图形提交按钮。您必须使用src属性来定义图像的来源，并使用alt属性来定义替代文字。您可以使用高度和宽度属性以像素为单位定义图像的大小。
• month：HTML5用于输入月份和年份的控件，没有时区。
• number：HTML5用于输入号码的控件。
• password：其值被遮蔽的单行文本字段。使用maxlength属性指定可以输入的值的最大长度。 注意：任何涉及密码等敏感信息的表单（例如登录表单）应通过HTTPS提供; Firefox现在实现了多种机制来警告不安全的登录表单 - 请参阅不安全的密码。其他浏览器也在实施类似的机制。
• radio：一个单选按钮，允许从多个选项中选择一个值。
• range：HTML5用于输入精确值不重要的数字的控件。
• reset：一个按钮，将表格的内容重置为默认值。
• search：HTML5用于输入搜索字符串的单行文本字段。换行符会自动从输入值中删除。
• submit：提交表单的按钮。
• tel：HTML5用于输入电话号码的控件。
• text：单行文本字段。换行符会自动从输入值中删除。
• time：HTML5用于输入没有时区的时间值的控件。
• url：HTML5用于输入URL的字段。
• week：HTML5用于输入日期组成的日期的控件，该日期由没有时区的周年数字和星期数字组成。

一些输入类型现在已经过时：

• datetime：HTML5 用于根据UTC时区输入日期和时间（小时，分钟，秒和小数秒）的控件。此功能 已从WHATWG HTML中删除。

属性

全局<input>属性

本节列出了可用于所有表单<input>类型的属性。非全局属性 - 以及在不同<input>类型中指定时具有不同行为的全局属性- 会列在这些类型的单独页面上。

注意：这包括全局HTML属性。

type要呈现的控件的类型。请参阅各种类型的表单<输入>类型，并提供有关每种类型的更多信息的链接。accept如果type属性的值是file，那么这个属性将指示服务器接受的文件类型，否则它将被忽略。该值必须是逗号分隔的唯一内容类型说明符列表：

• 一个以STOP字符开头的文件扩展名（U + 002E）。（如.jpg，.png，.doc）。
• 没有扩展名的有效MIME类型。
• audio/*代表声音文件。HTML5
• video/*代表视频文件。HTML5
• image/*代表图像文件。HTML5

accesskey仅限HTML 4，自HTML5以来已过时用户可按下以将输入焦点切换到控件的单个字符。该属性在HTML5中是全局的。HTML5此属性指示控件的值是否可以由浏览器自动完成。可能的值为：autocomplete

• off：用户必须明确地为每个用途在该字段中输入值，或者文档提供自己的自动完成方法。浏览器不会自动完成条目。
• on：允许浏览器根据用户在以前的使用中输入的值自动完成该值，但on不提供关于用户可能需要输入什么类型数据的更多信息。
• name： 全名。
• honorific-prefix: 前缀或标题（例如“先生”，“女士”，“博士”，“Mlle”）。
• given-name： 名字。
• additional-name： 中间名字。
• family-name： 姓。
• honorific-suffix：后缀（例如“Jr.”，“B.Sc.”，“MBASW”，“II”）。
• nickname
• email
• username
• new-password：新密码（例如，在创建帐户或更改密码时）。
• current-password
• organization-title：职称（如“软件工程师”，“高级副总裁”，“副总经理”）。
• organization
• street-address
• address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1
• country
• country-name
• postal-code
• cc-name：支付工具上给出的全名。
• cc-given-name
• cc-additional-name
• cc-family-name
• cc-number：识别支付工具的代码（例如信用卡号码）。
• cc-exp: 支付工具的到期日期。
• cc-exp-month
• cc-exp-year
• cc-csc：支付工具的安全码。
• cc-type：支付工具的类型（例如Visa）。
• transaction-currency
• transaction-amount
• language： 首选语言; 一个有效的BCP 47语言标签。
• bday：生日
• bday-day
• bday-month
• bday-year
• sex：性别认同（例如女性，女性），自由形式的文本，没有新行。
• tel：完整的电话号码，包括国家代码
  • 额外的tel变量：tel-country-code，tel-national，tel-area-code，tel-local，tel-local-prefix，tel-local-suffix，tel-extension
• url：与该字段相关的其他字段中的公司，人员，地址或联系人信息对应的主页或其他网页。
• photo：与该字段相关的其他字段中与公司，人员，地址或联系信息相对应的照片，图标或其他图像。

有关更多详细信息，请参阅WHATWG标准。

如果未在输入元素上指定autocomplete属性，则浏览器将使用元素表单所有者的autocomplete属性值<input>。表单所有者可以是form此<input>元素是其后代的元素，也可以是其输入元素的表单属性指定其id的表单元素。有关更多信息，请参阅中的autocomplete属性<form>。

该自动完成属性还控制是否Firefox会，不像其他的浏览器，坚持动态禁用状态及（如适用）动态checkedness一个的<input>整个页面加载。持久性功能默认启用。设置autocomplete属性的值以off禁用此功能。即使autocomplete属性通常不适用于<input>其类型，也可以使用。见bug 654072。

对于大多数现代浏览器（包括Firefox 38+，Google Chrome 34+，IE 11+），设置autocomplete属性不会阻止浏览器的密码管理器询问用户是否要存储登录（用户名和密码）字段，以及如果他们同意，从下次用户访问该页面时自动完成登录。查看自动完成属性和登录字段。

autofocusHTML5这个布尔属性允许您指定表单控件在页面加载时应该有输入焦点，除非用户覆盖它（例如通过键入不同的控件）。文档中只有一个表单元素可以具有autofocus属性，该属性是布尔值。如果type属性设置为hidden（即不能自动将焦点设置为隐藏控件），则不能应用它。请注意，控件的聚焦可能发生在事件触发之前DOMContentLoaded。capture

当type属性的值为file时，此布尔属性的存在表示使用媒体捕获机制直接从设备环境捕获媒体是首选。

checked

当type属性的值为radio或checkbox时，此布尔属性的存在表示该控件是默认选中的，否则将被忽略。

与其他浏览器不同，Firefox默认会在页面加载时保持<input>的动态选中状态。 使用autocomplete属性来控制此功能。

disabled

此布尔属性指示表单控件不可用于交互。特别是，click事件不会在禁用控件上发送。此外，禁用的控件的值不随窗体一起提交。

与其他浏览器不同，Firefox默认会在页面加载时保持<input>的动态禁用状态。 使用autocomplete属性来控制此功能。

formHTML5输入元素与其关联的表单元素（其表单所有者）。 该属性的值必须是同一文档中<form>元素的ID。 如果未指定此属性，则此<input>元素必须是<form>元素的后代。 该属性使您可以将<input>元素放置在文档中的任何位置，而不仅仅是其表单元素的后代。 一个输入只能与一个form相关联.format HTML5一个程序的URI，它处理输入元素提交的信息，如果它是一个提交按钮或图像。 如果指定，它将覆盖元素表单的action属性owner.formenctypeHTML5如果input元素是提交按钮或图像，则此属性指定用于将表单提交到服务器的内容的类型。 可能的值是：

• application/x-www-form-urlencoded：如果未指定属性，则为默认值。
• multipart/form-data：如果您使用<input>的type属性设置为的元素，请使用此值file。
• text/plain

如果指定了此属性，它将覆盖enctype元素的表单所有者的属性。

formmethodHTML5如果输入元素是提交按钮或图像，则此属性指定浏览器用于提交表单的HTTP方法。可能的值是：

• post：表单中的数据包含在表单的正文中并发送到服务器。
• get：来自表单的数据被附加到表单属性URI，并带有'？' 作为分隔符，并将生成的URI发送到服务器。当表单没有副作用并且只包含ASCII字符时使用此方法。

如果指定，则此属性将覆盖method元素的表单所有者的属性。

formnovalidateHTML5如果输入元素是提交按钮或图像，则此布尔属性指定在提交表单时不会验证表单。如果指定了此属性，它将覆盖novalidate该元素的表单所有者的属性。HTML5如果输入元素是提交按钮或图像，则此属性是一个名称或关键字，用于指示提交表单后收到的响应的显示位置。这是浏览上下文的名称或关键字（例如选项卡，窗口或内联框架）。如果指定了该属性，它将覆盖元素表单所有者的属性。以下关键字具有特殊含义：formtargettarget

• _ self：将响应加载到与当前浏览环境相同的浏览环境中。如果未指定属性，则此值为默认值。
• _blank：将响应加载到新的未命名浏览上下文中。
• _parent：将响应加载到当前父浏览上下文中。如果没有父项，该选项的行为方式与_self。
• _top：将响应加载到顶级浏览上下文中（即浏览上下文是当前祖先的浏览上下文，并且没有父代）。如果没有父项，该选项的行为方式与_self。

heightHTML5如果type属性的值是image，则此属性定义为按钮显示的图像的高度。HTML5提示要显示哪个键盘的浏览器。此属性适用于type属性的值为文本，密码，电子邮件或网址的情况。可能的值是：inputmode

• verbatim：字母数字，非散文内容，如用户名和密码。
• latin：使用用户首选语言的拉丁文脚本输入，并启用文本预测等输入辅助功能。用于人机交互，如搜索框。
• latin-name：拉丁文，但用于人名。
• latin-prose：拉丁文，但有更积极的打字艾滋病。用于即时消息或电子邮件等人与人之间的交流。
• full-width-latin：拉丁文散文，但用于用户的辅助语言。
• kana：假名或romaji输入，通常是平假名输入，使用全角字符，支持转换为汉字。用于日文文本输入。
• katakana：片假名输入，使用全角字符，支持转换为汉字。用于日文文本输入。
• numeric：数字输入，包括数字0到9的键，用户首选的千位分隔符以及用于指示负数的字符。用于数字代码（例如信用卡号码）。对于实际的数字，更喜欢使用<input type =“number”>
• tel：电话输入，包括星号和英镑键。如果可能，请使用<input type =“tel”>。
• email：电子邮件输入。如果可能，请使用<input type =“email”>。
• url：网址输入。如果可能，请使用<input type =“url”>。

listHTML5标识要向用户建议的预定义选项列表。该值必须是同一文档中<datalist>元素的ID。浏览器仅显示该输入元素的有效值的选项。当类型属性的值为hidden, checkbox, radio, file或按钮类型时，该属性将被忽略.maxHTML5项目的最大值为（数字或日期时间）值，该值不得小于其最小值（最小属性）值.maxlength如果type属性的值是text, email, search, password, tel,或 url，则此属性指定用户可以输入的最大字符数（以UTF-16代码单位表示）。对于其他控件类型，它被忽略。它可以超过size属性的值。如果没有指定，用户可以输入不限数量的字符。指定负数会导致默认行为（即用户可以输入不限数量的字符）。仅当属性的值发生变化时才计算约束.minHTML5此项目的最小（数字或日期时间）值，该值不得大于其最大值（max属性）值.minlengthHTML5如果type属性的值是text, email, search, password, tel, 或 url，此属性指定用户可以输入的最少字符数（以Unicode代码点数）。对于其他控件类型，将忽略它.multipleHTML5此布尔属性指示用户是否可以输入多个值。此属性适用于type属性设置为电子邮件或文件的情况，否则它将被忽略.name控件的名称，它以表单data.patternHTML5A提交的正则表达式来检查控件的值。该模式必须匹配整个值，而不仅仅是一些子集。使用title属性来描述模式以帮助用户。此属性适用于type属性值为text, email, search, password, tel, 或url的情况，否则将被忽略。正则表达式语言与JavaScript RegExp算法相同，其中'u'参数使得它将模式视为一系列unicode代码点。该模式没有被正向斜线包围。placeholderHTML5A向用户提示可以在控件中输入的内容。占位符文本不得包含回车符或换行符。

注意：不要使用placeholder属性而非<label>元素，它们的用途是不同的。<label>属性描述了表单元素的作用（即，它指示了期望的信息类型），并且该placeholder属性是关于内容应该采取的格式的暗示。在某些情况下，placeholder属性永远不会显示给用户，所以如果没有它，表单必须是可以理解的。

readonlyHTML5该属性表示用户不能修改控件的值。属性的值是无关紧要的。如果您需要对输入值进行读写访问，请不要添加“只读”属性。如果type属性的值是hidden, range, color, checkbox, radio, file或按钮类型（如button 或submit），则忽略它.requiredHTML5此属性指定用户必须在提交表单之前填写值。当隐藏类型为hidden, image或按钮类型（submit, reset, 或button）时，不能使用它。 The：optional和:required的CSS伪类将适用于该字段.selectionDirectionHTML5选择发生的方向。

如果选择是从左到右在LTR语言环境中进行，或者从RTL语言环境中的从右到左进行，则选择“向前”;如果选择是在相反方向进行，则选择"forward"。在可能不知道该值的平台上，值可以是“无”;例如，在macOS上，默认方向为"backward"，然后当用户开始使用键盘修改选择时，这将改变以反映选择展开的方向.selectionEnd将元素的文本内容偏移到最后选择的字符。

如果没有选择，则此值指示当前文本输入光标位置后面的字符的偏移量（即下一个输入的字符将占据的位置）.selectionStart第一个选定字符的元素文本内容的偏移量。如果没有选择，则此值指示当前文本输入光标位置（即下一个输入的字符将占用的位置）后字符的偏移量.size控件的初始大小。该值以像素为单位，除非type属性的值是文本或密码，在这种情况下，它是整数个字符。从HTML5开始，仅当type属性设置为text, search, tel, url, email, 或password时，此属性才适用，否则将忽略它。另外，尺寸必须大于零。如果您不指定大小，则使用默认值20。 HTML5只是声明“用户代理应确保至少有许多字符可见”，但不同的字符在某些字体中可能具有不同的宽度。在某些浏览器中，即使大小至少定义为x，某个具有x个字符的字符串也不会完全可见。xspellcheckHTML5将此属性的值设置为true表示该元素需要检查其拼写和语法。缺省值表示该元素将根据默认行为进行操作，可能基于父元素自己的拼写检查值。值为false表示不应检查该元素。如果type属性的值为image，则此属性指定要在图形提交按钮上显示的图像位置的URI，否则将忽略它.stepHTML5Works with min和最大属性来限制可以设置数字或日期时间值的增量。它可以是字符串任意或正数的浮点数。如果此属性未设置为任何值，则控件仅接受大于步骤值的倍数的值，该值大于HTML 4中特定的minimum.tabindex元素，HTML5中的全局值当前文档的标签导航顺序中元素的位置。仅使用mapHTML 4，自HTML5以来已过时用作图像映射的<map>元素的名称.value控件的初始值。该属性是可选的，除非type属性的值是radio或checkbox。

请注意，重新加载页面时，如果在重新加载之前更改了值，则Gecko和IE 将忽略HTML源中指定的值。widthHTML5如果type属性的值是image，则此属性定义为按钮显示的图像的宽度。

非标准<input>属性

autocapitalize是Chrome和iOS Safari Mobile 使用的非标准属性，用于控制是否以及如何在文本值由用户输入/编辑时自动大写。iOS 5及更高版本中提供了不推荐使用的值。可能的值是：

• none：完全禁用自动大写。
• sentences：自动大写句子的第一个字母。
• words：自动大写单词的第一个字母。
• characters：自动大写所有字符。
• on：自iOS 5以来已弃用。
• off：自iOS 5以来已弃用。

autocapitalizeSafari HTML参考中的文档。autocorrect是Safari支持的非标准属性，用于控制在用户输入/编辑文本值时是否应启用自动更正<input>。可能的属性值是：

• on：启用自动更正。
• off：禁用自动更正。

Safari HTML Reference中的autocorrect文档.incremental这是WebKit（Safari）和Blink（Chrome）支持的非标准属性，仅适用于search类型。如果该属性存在，则无论其值是什么，<user>在用户编辑文本值时触发search事件。该事件仅在自最近一次按键操作后执行定义的超时后触发，并且新键击会重置超时。换句话说，事件发射被消除。如果该属性不存在，则只有在用户明确启动搜索时才会触发搜索事件（例如，在字段内按下Enter键）。 Safari HTML Referencemozactionhint中的增量文档指定用于确定如何在具有虚拟键盘的移动设备上标记输入密钥的“操作提示”。支持的值是go, done, next, search, 和 send。这些会自动映射到适当的字符串，并且不区分大小写.results这是Safari支持的非标准属性，仅适用于search类型。它用于控制应在过去的search查询的<input>的本机下拉列表中显示的最大条目数。它的值应该是一个非负十进制整数.webkitdirectoryThis Boolean属性指示type属性是文件时使用的选择器是否只允许选择目录.x-moz-errormessage Mozilla扩展允许您指定错误消息以在一个字段没有成功验证。

例子

您可以在<input>在覆盖每个单独类型的页面上找到多个元素使用示例- 请参阅表单<input>类型，还可以参阅文章顶部的Live示例。

规格

浏览器兼容性