<input>：输入（表单输入）元素

<input> 的工作方式因其 type 属性的值而异，因此不同类型在各自的参考页面中进行了介绍。如果未指定此属性，则采用默认类型 text。

可用的类型如下所示

<input type="button" name="button" value="Button" />

<input type="checkbox" name="checkbox"/>

<input type="color" name="color"/>

<input type="date" name="date"/>

<input type="datetime-local" name="datetime-local"/>

<input type="email" name="email"/>

<input type="file" accept="image/*, text/*" name="file"/>

<input id="userId" name="userId" type="hidden" value="abc123">

<input type="image" name="image" src="" alt="image input"/>

<input type="month" name="month"/>

<input type="number" name="number"/>

<input type="password" name="password"/>

<input type="radio" name="radio"/>

<input type="range" name="range" min="0" max="25"/>

<input type="reset" name="reset"/>

<input type="search" name="search"/>

<input type="submit" name="submit"/>

<input type="tel" name="tel"/>

<input type="text" name="text"/>

<input type="time" name="time"/>

<input type="url" name="url"/>

<input type="week" name="week"/>

<input type="datetime" name="datetime"/>

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

本节提供了一个表格，列出了所有属性及其简要描述。此表格之后是一个列表，更详细地描述了每个属性，以及它们与哪些输入类型相关联。大多数或所有输入类型共有的属性将在下面更详细地定义。特定输入类型独有的属性——或所有输入类型共有的属性，但在特定输入类型上使用时具有特殊行为——将在这些类型的页面上进行说明。

<input> 元素的属性包括全局 HTML 属性，此外还有：

在标准属性的描述之后，列出了一些其他非标准属性。

accept

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

alt

仅对 image 按钮有效，alt 属性为图像提供备用文本，如果图像 src 丢失或无法加载，则显示属性的值。请参阅 image 输入类型。

autocapitalize

控制输入文本是否自动大写，以及如果自动大写，则以何种方式大写。有关更多信息，请参阅 autocapitalize 全局属性页面。

autocomplete

（**不是**布尔属性！）autocomplete 属性将其值作为以空格分隔的字符串，该字符串描述输入应提供哪种类型的自动完成功能（如果有）。自动完成的典型实现会调回在同一输入字段中输入的先前值，但可能存在更复杂的自动完成形式。例如，浏览器可以与设备的联系人列表集成以在电子邮件输入字段中自动完成 email 地址。有关允许的值，请参阅 autocomplete。

autocomplete 属性在 hidden、text、search、url、tel、email、date、month、week、time、datetime-local、number、range、color 和 password 上有效。此属性对不返回值或文本数据的输入类型没有影响，对除 checkbox、radio、file 或任何按钮类型之外的所有输入类型都有效。

有关其他信息，包括有关密码安全性和 autocomplete 在 hidden 上与其他输入类型略有不同的信息，请参阅 autocomplete 属性。

autofocus

如果存在，则表示该输入应在页面加载完成时（或包含该元素的 <dialog> 已显示时）自动获得焦点的布尔属性。

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

文档中最多只能有一个元素具有 autofocus 属性。如果放在多个元素上，则第一个具有该属性的元素会获得焦点。

autofocus 属性不能用于类型为 hidden 的输入，因为隐藏的输入无法聚焦。

警告：自动聚焦表单控件可能会让使用屏幕阅读器技术的视障人士和认知障碍人士感到困惑。分配 autofocus 时，屏幕阅读器会“传送”其用户到表单控件，而不会事先警告他们。

在应用 autofocus 属性时，请仔细考虑辅助功能。自动聚焦控件可能会导致页面在加载时滚动。焦点也可能导致某些触摸设备上的动态键盘显示。虽然屏幕阅读器会宣布接收焦点的表单控件的标签，但屏幕阅读器不会在标签之前宣布任何内容，并且小型设备上的有视力用户同样会错过先前内容创建的上下文。

capture

在 HTML 媒体捕获规范中引入，仅对 file 输入类型有效，capture 属性定义了应使用哪种媒体（麦克风、视频或相机）来捕获新文件以在支持的情况下使用 file 上传控件上传。请参阅 file 输入类型。

