HTML input 类型

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

请注意:本篇文章并未完全优化完成。其中不明之处,建议参考来源网站。因来源网站为英文原文,对某些字词的解释,和翻译可能有所出入。并且本文排版没有完全遵循原文。

HTML <input>元素用于创建基于web的交互式表单控件,以接受来自用户的数据; 根据设备和用户代理的不同,可以使用多种类型的输入数据和控件,具体取决于设备和user agent。由于输入类型和属性的组合数量众多,该元素是所有HTML中最强大,最复杂的元素之一。

内容分类流动区域; 内容区域; 交互式内容(如果不是处于hiddenhidden状态); 列表,可标签,可提交,可重置,与表单相关的元素。
允许的内容无,这是一个空元素
标签省略必须有开始标签但不必有结束标签。
允许的祖先元素任何元素都可以包含语句型元素。
允许的无障碍网络应用type=buttonlinkmenuitemmenuitemcheckboxmenuitemradioradioswitchtabtype=checkboxbuttonmenuitemcheckboxoptionswitchtype=imagelinkmenuitemmenuitemcheckboxmenuitemradioradioswitchtype=radiomenuitemradiotype=color|date|datetime|datetime-local|email|file: Nonetype=hidden|month|number|password|range|research: Nonetype=search|submit|tel|text|url|week: None
DOM 接口HTMLInputElement

<input> 类型

<input>的工作方式相当程度上取决于type属性的值,不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性,则采用的默认类型为 text

可用的值包括:

Type描述基础例子Spec
button没有默认行为的按钮,上面显示 value 属性的值,默认为空。
checkbox复选框,可设为选中或未选中。
color用于指定颜色的控件;在支持的浏览器中,激活时会打开取色器。HTML5
date输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。  HTML5
datetime-local输入日期和时间的控件,不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。HTML5
email编辑邮箱地址的区域。类似 text 输入,但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden不显示的控件,其值仍会提交到服务器。举个例子,右边就是一个隐形的控件。
image带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失,alt 属性就会显示。
month输入年和月的控件,没有时区。HTML5
number用于输入数字的控件。如果支持的话,会显示滚动按钮并提供缺省验证(即只能输入数字)。拥有动态键盘的设备上会显示数字键盘。
password单行的文本区域,其值会被遮盖。如果站点不安全,会警告用户。
radio单选按钮,允许在多个拥有相同 name 值的选项中选中其中一个。
range此控件用于输入不需要精确的数字。控件是一个范围组件,默认值为正中间的值。同时使用htmlattrdefmin   和 htmlattrdefmax来规定值的范围。  HTML5
reset此按钮将表单的所有内容重置为默认值。不推荐。
search用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮,用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。HTML5
submit用于提交表单的按钮。
tel用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。HTML5
text默认值。单行的文本区域,输入中的换行会被自动去除。
time用于输入时间的控件,不包括时区。HTML5
url用于输入 URL 的控件。类似 text 输入,但有验证参数,在支持动态键盘的设备上有相应的键盘。HTML5
week用于输入以年和周数组成的日期,不带时区。
废弃的值
datetime  用于输入基于UTC时区的日期和时间(时、分、秒及秒的小数部分)。

属性

<input>元素因其属性而非常强大。上面示例中描述的type属性是最重要的。由于每个<input>元素(无论类型如何)都基于HTMLInputElement接口,因此从技术上讲,它们共享完全相同的一组属性。但是,实际上,大多数属性仅对输入类型的特定子集有影响。另外,某些属性影响输入的方式取决于<input>type属性,以不同的方式影响不同的输入类型。

本节提供了一个表格,其中列出了所有属性以及简短说明。更详细地描述了每个属性以及与它们关联的输入类型。

特定输入类型所独有的属性(或所有输入类型所共有的属性,但在给定输入类型上使用时具有特殊行为)则记录在这些类型的页面上。此元素包括全局属性。与之相关的那些特别重要的部分<input>将突出显示。(这段意思即为:某些特殊的属性,需要在各自属性页面查看更多详细的内容)

属性相关的 type描述
acceptfile用于规定文件上传控件中期望的文件类型
altimageimage type的alt属性,是可访问性的要求。
autocomplete所有用于表单的自动填充功能
autofocus所有页面加载时自动聚焦到此表单控件
capturefile文件上传控件中媒体拍摄的方式
checkedradio, checkbox用于控制控件是否被选中
dirnametext, search表单区域的一个名字,用于在提交表单时发送元素的方向性
disabled所有表单控件是否被禁用
form所有将控件和一个form元素联系在一起
formactionimage, submit用于提交表单的URL
formenctypeimage, submit表单数据集的编码方式,用于表单提交
formmethodimage, submit用于表单提交的HTTP方法 
formnovalidateimage, submit提交表单时绕过对表单控件的验证
formtargetimage, submit表单提交的浏览上下文
heightimage和 <img> 的 height 属性相同;垂直方向
list绝大部分自动填充选项的<datalist> 的id值
max数字 type最大值
maxlengthpassword, search, tel, text, urlvalue 的最大长度(最多字符数目)
min数字 type最小值
minlengthpassword, search, tel, text, urlvalue 的最小长度(最少字符数目)
multipleemail, file布尔值。 是否允许多个值
name所有input表单控件的名字。以名字/值对的形式随表单一起提交
patternpassword, text, tel匹配有效 value 的模式(pattern)
placeholderpassword, search, tel, text, url当表单控件为空时,控件中显示的内容
readonly绝大部分布尔值。存在时表示控件的值不可编辑
required绝大部分布尔值。表示此值为必填项或者提交表单前必须先检查该值
sizeemail, password, tel, text控件的大小
srcimage<img> 的 src 属性一样;图像资源的地址
step数字type有效的递增值
type所有input表单控件的type
value所有表单控件的值。以名字/值对的形式随表单一起提交
widthimage与 <img> 的 width 属性一样

