<input>: HTML 输入元素

试一试

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

<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 上传控件中可选择的文件类型。请参阅 文件 输入类型。

alpha 实验性

仅对 color 输入类型有效，alpha 属性为最终用户提供了设置所选颜色不透明度的能力。

alt

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

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 上传控件。请参阅 文件 输入类型。

checked

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

注意：与其他输入控件不同，复选框和单选按钮的值仅在它们当前处于 checked 状态时才包含在提交的数据中。如果它们已选中，则会提交选中控件的名称和值。

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

colorspace 实验性

仅对 color 输入类型有效，colorspace 属性指定 type="color" 输入使用的颜色空间。可能的枚举值为

• "limited-srgb"：颜色位于 sRGB 颜色空间中。这包括 rgb()、hsl()、hwb() 和 <hex-color> 值。颜色值限制为每个 r、g 和 b 分量 8 位。这是默认值。
• "display-p3"：Display P3 颜色空间，例如 color(display-p3 1.84 -0.19 0.72 / 0.6)

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 是显示图形提交按钮的图像文件的高度。请参阅 图像 输入类型。

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 有效。

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

根据浏览器，用户可能会看到建议的自定义调色板、范围上的刻度线，甚至是一个像 <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 类型所使用，并记录在我们的正则表达式指南中。模式文本周围不应指定正斜杠。编译正则表达式时

1. 模式将隐式地用 ^(?: 和 )$ 包裹，这样就要求匹配整个输入值，即 ^(?:<pattern>)$。
2. 指定 'v' 标志，以便将模式视为 Unicode 代码点序列，而不是 ASCII。

如果 pattern 属性存在但未指定或无效，则不应用正则表达式，并且此属性被完全忽略。如果 pattern 属性有效且非空值与模式不匹配，则约束验证将阻止表单提交。如果 multiple 存在，则编译后的正则表达式将与每个逗号分隔的值进行匹配。

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

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

placeholder

对 text、search、url、tel、email、password 和 number 有效，placeholder 属性向用户提供了一个简要提示，说明该字段中预期何种信息。它应该是一个单词或短语，提供有关预期数据类型的提示，而不是解释或提示。文本不得包含回车符或换行符。例如，如果一个字段预期捕获用户的名字，其标签是“名字”，则合适的占位符可能是“例如，Mustafa”。

注意：如果可以避免，请勿使用 placeholder 属性。如果需要标记 <input> 元素，请使用 <label> 元素。

popovertarget

将 <input type="button"> 元素转换为弹出控制按钮；将其控制的弹出元素的 ID 作为其值。有关更多详细信息，请参阅 弹出 API 登陆页面。使用 popovertarget 属性在弹出窗口及其调用按钮之间建立关系还有两个额外的有用效果

• 浏览器在弹出窗口和调用者之间创建隐式的 aria-details 和 aria-expanded 关系，并在显示时将弹出窗口放置在键盘焦点导航顺序中的逻辑位置。这使得弹出窗口对键盘和辅助技术 (AT) 用户更易于访问（另请参阅 弹出可访问性功能）。
• 浏览器在两者之间创建了一个隐式锚点引用，使得使用 CSS 锚点定位 来相对于其控件定位弹出窗口非常方便。有关更多详细信息，请参阅 弹出锚点定位。

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 属性是一个数字，指定值必须遵循的粒度。只有与步长基数相距整数步数的值才有效。如果指定了 min，则步长基数为 min，否则为 value，如果两者都未提供，则为 0（除了 week，其默认步长基数为 −259,200,000，表示 1970-W01 周的开始）。

如果未明确包含

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

该值必须是一个正数——整数或浮点数——或特殊值 any，这意味着没有隐含的步长，并且允许任何值（排除其他约束，例如 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

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

title

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

type

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

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

value

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

width

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

非标准属性

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

incremental 非标准

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

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

search 事件是限速的，因此发送频率不会超过实现定义的时间间隔。