checked

对 radio 和 checkbox 类型都有效，checked 是一个布尔属性。如果在 radio 类型上存在，则表示该单选按钮是同一名称单选按钮组中当前选中的一个。如果在 checkbox 类型上存在，则表示该复选框在默认情况下已选中（页面加载时）。它不指示此复选框当前是否已选中：如果复选框的状态发生更改，则此内容属性不会反映更改。（只有 HTMLInputElement 的 checked IDL 属性 会更新。）

注意：与其他输入控件不同，复选框和单选按钮的值仅在当前 checked 时包含在提交的数据中。如果是，则会提交选中控件的名称和值(s)。

例如，如果一个名为 fruit 的复选框的 value 为 cherry，并且该复选框已选中，则提交的表单数据将包含 fruit=cherry。如果复选框未激活，则它根本不会在表单数据中列出。复选框和单选按钮的默认 value 为 on。

dirname

对 hidden、text、search、url、tel 和 email 输入类型有效，dirname 属性支持提交元素的方向性。包含时，表单控件将提交两个名称/值对：第一个是 name 和 value，第二个是 dirname 属性的值作为名称，值为浏览器设置的 ltr 或 rtl。

html

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

提交上面的表单时，输入将导致发送 fruit=cherry 的 name/value 对和 fruit-dir=ltr 的 dirname/方向对。有关更多信息，请参阅 dirname 属性。

disabled

如果存在，则表示用户不应该能够与输入交互的布尔属性。禁用的输入通常以较暗的颜色或其他某种形式的指示来呈现，表示该字段不可用。

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

注意：虽然规范不要求，但 Firefox 默认情况下会 保留 <input> 在页面加载之间的动态禁用状态。使用 autocomplete 属性来控制此功能。

form

指定输入关联的 <form> 元素（即其表单所有者）的字符串。如果存在，此字符串的值必须与同一文档中 <form> 元素的 id 匹配。如果未指定此属性，则 <input> 元素将与最近的包含表单（如果有）关联。

form 属性允许您将输入放置在文档中的任何位置，但将其包含在文档中其他位置的表单中。

注意：一个输入只能与一个表单关联。

formaction

仅对 image 和 submit 输入类型有效。有关更多信息，请参阅 submit 输入类型。

formenctype

仅对 image 和 submit 输入类型有效。有关更多信息，请参阅 submit 输入类型。

formmethod

仅对 image 和 submit 输入类型有效。有关更多信息，请参阅 submit 输入类型。

formnovalidate

仅对 image 和 submit 输入类型有效。有关更多信息，请参阅 submit 输入类型。

formtarget

仅对 image 和 submit 输入类型有效。有关更多信息，请参阅 submit 输入类型。

height

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

id

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

inputmode

对所有元素都有效的全局值，它为浏览器提供有关在编辑此元素或其内容时使用的虚拟键盘配置类型的提示。值包括 none、text、tel、url、email、numeric、decimal 和 search。

list

赋予 list 属性的值应为位于同一文档中的 <datalist> 元素的 id。<datalist> 提供了一个预定义值列表，以建议用户为此输入使用。列表中与 type 不兼容的任何值都不会包含在建议的选项中。提供的值是建议，而不是要求：用户可以选择此预定义列表或提供其他值。

它在 text、search、url、tel、email、date、month、week、time、datetime-local、number、range 和 color 上有效。

根据规范，hidden、password、checkbox、radio、file 或任何按钮类型都不支持 list 属性。

根据浏览器，用户可能会看到建议的自定义调色板、沿范围的刻度标记，甚至像 <select> 一样打开的输入，但允许使用未列出的值。查看 其他输入类型的浏览器兼容性表。

请参阅 <datalist> 元素。

max

对 date、month、week、time、datetime-local、number 和 range 有效，它定义了允许值范围内的最大值。如果输入到元素中的 value 超过此值，则元素将无法通过 约束验证。如果 max 属性的值不是数字，则该元素没有最大值。