一些额外的非标准属性会在标准属性后面列出。

个别属性

accept

accept属性仅对file输入类型有效,该属性定义在file上载控件中可选择哪些文件类型。请参阅  文件输入类型。

image仅对alt按钮有效  ,alt属性为图像提供替代文本,如果缺少图像src或无法加载src,则显示属性值。请参阅  图像输入类型。

autocomplete

(不是布尔属性!)该autocomplete属性以空格分隔的字符串作为其值,该字符串描述输入应提供的自动完成功能的类型(如果有)。自动完成的一种典型实现方式是简单地调用在同一输入字段中输入的先前值,但是可以存在更复杂形式的自动完成。例如,浏览器可以与设备的联系人列表集成,以在电子邮件输入字段中自动完成电子邮件地址。见价值观的HTML autocomplete属性的允许值。

autocomplete属性是有效的hiddentextsearchurltelemaildatemonthweektimedatetime-localnumberrangecolor,和password。该属性对于输入类型不为所有输入类型的返回数字或文本数据,是有效的,除了没有影响  checkboxradiofile,或任何按钮类型。

有关其他信息,请参见HTML自动完成属性。有关密码安全性的信息以及与其他输入类型相比有何autocomplete细微差别hiddenautofocus

一个布尔属性,如果存在,则指示在页面完成加载时(或在显示<dialog>包含元素的情况下)输入应自动具有焦点。

注意:具有autofocus属性的元素可能会在DOMContentLoaded事件触发之前获得焦点。

该文档中的元素不得超过一个autofocus。该  autofocus 属性不能在类型的输入上使用hidden,因为隐藏的输入无法集中。

如果放置多个元素,则第一个具有属性的元素将获得focus。

警告:自动聚焦表单控件会使使用屏幕阅读技术的视障人士和有认知障碍的人感到困惑。当autofocus被分配,屏幕阅读器“瞬移”的用户无需事先警告他们表单控件。

为了获得更好的可用性,请避免使用autofocus。自动聚焦于窗体控件会导致页面在加载时滚动。焦点还会导致动态键盘显示在某些触摸设备上。屏幕阅读器将宣布接受焦点的表单控件的标签,而屏幕阅读器将不会在标签之前宣布任何内容,并且小型设备上的视力用户将同样错过由先前内容创建的上下文。 capture

filecapture属性在HTML Media Capture规范中引入,并且仅对输入类型有效,该属性定义了应使用哪种媒体(麦克风,视频或摄像机)来捕获新文件,以便file在支持方案中使用上载控件进行上载。请参阅  文件输入类型。checked

均有效radiocheckbox类型,checked是一个布尔属性。如果存在于单选类型上,则表示该单选按钮是同名单选按钮组中当前选中的按钮。如果checkbox类型上存在,则表示默认情况下(页面加载时)该复选框处于选中状态。它并  没有  指明该复选框是否正在检查:如果该复选框的状态改变时,该内容属性不反映更改。(只有HTMLInputElementcheckedIDL属性被更新。)

注意:与其他输入控件不同,复选框和单选按钮的值如果当前为,则仅包含在提交的数据中checked。如果是,则提交已检查控件的名称和值。

例如,如果一个复选框,其namefruit具有valuecherry,而复选框被选中,提交表单数据将包括fruit=cherry。如果该复选框未激活,则它根本不会在表单数据中列出。value复选框和单选按钮的默认值为ondirname

有效textsearch输入类型止,dirname属性使提交元件的方向性的。包含时,表单控件将提交两个名称/值对:第一个是名称值对,第二个是dirname作为名称的as的值,并带有浏览器的ltrrtl由浏览器设置。

<form action="page.html" method="post">
  <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label>
  <input type="submit"/>
</form>
<!-- page.html?fruit=cherry&fruit.dir=ltr -->

提交以上表单后,输入将同时发送namevaluefruit=cherrydirname/方向对fruit.dir=ltrdisabled

一个布尔属性,如果存在,则指示用户不应与输入进行交互。禁用的输入通常使用较暗的颜色或使用某种其他形式的字段无法使用的指示来呈现。

具体而言,禁用的输入不会接收click事件,并且禁用的输入不会与表单一起提交。

注:虽然不是规范要求的,Firefox将默认坚持动态禁用状态<input>跨页面加载。使用autocomplete属性控制此功能。form

一个字符串,指定<form>与输入关联的元素(即,其表单owner)。该字符串的值,如果存在的话,必须符合id一个的<form>在同一文件中的元素。如果未指定此属性,则该<input>元素与最近的包含表单相关联(如果有)。

form属性使您可以将输入放置在文档中的任何位置,但将其包含在文档中其他位置的表单中。

注意:输入只能与一种形式相关联。formaction

仅对imagesubmit输入类型有效。有关更多信息,请参见提交输入类型。formenctype

仅对imagesubmit输入类型有效。有关更多信息,请参见提交输入类型。formmethod

仅对imagesubmit输入类型有效。有关更多信息,请参见提交输入类型。formnovalidate

仅对imagesubmit输入类型有效。有关更多信息,请参见提交输入类型。formtarget

仅对imagesubmit输入类型有效。有关更多信息,请参见提交输入类型。height

image仅对输入按钮有效  ,height是显示以表示图形提交按钮的图像文件的高度。请参阅  图像输入类型。id