orient 非标准

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

results 非标准

results 属性——仅由 Safari 支持——是一个数值，允许您覆盖在 <input> 元素原生提供的先前搜索查询下拉菜单中显示的最大条目数。

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

webkitdirectory 非标准

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

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

方法

HTMLInputElement 接口提供了以下方法，该接口表示 DOM 中的 <input> 元素。此外，还提供了父接口 HTMLElement、Element、Node 和 EventTarget 指定的方法。

checkValidity()

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

reportValidity()

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

select()

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

setCustomValidity()

设置当输入元素值无效时显示的自定义消息。

setRangeText()

将输入元素中指定字符范围的内容设置为给定字符串。提供 selectMode 参数以允许控制现有内容如何受影响。

setSelectionRange()

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

showPicker()

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

stepDown()

默认情况下，将数字输入的值减一，或按指定单位数递减。

stepUp()

将数字输入的值增一或按指定单位数递增。

CSS

输入是替换元素，具有一些不适用于非表单元素的特性。有一些 CSS 选择器可以根据其 UI 特性（也称为 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 伪元素是输入的 placeholder 文本。它可以使用有限的 CSS 属性子集进行样式设置。

::placeholder {
  color: blue;
}

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

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

结果

field-sizing

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

此属性通常用于创建表单字段，这些字段会根据其内容自动调整大小，并随着输入更多文本而增长。这适用于接受直接文本输入的输入类型（例如，text 和 url）、输入类型 file 和 <textarea> 元素。

object-position 和 object-fit

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

样式

有关如何在 HTML 中为元素添加颜色的更多信息，请参阅

• 使用 CSS 将颜色应用于 HTML 元素.

另请参阅

• HTML 表单样式
• HTML 表单高级样式 和

附加功能

标签

需要标签来将辅助文本与 <input> 关联。<label> 元素提供了关于表单字段的解释性信息，这些信息始终是合适的（除了您拥有的任何布局问题）。使用 <label> 来解释 <input> 或 <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> 元素之间不存在关系。

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

作为 Web 开发人员，重要的是我们永远不要假设人们会知道我们所知道的一切。使用 Web 的人的多样性——以及您的网站的访问者的多样性——几乎可以保证，如果没有清晰且正确呈现的标签，您网站的一些访问者在思维过程和/或情况方面会有所不同，从而导致他们以与您非常不同的方式解释您的表单。

占位符无法访问

placeholder 属性允许您指定当 <input> 元素的 content area 为空时显示在该区域中的文本。占位符绝不应是理解您的表单所必需的。它不是标签，不应作为替代品使用，因为它不是。占位符用于提供有关输入值应如何显示的提示，而不是解释或提示。

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

客户端验证

除了使用 CSS 根据每个输入的当前状态（如上文UI 伪类部分所述）基于 :valid 或 :invalid 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 布尔只读属性。有效性对象包括：

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

对于这些布尔属性中的每一个，true 值表示指定的验证失败原因属实，但 valid 属性除外，如果元素的值符合所有约束，则 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 头指定的语言。或者，
• 如果未指定，则使用浏览器的区域设置。

无障碍

标签

包含输入时，添加标签是无障碍性要求。这对于使用辅助技术的人来说是必需的，以便他们可以知道输入的用途。此外，单击或触摸标签会使焦点位于标签关联的表单控件上。这提高了视力用户（sighted users）的无障碍性和可用性，增加了用户可以单击或触摸以激活表单控件的区域。这对于微小的单选按钮和复选框尤其有用（甚至是必需的）。有关标签的更多信息，请参阅标签。

以下是如何将 <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
• 快速测试：大触摸目标 - A11Y 项目

技术摘要

规范

浏览器兼容性

另见

• CSS appearance 属性
• 您的第一个 HTML 表单
• 如何构建 HTML 表单
• 原生表单小部件
• 发送表单数据
• 表单约束验证
• HTML 表单样式