有一个特殊情况：如果数据类型是周期性的（例如日期或时间），则 max 的值可能低于 min 的值，这表示范围可能会环绕；例如，这允许您指定从晚上 10 点到凌晨 4 点的时间范围。

maxlength

对 text、search、url、tel、email 和 password 有效，它定义了用户可以输入到字段中的最大字符串长度（以 UTF-16 代码单元为单位）。这必须是 0 或更高的整数值。如果未指定 maxlength 或指定了无效值，则字段没有最大长度。此值还必须大于或等于 minlength 的值。

如果输入到字段中的文本长度超过 maxlength UTF-16 代码单元，则输入将无法通过 约束验证。默认情况下，浏览器会阻止用户输入超过 maxlength 属性允许的字符数。仅当用户更改值时才会应用约束验证。有关更多信息，请参阅 客户端验证。

min

对 date、month、week、time、datetime-local、number 和 range 有效，它定义了允许值范围内的最小负值。如果输入到元素中的 value 小于此值，则元素将无法通过 约束验证。如果 min 属性的值不是数字，则该元素没有最小值。

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

有一个特殊情况：如果数据类型是周期性的（例如日期或时间），则 max 的值可能低于 min 的值，这表示范围可能会环绕；例如，这允许您指定从晚上 10 点到凌晨 4 点的时间范围。

minlength

适用于text、search、url、tel、email和password，它定义了用户可以在输入字段中输入的最小字符串长度（以UTF-16代码单元计）。这必须是一个非负整数，且小于或等于maxlength指定的值。如果没有指定minlength，或指定了无效值，则输入没有最小长度。

如果输入到字段中的文本长度少于minlength个UTF-16代码单元，则输入将导致约束验证失败，从而阻止表单提交。只有当用户更改值时才会应用约束验证。有关更多信息，请参阅客户端验证。

multiple

如果设置了布尔型multiple属性，则表示用户可以在电子邮件窗口小部件中输入以逗号分隔的电子邮件地址，或者可以使用file输入选择多个文件。请参阅电子邮件和文件输入类型。

name

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

将name视为必填属性（即使它不是）。如果输入没有指定name，或name为空，则输入的值不会随表单一起提交！（禁用的控件、未选中的单选按钮、未选中的复选框和重置按钮也不会发送）。

有两种特殊情况

1. _charset_：如果用作类型为hidden的<input>元素的名称，则输入的value将由用户代理自动设置为用于提交表单的字符编码。
2. isindex：出于历史原因，不允许使用名称isindex。

name属性为单选按钮创建了一个独特的行为。

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

当在同一命名组的单选按钮序列中进行Tab键切换时，如果选中了一个按钮，则该按钮将获得焦点。如果它们在源代码中没有分组在一起，如果该组中的一个按钮被选中，则从遇到该组中的第一个按钮开始进行Tab键切换，跳过所有未选中的按钮。换句话说，如果选中了一个按钮，则Tab键切换会跳过该组中未选中的单选按钮。如果没有选中任何按钮，则当到达同一名称组中的第一个按钮时，单选按钮组将获得焦点。

一旦该组中的一个单选按钮获得焦点，使用箭头键将导航到所有具有相同名称的单选按钮，即使这些单选按钮在源代码中没有分组在一起。

当输入元素被赋予一个name时，该名称将成为拥有表单元素的HTMLFormElement.elements属性的一个属性。如果您有一个name设置为guest的输入和另一个name设置为hat-size的输入，则可以使用以下代码

js

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

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

当此代码运行后，guestName将是guest字段的HTMLInputElement，而hatSize将是hat-size字段的对象。

警告：避免为表单元素提供与表单的内置属性相对应的name，因为您将用对相应输入的引用覆盖预定义的属性或方法。

pattern

适用于text、search、url、tel、email和password，pattern属性定义了一个正则表达式，输入的value必须匹配该正则表达式才能通过约束验证。它必须是一个有效的JavaScript正则表达式，如RegExp类型所使用，以及我们在正则表达式指南中所记录的那样；编译正则表达式时会指定'u'标志，以便将模式视为Unicode代码点的序列，而不是ASCII。模式文本周围不应指定正斜杠。

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