全局属性对所有元素(包括所有输入类型)均有效,它定义一个唯一标识符(ID),该标识符在整个文档中必须是唯一的。其目的是在链接时识别元素。该值用作<label>for属性值,以将标签与表单控件链接。请参阅下面的标签元素inputmode

全局值对所有元素均有效,它向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。值包括nonetexttelurlemailnumericdecimal,和searchlist

list属性的值是位于同一文档id中的<datalist>元素的。会<datalist>  提供预定义值的列表,以建议用户进行此输入。type建议选项中不包括列表中与兼容的所有值。提供的值是建议而不是要求:用户可以从此预定义列表中选择或提供其他值。

https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/datalist?revision=1624256

它是有效的textsearchurltelemaildatemonthweektimedatetime-localnumberrange,和color。 

每规格,list属性不被支持hiddenpasswordcheckboxradiofile,或任何按钮类型。

根据浏览器的不同,用户可能会看到建议的自定义调色板,沿范围的刻度线,甚至看到输入像选择一样打开,但允许使用未列出的值。查看浏览器兼容性表中的其他输入类型。

参见<datalist>元素。max

有效期datemonthweektimedatetime-localnumber,和range,它定义了在允许值的范围内的最大值。如果在value元素中输入的内容超出此范围,则该元素将无法通过约束验证。如果max属性的值不是数字,则元素没有最大值。

有一种特殊情况:如果数据类型是周期性的(例如日期或时间),则的值  max 可能小于的值  min,这表明范围可能会回绕;例如,这允许您指定从10 PM到4 AM的时间范围。maxlength

有效期textsearchurltelemail,和password,它定义字符的最大数目(作为UTF-16代码单位)的用户可输入到该字段。此值必须是整数值0或更高。如果未maxlength指定no 或指定了无效值,则该字段没有最大长度。此值还必须大于或等于的值minlength

如果在字段中输入的文本长度大于UTF-16代码单元长,则输入将无法通过约束验证maxlength。默认情况下,浏览器阻止用户输入的字符超过该maxlength属性所允许的字符。有关更多信息,请参见客户端验证min

有效期datemonthweektimedatetime-localnumber,和range,它定义了在允许值的范围的最负的值。如果value输入的元素小于此值,则元素将无法通过约束验证。如果min属性的值不是数字,则元素没有最小值。

该值必须小于或等于max属性的值。如果min属性存在但未指定或无效,则不会min应用任何值。如果min属性有效且非空值小于min属性允许的最小值,则约束验证将阻止表单提交。有关更多信息,请参见客户端验证

有一种特殊情况:如果数据类型是周期性的(例如日期或时间),则的值  max 可能小于的值  min,这表明范围可能会回绕;例如,这允许您指定从10 PM到4 AM的时间范围。minlength

有效期textsearchurltelemail,和password,它定义的最小字符数目(UTF-16代码单位)的用户可输入到输入字段中。该值必须是一个小于或等于由所指定的值的非负整数值maxlength。如果未minlength指定no ,或者指定了无效值,则输入没有最小长度。

如果在字段中输入的文本长度小于UTF-16代码单元的长度,则输入将无法通过约束验证minlength,从而阻止表单提交。有关更多信息,请参见客户端验证multiple

如果设置了布尔多重属性,则意味着用户可以在电子邮件小部件中输入逗号分隔的电子邮件地址,或者可以使用file输入选择多个文件。请参阅电子邮件文件输入类型。name

一个字符串,指定输入控件的名称。提交表单数据时,此名称与控件的值一起提交。

名字叫什么

考虑name必需的属性(即使不是必需属性)。如果输入未name  指定或name为空,则输入的值不会与表单一起提交!(也不会发送禁用的控件,未选中的单选按钮,未选中的复选框和重置按钮。)

有两种特殊情况:

  1.  _charset_:如果用作<input>type元素的名称,则用户代理会自动将hidden输入的value内容设置为用于提交表单的字符编码。
  2. isindex:出于历史原因,isindex不允许使用该名称。
name 和单选按钮

名称的属性创建单选按钮独特的行为。

一次只能检查同名单选按钮组中的一个单选按钮。选择该组中的任何单选按钮会自动取消选择同一组中任何当前选择的单选按钮。如果提交了表单,则将选中的一个单选按钮的值与名称一起发送,

跳入一系列同名的单选按钮组时,如果选中一个,则该单选按钮将获得焦点。如果未按源顺序将它们分组在一起,则如果选中了该组中的一个,则在遇到该组中的第一个时,将开始在该组中切换,从而跳过所有未选中的项。换句话说,如果选中一个,则制表符将跳过组中未选中的单选按钮。如果未选中任何一项,则当到达相同名称组中的第一个按钮时,单选按钮组将获得焦点。

一旦某个组中的一个单选按钮具有焦点,即使没有按源顺序将这些单选按钮组合在一起,使用箭头键也将浏览所有相同名称的单选按钮。 

HTMLFormElement.elements

给输入元素一个时name,该名称将成为拥有表单元素HTMLFormElement.elements属性的属性。如果您有一个输入name设置为guest,另一个输入设置namehat-size,则可以使用以下代码:

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

当这个代码运行,guestName将是HTMLInputElementguest字段,hatSize为对象hat-size场。

警告:避免给表单元素a name对应于表单的内置属性,因为您将使用对相应输入的引用覆盖预定义属性或方法。pattern

pattern属性在指定时是一个正则表达式,输入value必须匹配该正则表达式才能使值通过约束验证。该类型必须是有效的JavaScript正则表达式,该正则表达式已由RegExp类型使用,并且已在我们的正则表达式指南中进行了说明;该'u'标志在编译正则表达式时指定,因此该模式被视为Unicode代码点的序列,而不是ASCII。模式文本周围不能指定正斜杠。