注意：如果使用pattern属性，请通过在附近包含解释性文本来告知用户预期的格式。您还可以包含一个title属性来解释匹配模式的要求；大多数浏览器会将此标题显示为工具提示。可见的解释对于可访问性是必需的。工具提示是一种增强功能。

有关更多信息，请参阅客户端验证。

placeholder

适用于text、search、url、tel、email、password和number，placeholder属性为用户提供了一个简短的提示，说明在字段中期望哪种信息。它应该是一个单词或短语，提示预期的数据类型，而不是解释或提示。文本不得包含回车符或换行符。例如，如果一个字段预期捕获用户的姓氏，并且其标签为“姓氏”，则合适的占位符可能是“例如，张三”。

注意：placeholder属性在语义上不如其他解释表单的方法有用，并且可能导致内容出现意外的技术问题。有关更多信息，请参阅标签。

popovertarget

将<input type="button">元素转换为弹出窗口控件按钮；将要控制的弹出窗口元素的ID作为其值。有关更多详细信息，请参阅弹出窗口API登录页面。

popovertargetaction

指定在由控件<input type="button">控制的弹出窗口元素上执行的操作。可能的值为

"hide"

该按钮将隐藏显示的弹出窗口。如果尝试隐藏已隐藏的弹出窗口，则不会执行任何操作。

"show"

该按钮将显示隐藏的弹出窗口。如果尝试显示已显示的弹出窗口，则不会执行任何操作。

"toggle"

该按钮将在显示和隐藏之间切换弹出窗口。如果弹出窗口隐藏，则会显示；如果弹出窗口显示，则会隐藏。如果省略了popovertargetaction，则"toggle"是控件按钮将执行的默认操作。

readonly

一个布尔型属性，如果存在，则表示用户不应该能够编辑输入的值。readonly属性受text、search、url、tel、email、date、month、week、time、datetime-local、number和password输入类型支持。

有关更多信息，请参阅HTML属性：readonly。

required

required是一个布尔型属性，如果存在，则表示用户必须在提交拥有表单之前为输入指定一个值。required属性受text、search、url、tel、email、date、month、week、time、datetime-local、number、password、checkbox、radio和file输入支持。

有关更多信息，请参阅客户端验证和HTML属性：required。

size

适用于email、password、tel、url和text，size属性指定显示输入的多少内容。基本上与使用CSS width属性设置相同的结果，但有一些特殊之处。值的实际单位取决于输入类型。对于password和text，它是字符数（或em单位），默认值为20，对于其他类型，它是像素（或px单位）。CSS width优先于size属性。

src

仅适用于image输入按钮，src是指定要显示的图像文件的URL的字符串，以表示图形提交按钮。请参阅图像输入类型。

step

适用于date、month、week、time、datetime-local、number和range，step属性是一个数字，指定值必须遵循的粒度。

如果未明确包含

• step对于number和range默认为1。
• 每个日期/时间输入类型都有一个适合该类型的默认step值；请参阅各个输入页面：date、datetime-local、month、time和week。

该值必须是一个正数——整数或浮点数——或特殊值any，这意味着没有隐含的步进，并且允许任何值（除了其他约束，如min和max）。

如果未明确设置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伪类。

有关更多信息，请参阅客户端验证。

tabindex

全局属性，对所有元素（包括所有输入类型）有效，一个整数属性，指示元素是否可以获取输入焦点（是否可聚焦），以及它是否应该参与顺序键盘导航。由于除类型为hidden的输入外的所有输入类型都是可聚焦的，因此不应在表单控件上使用此属性，因为这样做需要管理文档中所有元素的焦点顺序，如果操作不当，则存在损害可用性和可访问性的风险。

title

全局属性，对所有元素（包括所有输入类型）有效，包含一个文本，表示与其所属元素相关的建议信息。此类信息通常（但并非必须）可以作为工具提示呈现给用户。标题不应作为表单控件目的的主要解释。相反，请使用for属性设置为表单控件的id属性的<label>元素。请参阅下面的标签。

type

一个字符串，指定要渲染的控件类型。例如，要创建复选框，则使用checkbox值。如果省略（或指定了未知值），则使用输入类型text，创建一个纯文本输入字段。

允许的值列在上面的输入类型中。

value

输入控件的值。当在HTML中指定时，这是初始值，从那时起，可以使用JavaScript访问相应的HTMLInputElement对象的value属性随时更改或检索它。value属性始终是可选的，但对于checkbox、radio和hidden应视为必需的。

width

仅适用于image输入按钮，width是要显示的图像文件的宽度，以表示图形提交按钮。请参阅图像输入类型。

以下非标准属性在某些浏览器上也可用。一般来说，除非不得已，否则应避免使用它们。

autocorrect 非标准

（仅限Safari）。一个字符串，指示在用户编辑此字段时是否激活自动更正。允许的值为

on

启用拼写错误的自动更正，以及处理任何配置的文本替换。

off

禁用自动更正和文本替换。

incremental 非标准

布尔型属性incremental是WebKit和Blink扩展（因此受Safari、Opera、Chrome等支持），如果存在，则告诉用户代理将输入处理为实时搜索。当用户编辑字段的值时，用户代理会将search事件发送到表示搜索框的HTMLInputElement对象。这允许您的代码在用户编辑搜索时实时更新搜索结果。

如果未指定incremental，则只有当用户明确启动搜索（例如，在编辑字段时按下Enter或Return键）时，才会发送search事件。

search事件受速率限制，因此不会比实现定义的间隔更频繁地发送。

orient 非标准

类似于影响`<progress>` 和 `<meter>` 元素的非标准 CSS 属性 `-moz-orient`，`orient` 属性定义了范围滑块的方向。其值包括 `horizontal`，表示范围水平渲染，以及 `vertical`，表示范围垂直渲染。有关创建垂直表单控件的现代方法，请参阅 创建垂直表单控件。

results 非标准

`results` 属性（仅 Safari 支持）是一个数值，允许您覆盖在 `` 元素的原生下拉菜单中显示的先前搜索查询条目最大数量。

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

webkitdirectory 非标准

如果存在，布尔型 `webkitdirectory` 属性表示在文件选择器界面中，用户只能选择目录。有关其他详细信息和示例，请参阅 HTMLInputElement.webkitdirectory。

虽然最初仅在基于 WebKit 的浏览器中实现，但 `webkitdirectory` 也可以在 Microsoft Edge 以及 Firefox 50 及更高版本中使用。但是，即使它具有相对广泛的支持，它仍然是非标准的，除非没有其他选择，否则不应使用它。

以下方法由 `HTMLInputElement` 接口提供，该接口表示 DOM 中的 `` 元素。父接口 `HTMLElement`、`Element`、`Node` 和 `EventTarget` 指定的方法也可使用。

checkValidity()

如果元素的值通过有效性检查，则返回 `true`；否则，返回 `false` 并在元素上触发 `invalid` 事件。

reportValidity()

如果元素的值通过有效性检查，则返回 `true`；否则，返回 `false`，在元素上触发 `invalid` 事件，并且（如果事件未取消）向用户报告问题。

select()

如果元素的内容可选择，则选择 `` 元素的整个内容。对于没有可选择文本内容的元素（例如视觉颜色选择器或日历日期输入），此方法不执行任何操作。

setCustomValidity()

设置自定义消息，如果输入元素的值无效，则显示该消息。

setRangeText()

将输入元素中指定字符范围的内容设置为给定的字符串。可以使用 `selectMode` 参数来控制如何影响现有内容。

setSelectionRange()

选择文本输入元素中指定的字符范围。对于未呈现为文本输入字段的输入，不执行任何操作。

showPicker()

显示输入元素的浏览器选择器，该选择器通常在选择元素时显示，但由按钮按下或其他用户交互触发。

stepDown()

默认情况下，将数字输入的值减少一个单位，或者减少指定数量的单位。

stepUp()

将数字输入的值增加一个单位或增加指定数量的单位。