如果pattern属性存在但未指定或无效,则不应用任何正则表达式,并且将完全忽略此属性。如果pattern属性有效且非空值与模式不匹配,约束验证将阻止表单提交。

提示:如果使用该pattern属性,请在附近添加说明文字,以告知用户期望的格式。您还可以包括一个title属性,以说明与模式匹配的要求。大多数浏览器都会将此标题显示为工具提示。辅助功能需要可见的解释。工具提示是增强功能。

有关更多信息,请参见客户端验证placeholder

placeholder属性是一个字符串,可向用户提供有关该字段中需要什么样的信息的简短提示。它应该是用来说明预期数据类型的单词或短语,而不是说明性消息。文字不得包含回车符或换行符。

注意:placeholder属性在语义上不如其他解释表单的方式有用,并且可能导致内容意外的技术问题。看到标签<输入>:输入(表格输入)元件获得更多信息。readonly

一个布尔属性,如果存在,则指示用户不应编辑输入的值。的readonly属性被支撑  textsearchurltelemaildatemonthweektimedatetime-localnumber,和password输入类型。

有关更多信息,请参见HTML属性:readonlyrequired

required是一个布尔属性,如果存在,则指示用户必须先输入一个值,然后才能提交拥有表单。该required属性支持  textsearchurltelemaildatemonthweektimedatetime-localnumberpasswordcheckboxradio,和file

有关更多信息,请参见客户端验证HTML属性:requiredsize有效期为emailpasswordtel,和textinput唯一的类型。指定显示多少输入。基本上产生与设置CSS width属性相同的结果,但有一些特殊之处。值的实际单位取决于输入类型。对于passwordtext它是字符数(或em单位),pixel对于其他字符则是s。CSS宽度优先于size属性。src

image仅对输入按钮有效  ,src是字符串,指定要显示以表示图形提交按钮的图像文件的URL。请参阅  图像输入类型。step

对于数字输入类型(包括number,日期/时间输入类型和)有效range,该step属性是一个数字,用于指定值必须遵循的粒度。

如果未明确包含,则step对于number和,默认为1,range对于日期/时间输入类型,默认为1 单位类型(秒,周,月,日)。该值必须是一个正数(整数或浮点数)或特殊值any,这意味着不暗示步进,并且允许任何值(除非其他约束,例如minmax)。

如果any未显式设置,则number,日期/时间输入类型和range输入类型的min有效值等于步进的基础-步进值的值和增量,直到max指定的值为止。

例如,如果您有<input type="number" min="10" step="2">,则任何偶数10或更大的整数都是有效的。如果省略,则<input type="number">任何整数均有效,但浮点数(如4.2)无效,因为  step默认为1。为4.2使之有效,step必须将其设置any为,0.1、0.2,否则任何min值都必须是以结尾的数字.2,例如<input type="number" min="-5.2">

注意:如果用户输入的数据不遵循步进配置,则该值在约束验证中被视为无效,并将与:invalid伪类匹配。

number输入的默认步进值是1,仅允许输入整数,除非步进基数不是整数。默认的步进值为time1秒(900等于15分钟)。

有关更多信息,请参见客户端验证tabindex

全局属性对所有元素(包括所有输入类型)均有效,一个整数属性,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航。由于除隐藏类型的输入之外的所有输入类型都是可聚焦的,因此不应在表单控件上使用此属性,因为这样做将需要管理文档中所有元素的聚焦顺序,如果这样做,则可能会损害可用性和可访问性错误地。title

全局属性对所有元素(包括所有输入类型)均有效,其中包含表示与该元素所属元素相关的咨询信息的文本。这样的信息通常可以但不一定作为工具提示显示给用户。标题不应该用作表单控件目的的主要解释。而是,使用将属性设置为表单控件的属性的<label>元素。请参阅下面的标签foridtype

一个字符串,指定要呈现的控件的类型。例如,要创建一个复选框,请使用值checkbox。如果省略(或指定了未知值),text则使用输入类型,并创建纯文本输入字段。

允许的值在上面的<input>类型中列出。value

输入控件的值。在HTML中指定时,这是初始值,此后可以使用JavaScript访问相应HTMLInputElement对象的value属性随时对其进行更改或检索。该value属性始终是可选的,但应考虑强制要求checkboxradiohiddenwidth

image仅对输入按钮有效  ,width是显示以表示图形提交按钮的图像文件的宽度。请参阅  图像输入类型。

非标准属性

以下非标准属性在某些浏览器上也可用。通常,除非没有帮助,否则应避免使用它们。

属性描述
autocorrect指示是否自动更正字符串onoff仅限Safari。
incrementalsearch在用户仍在编辑字段的值时是否发送重复事件以允许更新实时搜索结果。仅WebKit和Blink(Safari,Chrome,Opera等)。
mozactionhint一个字符串,指示用户在编辑字段时按EnterReturn键时将采取的操作类型;用于确定虚拟键盘上该键的适当标签。仅适用于Android的Firefox。
orient设置范围滑块的方向。仅Firefox。
results先前搜索查询的下拉列表中应显示的最大项目数。仅限Safari。
webkitdirectory一个布尔值,指示是否只允许用户选择一个目录(或多个目录,如果multiple还存在的话)

autocorrect

Safari扩展,该autocorrect属性是一个字符串,它指示在用户编辑此字段时是否激活自动更正。允许的值为:on启用拼写错误的自动更正,以及配置文本替换(如果已配置)的处理。off禁用自动更正和文本替换。incremental