输入作为替换元素，具有一些不适用于非表单元素的功能。有一些 CSS 选择器可以根据其 UI 功能（也称为 UI 伪类）专门定位表单控件。输入元素还可以使用属性选择器按类型进行定位。还有一些属性特别有用。

伪类示例

我们可以根据复选框是否选中来设置复选框标签的样式。在此示例中，我们正在设置紧跟在选中输入后面的 `<label>` 的 `color` 和 `font-weight` 样式。如果 `input` 未选中，我们没有应用任何样式。

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Toggle the checkbox on and off</label>

input:checked + label {
  color: red;
  font-weight: bold;
}

可以使用 `属性选择器` 根据其 `type` 定位不同类型的表单控件。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 a pattern attribute */
input[pattern] {
}

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

::placeholder {
  color: blue;
}

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

`appearance` 属性允许根据操作系统的主题显示（几乎）任何元素作为平台原生样式，并使用 `none` 值删除任何平台原生样式。

您可以使用 `div {appearance: radio;}` 使 `

特定于文本输入相关元素的属性是 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";
}

结果

`field-sizing` 属性允许您控制表单输入的大小调整行为（即，默认情况下，它们具有默认的首选大小）。此属性允许您覆盖默认行为，使表单控件能够调整大小以适应其内容。

此属性通常用于创建表单字段，这些字段会根据其内容进行收缩包装，并在输入更多文本时增长。这适用于接受直接文本输入的输入类型（例如，`text` 和 `url`），输入类型 `file` 以及 `<textarea>` 元素。

在某些情况下（通常涉及非文本输入和专门的界面），`` 元素是一个 `替换元素`。在这种情况下，可以使用 CSS `object-position` 和 `object-fit` 属性调整元素大小及其在框架内位置。

有关向 HTML 元素添加颜色的更多信息，请参阅

• 使用 CSS 为 HTML 元素应用颜色.

另请参阅

• 设置 HTML 表单样式
• HTML 表单的高级样式 和
• 表单控件的 `CSS 属性兼容性表`。

标签需要将辅助文本与 `` 关联。`<label>` 元素提供有关表单字段的解释信息，这始终是合适的（除了您可能遇到的任何布局问题之外）。使用 `` 来解释应在 `` 或 `<textarea>` 中输入的内容绝不是坏主意。

关联标签

`` 和 `` 元素的语义配对对于屏幕阅读器等辅助技术很有用。通过使用 `` 的 `for` 属性将它们配对，您可以以一种方式将标签绑定到输入，使屏幕阅读器能够更精确地向用户描述输入。

仅仅在 `` 元素旁边放置纯文本是不够的。相反，可用性和可访问性需要包含隐式或显式的 `<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>

第一个示例不可访问：提示与 `` 元素之间不存在关系。

除了可访问名称之外，标签还为鼠标和触摸屏用户提供了更大的“点击”区域以进行点击或触摸。通过将 `` 与 `` 配对，点击其中任何一个都会使 `` 成为焦点。如果您使用纯文本为输入“设置标签”，则不会发生这种情况。使提示成为输入激活区域的一部分对于有运动控制障碍的人们很有帮助。

作为 Web 开发人员，我们必须始终记住，我们不能假设每个人都知道我们知道的所有事情。使用 Web 的人群的多样性（以及您的网站）实际上保证了您网站的一些访客在思维过程和/或环境方面存在一些差异，如果没有清晰且正确呈现的标签，这会导致他们对表单的理解与您大不相同。

占位符不可访问

`placeholder` 属性允许您指定在 `` 元素为空时显示在其内容区域本身内的文本。占位符永远不应该成为理解表单的必要条件。它不是标签，也不应该用作替代品，因为它不是。占位符用于提示输入值应是什么样子，而不是解释或提示。

占位符不仅无法被屏幕阅读器访问，而且一旦用户在表单控件中输入任何文本，或者如果表单控件已具有值，则占位符会消失。具有自动页面翻译功能的浏览器在翻译时可能会跳过属性，这意味着 `placeholder` 可能不会被翻译。

除了使用 CSS 根据每个输入的当前状态基于 `:valid` 或 `:invalid` UI 状态为输入设置样式外，如上文 `UI 伪类` 部分所述，浏览器还提供了在（尝试）表单提交时的客户端验证。在表单提交时，如果存在任何表单控件无法通过约束验证，则支持的浏览器将在第一个无效的表单控件上显示错误消息；显示基于错误类型的默认消息，或您设置的消息。

某些输入类型和其他属性会限制给定输入的有效值。例如，<input type="number" min="2" max="10" step="2">表示只有数字 2、4、6、8 或 10 是有效的。可能会发生多种错误，包括如果值小于 2 则出现 rangeUnderflow 错误，如果大于 10 则出现 rangeOverflow 错误，如果值在 2 到 10 之间但不是偶数（不符合step属性的要求），则出现 stepMismatch 错误，或者如果值不是数字，则出现 typeMismatch 错误。

对于其可能值域是周期性的输入类型（即，在最大可能值处，值会环绕回到开头而不是结束），max 和 min 属性的值可以反转，这表示允许的值范围从 min 开始，环绕到最小可能值，然后继续直到达到 max。这在日期和时间方面特别有用，例如当您希望允许范围从晚上 8 点到早上 8 点时。

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

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

如果表单控件没有 required 属性，则没有值或空字符串无效。即使存在以上属性（required 除外），空字符串也不会导致错误。

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

除了上表中描述的错误之外，validityState 接口还包含 badInput、valid 和 customError 布尔只读属性。Validity 对象包括

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

对于这些布尔属性中的每一个，值为 true 表示指定的验证失败原因可能是正确的，valid 属性除外，如果元素的值符合所有约束条件，则该属性为 true。

如果发生错误，支持的浏览器将同时提醒用户并阻止表单提交。需要注意的是：如果自定义错误设置为真值（除空字符串或 null 之外的任何内容），则将阻止表单提交。如果没有自定义错误消息，并且其他任何属性都没有返回 true，则 valid 将为 true，并且可以提交表单。

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

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

自定义验证错误示例

如果您希望在字段验证失败时显示自定义错误消息，则需要使用 <input>（以及相关）元素上可用的 约束验证 API。请看以下表单

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

如果您尝试提交表单且未填写任何有效值或值与 pattern 不匹配，则基本的 HTML 表单验证功能将导致生成默认错误消息。

如果您想改为显示自定义错误消息，可以使用以下 JavaScript 代码

const nameInput = document.querySelector("input");

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!",
    );
  }
});

该示例的呈现效果如下

简而言之

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

某些 <input> 类型的允许输入取决于区域设置。在某些区域设置中，1,000.00 是有效数字，而在其他区域设置中，输入此数字的有效方式是 1.000,00。

Firefox 使用以下启发式方法来确定用于验证用户输入的区域设置（至少对于 type="number" 而言）

• 尝试元素或其任何父元素上 lang/xml:lang 属性指定的语言。
• 尝试任何 Content-Language HTTP 标头指定的语言。或者，
• 如果未指定，则使用浏览器的区域设置。

在包含输入时，需要在旁边添加标签，这是辅助功能的要求。这是为了让使用辅助技术的用户能够知道输入的用途。此外，单击或触摸标签会将焦点赋予标签关联的表单控件。这提高了有视力用户的可访问性和可用性，增加了用户可以单击或触摸以激活表单控件的区域。这在单选按钮和复选框方面尤其有用（甚至必要），因为它们很小。有关标签的更多信息，请参阅 标签。

以下是如何在上述样式中将 <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 像素。

• 了解成功标准 2.5.5：目标尺寸 | W3C 了解 WCAG 2.1
• 目标尺寸和 2.5.5 | Adrian Roselli
• 快速测试：大型触摸目标 - The A11Y Project

• 表单约束验证
• 您的第一个 HTML 表单
• 如何构建 HTML 表单
• 原生表单小部件
• 发送表单数据
• 表单数据验证
• 如何构建自定义表单小部件
• 旧版浏览器中的 HTML 表单
• 设置 HTML 表单样式
• HTML 表单的高级样式
• CSS 属性兼容性表
• 创建垂直表单控件