Boolean属性incremental是WebKit和Blink扩展名(因此受Safari,Opera,Chrome等支持),如果存在,它会告诉用户代理将输入作为实时搜索进行处理。当用户编辑字段的值时,用户代理会将search事件发送到HTMLInputElement代表搜索框的对象。这使您的代码可以在用户编辑搜索时实时更新搜索结果。

如果incremental未指定,search则仅在用户显式启动搜索时发送该事件(例如,在编辑字段时按EnterReturn键)。

search事件受速率限制,因此发送事件的频率不会超过实现定义的间隔。mozactionhint

Mozilla扩展程序,由Firefox for Android支持,提供了有关用户在编辑字段时按EnterReturn键将采取何种操作的提示。此信息用于确定Enter在虚拟键盘上的键上使用哪种标签。

注意:已被标准化为全局属性enterkeyhint,但尚未广泛实施。要查看正在Firefox中实施的更改的状态,请参见bug 1490661

允许的值是:godonenextsearch,和send。浏览器使用此提示来决定在回车键上放置什么标签。orientresults

results属性(仅受Safari支持)是一个数字值,可让您覆盖要显示在<input>元素的本机提供的先前搜索查询的下拉菜单中的最大条目数。

该值必须是非负十进制数字。如果未提供或给出了无效值,则使用浏览器的默认最大条目数。webkitdirectory

布尔webkitdirectory属性(如果存在)指示用户在文件选择器界面中只能选择目录。有关HTMLInputElement.webkitdirectory其他详细信息和示例,请参见。

注意:虽然最初只为基于WebKit的浏览器实现,但webkitdirectory也可以在Microsoft Edge以及Firefox 50及更高版本中使用。但是,即使它具有相对广泛的支持,它仍然不是标准的,除非您别无选择,否则不应该使用它。

方法

HTMLInputElement表示<input>DOM中元素的接口提供了以下方法。此外,还包括由父接口指定的那些方法,HTMLElementElementNode,和EventTargetcheckValidity()立即在元素上运行有效性检查,invalid如果值无效,则触发文档在该元素上触发事件。reportValidity()返回true元素的值是否通过有效性检查;否则返回false。否则,返回falseselect()选择的全部内容<input>元素,如果该元素的内容是可选的。对于没有可选文本内容的元素(例如可视颜色选择器或日历日期输入),此方法不执行任何操作。setCustomValidity()设置自定义消息,以在输入元素的值无效时显示。setRangeText()将输入元素中指定字符范围的内容设置为给定的字符串。可使用selectMode参数来控制如何影响现有内容。setSelectionRange()在文本输入元素中选择指定的字符范围。对于未显示为文本输入字段的输入不执行任何操作。stepDown()默认情况下,将数字输入的值减一,或者按指定的单位数减一。stepUp()将数字输入的值增加一或以指定的单位数递增。

的CSS

输入(已替换元素)具有一些不适用于非表单元素的功能。有一些CSS选择器可以根据其UI功能(也称为UI伪类)指定目标表单控件。输入元素也可以使用属性选择器按类型作为目标。还有一些特别有用的属性。 

UI伪类

伪类描述
:enabled任何当前激活的元素都可以被激活(选中,单击,键入等)或接受焦点,并且具有禁用状态,在该状态下不能激活或接受焦点。
:disabled具有禁用状态的任何当前禁用的元素,否则可以激活(选中,单击,键入等)或接受焦点(如果未禁用)。
:read-only元素不可由用户编辑
:read-write用户可以编辑的元素。
:placeholder-shown元件当前显示占位符文本,包括<input>和  <textarea>与所述元件占位符属性本具有,作为然而,没有任何价值。
:default表单元素是一组相关元素中的默认元素。匹配在页面加载或呈现时检查的复选框单选输入类型。
:checked匹配项的复选框单选输入类型当前检查(和(<option>在一个<select>当前选择)。
:indeterminateJavaScript中将不确定属性设置为true的复选框元素,未选中表单中具有相同名称值的所有单选按钮的单选元素以及<progress>处于不确定状态的元素
:valid可以应用约束验证并且当前有效的表单控件。
:invalid已应用约束验证且当前无效的表单控件。匹配一个表单控件,该控件的值与通过其属性(例如required,  patternstep和  max)设置的约束不匹配。
:in-range非空输入,其当前值在minmax属性以及step所指定的范围限制内。
:out-of-range非空输入,其当前值不在最小最大属性指定的范围限制内或不遵循步长约束。
:required<input><select>或设置<textarea> 了required属性的元素。仅匹配可能需要的元素。包含在非必需元素上的属性将不匹配。
:optional<input><select>或未设置属性的<textarea> 元素required。与不必需的元素不匹配。
:blank<input><textarea> 当前没有价值的元素。
:user-invalid与相似:invalid,但在模糊时被激活。匹配无效输入,但仅在用户交互之后匹配,例如通过集中于控件,离开控件或尝试提交包含无效控件的表单。

例子

我们可以根据是否选中复选框来设置复选框标签的样式。在这个例子中,我们的造型colorfont-weight<label>一个检查输入后,立即来了。如果input未选中,则我们尚未应用任何样式。

input:checked + label {
  color: red;
  font-weight: bold;
}
https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/checkbox_label?revision=1624256在CodePen中打开在JSFiddle中打开

属性选择器

使用属性选择器可以根据表单控件的类型来确定其类型。CSS属性选择器仅根据属性的存在或给定属性的值来匹配元素。

/* matches a password input */
input[type="password"] {} 

/* matches a form control whose valid values are limited to a range of values*/ 
input[min][max] {} 

/* matches a form control with with a pattern attribute */
 input[pattern] {}

::占位符

默认情况下,占位符文本的外观是半透明或浅灰色。该::placeholder伪元素是输入的占位符文本。可以使用CSS属性的有限子集来设置样式。

::placeholder {
  color: blue;
}

::first-line在规则::placeholder的选择器中使用的规则中只能使用适用于伪元素的CSS属性的子集。

appearance

appearance属性允许基于操作系统主题将(几乎)任何元素显示为平台本机样式,并删除具有该none值的任何平台本机样式。

您可以将<div>看起来像一个单选按钮,div {appearance: radio;} 或者将看起来像一个复选框[type="checkbox] {appearance: checkbox;},但不这样做。

设置appearance: none会删除平台本机边界,但不会删除功能。

caret-color

CSS caret-color属性是特定于文本输入相关元素的属性,它使您可以设置用于绘制文本输入符号的颜色:

的HTML

<label for="textInput">Note the red caret:</label>
<input id="textInput" class="custom" size="32">

的CSS

input.custom {
  caret-color: red;
  font: 16px "Helvetica", "Arial", "sans-serif"
}

结果

https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/caret-color?revision=1624256

object-position 和 object-fit

在某些情况下(通常涉及非文本输入和专用接口),该<input>元素是替换元素。如果是,则可以使用CSS object-positionobject-fit属性调整元素大小的位置和大小以及其在框架内的位置

造型

有关在HTML元素中添加颜色的更多信息,请参见:

另请参阅:

附加功能

标签

需要使用标签将辅助文字与关联<input>。的<label>元件提供了有关一个形式字段是说明信息总是适当(除了任何布局关注你有)。使用a <label>来解释应该在<input>or中输入什么,这绝不是一个坏主意<textarea>

相关标签

<input><label>元素的语义配对对于辅助技术(例如屏幕阅读器)很有用。通过使用<label>for属性将它们配对,可以将标签绑定到输入,使屏幕阅读器可以更准确地向用户描述输入。

<input>元素旁边没有纯文本是不够的。相反,可用性和可访问性要求包含隐式或显式的内容<label>

<!-- inaccessible -->
<p>Enter your name: <input id="name" type="text" size="30"></p>

<!-- implicit label -->
<p><label>Enter your name: <input id="name" type="text" size="30"></label></p>

<!-- explicit label -->
<p><label for="name">Enter your name: </label><input id="name" type="text" size="30"></p>

第一个示例不可访问:提示和<input>元素之间不存在任何关系。

除了可访问的名称外,标签还为鼠标和触摸屏用户提供了更大的“命中”区域,供用户单击或触摸。将a <label>与an 配对<input>,单击任一将使聚焦<input>。如果使用纯文本“标记”您的输入,则不会发生。将激活区域的提示部分用于输入对于有电机控制条件的人很有帮助。

作为Web开发人员,重要的是,我们永远不要以为人们会知道我们所知道的一切。实际上,使用网络以及通过扩展您的网站而来的人们的多样性保证了您网站的某些访问者的思维过程和/或情况会有所不同,从而导致他们对您的表格的理解与您的理解截然不同,显示标签。

占位符不可访问

placeholder属性使您可以指定一个<input>空白的文本,该文本将显示在元素的内容区域中。绝对不需要占位符来理解您的表格。它不是标签,也不应该用作替代品,因为它不是标签。占位符用于显示示例输入,而不是说明或提示。不仅屏幕阅读器无法访问占位符,而且一旦用户在表单控件中输入任何文本,或者如果表单控件已经具有值,就不会有占位符。具有自动页面翻译功能的浏览器在翻译时可能会跳过属性,这意味着placeholder可能无法翻译。

placeholder如果可以避免,请不要使用该属性。如果需要标记<input>元素,请使用该<label>元素

客户端验证

如上面的UI伪类部分所述,除了使用CSS根据每个输入的当前状态基于UI状态:valid:invalidUI状态设置输入样式外,浏览器还提供对(尝试的)表单提交的客户端验证。在提交表单时,如果它们是未通过约束验证的表单控件,则支持的浏览器将在第一个无效的表单控件上显示错误消息;显示基于错误类型的默认消息或您设置的消息。

某些输入类型和其他属性限制了对于给定输入有效的值。例如,<input type="number" min="2" max="10" step="2">意味着仅数字2、4、6、8或10有效。可能发生几个错误,其中包括一个rangeUnderflow错误,如果该值小于2,rangeOverflow如果大于10,stepMismatch如果该值是在2和10之间的数,但不是一个偶整数(不匹配的要求step属性),或typeMismatch如果该值不是数字。

对于可能值域是周期性的输入类型(即,在最大可能值处,这些值回绕到开头而不是结尾),maxand min属性的值可能会颠倒,这表明允许值的范围始于  min,回绕到最低可能值,然后继续直到  max 达到。这对于日期和时间特别有用,例如,当您希望允许范围是从8 PM到8 AM:

<input type="time" min="20:00" max="08:00" name="overnight">

特定的属性及其值可能导致特定的错误ValidityState

属性保留财产描述
最高validityState.rangeOverflow当值大于max属性定义的最大值时发生
最长长度validityState.tooLong当字符数大于maxlength属性允许的数目时发生
validityState.rangeUnderflow当值小于min属性定义的最小值时发生
最小长度validityState.tooShort当字符数少于minlength属性所需的字符数时发生
图案validityState.patternMismatch当模式属性包含在有效的正则表达式中并且value与之不匹配时发生。
需要validityState.valueMissingrequired属性存在但值是null或未选中radio或checkbox时发生。
validityState.stepMismatch该值与步长增量不匹配。默认增量为1,因此仅整数有效, type="number"不包含step。step="any"永远不会抛出此错误。
类型validityState.typeMismatch当值的类型不正确时发生,例如,电子邮件不包含@或URL不包含协议。

如果表单控件没有必需的属性,则没有值或空字符串也不无效。即使存在以上属性,但和除外'required',空字符串也不会导致错误。

我们可以对接受的值设置限制,支持的浏览器将本地验证这些表单值,并在提交表单时出现错误时警告用户。

除了在表中上述错误,validityState接口包含badInputvalidcustomError 布尔只读属性。有效性对象包括:

对于这些布尔属性中的每一个,值true表示指定的验证可能失败的原因为true(该valid属性除外),这是true元素的值遵循所有约束的情况。

如果出现错误,支持的浏览器会警告用户并阻止提交表单。请注意:如果将自定义错误设置为真实值(空字符串或null除外),则将阻止提交表单。如果没有自定义错误消息,并且其他任何属性都不返回true,则为validtrue,并且可以提交表单。

function validate(input) {
  let validityState_object = input.validity;
  if(validityState_object.valueMissing) {
     input.setCustomValidity('A value is required');
  } else if (input.rangeUnderflow) {
    input.setCustomValidity('Your value is too low');
  } else if (input.rangeOverflow) {
    input.setCustomValidity('Your value is too high');
  } else {
    input.setCustomValidity('');
  }
}

最后一行,将自定义有效性消息设置为错误字符串至关重要。如果用户出错,并且设置了有效性,那么即使所有值都有效,也将无法提交,直到消息为null

如果要在字段验证失败时显示自定义错误消息,则需要使用(和相关)元素上可用的约束验证功能<input>。采取以下形式:

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>Submit</button>
</form>

如果您尝试提交没有有效填写的表单或与匹配的值,则基本的HTML表单验证功能将导致此错误消息生成默认错误消息pattern

如果要显示自定义错误消息,则可以使用如下所示的JavaScript:

const nameInput = document.querySelector('input');
const form = document.querySelector('form');

nameInput.addEventListener('input', () => {
  nameInput.setCustomValidity('');
  nameInput.checkValidity();
});

nameInput.addEventListener('invalid', () => {
  if(nameInput.value === '') {
    nameInput.setCustomValidity('Enter your username!');
  } else {
    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
  }
});

该示例如下所示:

https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/input$samples/Client-side_validation?revision=1624256

简单来说:

  • 每当checkValidity()通过input事件处理程序运行方法来更改其值时,我们都会检查输入元素的有效状态。
  • 如果该值无效,invalid则引发一个事件,并invalid运行事件处理程序函数。在此函数内,我们使用一个if()块来确定该值是无效的(因为它为空,还是因为它与模式不匹配),并设置一个自定义有效性错误消息。
  • 结果,如果在按下提交按钮时输入值无效,则将显示自定义错误消息之一。
  • 如果有效,它将按照您的期望进行提交。为此,必须通过调用setCustomValidity()空字符串值来取消自定义有效性。因此,每次input事件发生时我们都会这样做。如果您不这样做,并且先前已设置了自定义有效性,那么即使当前输入包含提交时的有效值,该输入也将注册为无效。

注意:始终验证客户端和服务器端的输入约束。约束验证并不能消除服务器端验证的需要。无效的值仍然可以由较旧的浏览器或不良行为者发送。

注意:Firefox支持x-moz-errormessage许多版本的专有错误属性,该属性允许您以类似方式设置自定义错误消息。自版本66起已将其删除(请参见bug 1513890)。

本土化

某些<input>类型的允许输入取决于语言环境。在某些语言环境中,1,000.00是有效数字,而在其他语言环境中,输入此数字的有效方法是1.000,00。

Firefox使用以下启发式方法来确定语言环境以验证用户的输入(至少用于type="number"):

  • 尝试使用元素或其任何父元素上的langxml:lang属性指定的语言。
  • 尝试使用任何Content-LanguageHTTP标头指定的语言。要么,
  • 如果未指定,请使用浏览器的语言环境。

技术摘要

内容类别流内容,列出的,可提交的,可重置的,与表单相关的元素,短语内容。如果type不是hidden,则为可标记元素,可显示内容。
允许的内容没有,这是一个空元素
标签遗漏必须具有开始标签,并且不能具有结束标签。
准父母接受短语内容的任何元素。
隐性ARIA角色type=button: buttontype=checkbox: checkboxtype=email没有list属性:textbox具有list属性:comboboxtype=image: buttontype=number: spinbuttontype=radio: radiotype=range: slidertype=reset: buttontype=search没有list属性:searchbox具有list属性:comboboxtype=submit: buttontype=tel没有list属性:textbox具有list属性:comboboxtype=text没有list属性:textbox具有list属性:comboboxtype=url没有list属性:textbox具有list属性:comboboxtype=color|date|datetime-local|file|hidden|month|password|time|week没有相应的角色
允许的ARIA角色type=buttonlinkmenuitemmenuitemcheckboxmenuitemradiooptionradioswitchtabtype=checkboxbutton当用于aria-pressedmenuitemcheckboxoptionswitchtype=imagelinkmenuitemmenuitemcheckboxmenuitemradioradioswitchtype=radio: menuitemradiotype=textlist属性:comboboxsearchboxspinbuttontype=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week text具有list属性:role不允许
DOM介面HTMLInputElement

技术指标

规格状态评论
HTML Living Standard 规范
中“ <input>”的定义。
生活水平
HTML Media Capture
该规范中“捕获属性”的定义。
建议添加capture属性
HTML5
该规范中“ <input>”的定义。
建议
HTML 4.01规范规范
中“ <form>”的定义。
建议

无障碍问题

标签

当包含输入时,可访问性要求是在侧面添加标签。这是必需的,以便那些使用辅助技术的人可以分辨输入的内容。同样,单击或触摸标签可将焦点放在标签的关联表单控件上。这改善了视力用户的可访问性和可用性,增加了用户可以单击或触摸以激活表单控件的区域。这对于很小的单选按钮和复选框特别有用(甚至是必需的)。有关一般标签的更多信息,请参见标签

以下是一个示例,说明了如何将上述元素与上述样式<label><input>元素相关联。你需要给<input>一个id属性。该<label>则需要for它的值是相同的输入的属性id

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas">

尺寸

诸如表单输入之类的交互式元素应提供足够大的区域,以便于激活它们。这可以为各种人提供帮助,包括运动控制问题的人和使用非精确形式的输入(例如手写笔或手指)的人。建议最小互动尺寸为44×44 CSS像素

浏览器兼容性

在GitHub上更新兼容性数据

桌面移动
边缘火狐浏览器IE浏览器歌剧苹果浏览器Android Webview适用于Android的ChromeAndroid版Firefox适用于Android的OperaiOS上的Safari三星上网
input全力支持是全力支持12全力支持1个全力支持是全力支持是全力支持1个全力支持1个全力支持是全力支持4全力支持是全力支持1个全力支持是
type="button"全力支持1个全力支持12全力支持1个全力支持是全力支持是全力支持1个全力支持是全力支持18岁全力支持4全力支持是全力支持是全力支持1.0
type="checkbox"全力支持是全力支持12全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持4全力支持是全力支持是全力支持是
type="color"全力支持20全力支持14全力支持29笔记打开没有支持没有全力支持12全力支持12.1全力支持4.4全力支持25全力支持27全力支持12全力支持12.2全力支持1.5
type="date"全力支持20全力支持12全力支持57没有支持没有全力支持11没有支持没有笔记打开全力支持是全力支持是全力支持57全力支持11全力支持5全力支持是
type="datetime-local"全力支持20全力支持12没有支持没有笔记打开没有支持没有全力支持11没有支持没有笔记打开全力支持是全力支持是全力支持是全力支持11全力支持是全力支持是
type="email"全力支持5全力支持12全力支持是全力支持10全力支持11全力支持是全力支持4全力支持是全力支持3.1笔记打开
type="file"全力支持1个全力支持12全力支持1个笔记打开全力支持是全力支持11全力支持1个全力支持是全力支持是全力支持4全力支持11全力支持是全力支持是
type="hidden"全力支持1个全力支持12全力支持1个全力支持是全力支持2全力支持1个全力支持是全力支持是全力支持4全力支持是全力支持是全力支持是
type="image"全力支持是全力支持12全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是
x-moz-errormessage 属性实验性不推荐使用非标没有支持没有没有支持没有没有支持?— 66没有支持没有没有支持没有没有支持没有没有支持没有没有支持没有没有支持?— 66没有支持没有没有支持没有没有支持没有
type="month"全力支持20全力支持12没有支持没有笔记打开没有支持没有全力支持11没有支持没有笔记打开全力支持是全力支持是没有支持没有全力支持是全力支持是全力支持是
type="number"全力支持是全力支持12全力支持是全力支持10全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是
type="password"全力支持1个全力支持12全力支持1个全力支持2全力支持2全力支持1个全力支持是全力支持4全力支持是全力支持是全力支持是
type="radio"全力支持是全力支持12全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持4全力支持是全力支持是全力支持是
type="range"全力支持4全力支持12全力支持23全力支持10全力支持11全力支持3.1全力支持4.4打开全力支持57全力支持52全力支持是全力支持5.1全力支持7.0
type="reset"全力支持1个全力支持12全力支持1个笔记打开全力支持是全力支持是全力支持1个全力支持是全力支持是全力支持4笔记打开全力支持是全力支持是全力支持是
type="search"全力支持5全力支持12全力支持4全力支持10全力支持10.6全力支持5全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是
type="submit"全力支持1个全力支持12全力支持1个笔记打开全力支持是全力支持是全力支持1个全力支持是全力支持是全力支持4笔记打开全力支持是全力支持是全力支持是
type="tel"全力支持3笔记打开全力支持12全力支持是全力支持10全力支持11全力支持4笔记打开全力支持≤37全力支持18岁全力支持是全力支持11全力支持3全力支持1.0
type="text"全力支持1个全力支持12全力支持1个全力支持是全力支持是全力支持1个全力支持是全力支持是全力支持4全力支持是全力支持是全力支持是
type="time"全力支持20全力支持12全力支持57没有支持没有全力支持10没有支持没有笔记打开全力支持是全力支持25全力支持57全力支持是全力支持是全力支持1.5
type="url"全力支持1个全力支持12全力支持是全力支持10全力支持11全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是
type="week"全力支持20全力支持12没有支持没有笔记打开没有支持没有全力支持11没有支持没有笔记打开全力支持是全力支持是全力支持是全力支持是全力支持是全力支持是


我们缺少什么?

传说

全力支持 全力支持没有支持 没有支持兼容性未知 兼容性未知实验性的。期望将来行为会改变。实验性的。期望将来行为会改变。非标。预期跨浏览器支持不佳。非标。预期跨浏览器支持不佳。不推荐使用。不适用于新网站。不推荐使用。不适用于新网站。请参阅实施说明。请参阅实施说明。

Scroll to Top