Skip to main content

表单输入元素 input

Docs

表单输入元素​

HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

  • 表单元素使用最多的是 input 元素

  • input 元素有如下常见的属性：

    • type：input 的类型
      • text：文本输入框（明文输入）
      • password：文本输入框（密文输入）
      • radio：单选框
      • checkbox：复选框
      • button：按钮
      • reset：重置
      • submit：提交表单数据给服务器
      • file：文件上传
    • readonly：只读
    • disabled：禁用
    • checked：默认被选中
    • 只有当 type 为 radio 或 checkbox 时可用
    • autofocus：当页面加载时，自动聚焦
    • name：名字 在提交数据给服务器时，可用于区分数据类型
    • value：取值

  • type 类型的其他取值和 input 的其他属性，查看文档：<input>：输入（表单输入）元素 - HTML | MDN (mozilla.org)

input 类型​

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

可用的值包括：

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

废弃的

datetime: 用于输入基于 UTC 时区的日期和时间（时、分、秒及秒的小数部分）。 |

属性​

<input> 元素由于拥有诸多属性而异常强大，其中前文举例说明的 type 属性尤其重要。由于所有 <input> 元素无论是哪种 type，都基于 HTMLInputElement 接口，所以理论上说，它们共享一套相同的属性。但实际上大部分属性只作用于特定一组 type。此外，一些属性作用于 <input> 的方式取决于 <input> 的 type 属性，不同的 type 有不同的效果。

下面的表格列出了所有属性，每个属性都有简短的描述。表格后的列表更详细地描述了各个属性及它们与哪些 input 类型相关。与大部分或者全部 input 类型都相关的属性会讲述更多细节。一些针对特定 input 类型的属性，或者所有 input 类型都有，但在特定的 input 类型上有特定表现的属性，会在相应的类型页面中说明。这个元素包含全局属性，一些针对 <input> 元素有额外意义的全局属性也会特别说明。

<input> 元素包含的属性包含全局的 HTML 属性和以下这些额外属性：

属性类型描述
acceptfile文件上传控件中预期文件类型的提示
altimage图片类型的 alt 属性。对无障碍是必需的
autocomplete除了 checkbox、radio 和按钮以外表单自动填充特性提示
capturefile文件上传控件中媒体捕获方法的提示
checkedcheckbox、radio控件是否选中
dirnamesearch、text表单字段的名称，用于在提交表单时发送元素的方向性
disabled所有类型表单控件是否禁用
form所有类型将控件联系到表单元素中
formactionimage、submit要提交表单的 URL 地址
formenctypeimage、submit提交表单时使用的表单数据编码类型
formmethodimage、submit提交表单时所使用的 HTTP 方法
formnovalidateimage、submit绕过表单提交时的表单控件验证
formtargetimage、submit提交表单时的浏览上下文
heightimage与 <img> 元素的 height 属性有相同含义，垂直方向上的维度值
list除了 hidden、password、checkbox、radio 和按钮以外自动完成选项的 <datalist> 的 id 属性的值
maxdate、month、week、time、datetime-local、number、range最大值
maxlengthtext、search、url、tel、email、passwordvalue 的最大长度（字符数）
mindate、month、week、time、datetime-local、number、range最小值
minlengthtext、search、url、tel、email、passwordvalue 的最小长度（字符数）
multipleemail、file布尔值。是否允许多个值
name所有类型表单的控件名称，作为键值对的一部分与表单一同提交
patterntext、search、url、tel、email、password为了使得 value 有效，必须符合的模式
placeholdertext、search、url、tel、email、password、number当没有值设定时，出现在表单控件上的文字
readonly除了 hidden、range、color、checkbox、radio 和按钮以外布尔值。如果存在，其中的值将不可编辑。
required除了 hidden、range、color 和按钮以外布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格。
sizetext、search、url、tel、email、password控件的尺寸
srcimage与 <img> 元素的 src 属性含义相同，图片资源的地址
stepdate、month、week、time、datetime-local、number、range有效的增量值
type所有类型表单控件的类型
value所有类型表单控件的初始值
widthimage与 <img> 元素的 width 属性含义相同

一些额外的非标准属性被列在标准属性的描述之后。

CSS​

输入元素作为被替换的元素，有一些功能不适用于非表单元素。有一些 CSS 选择器可以根据表单控件的 UI 特征专门针对它们，也被称为 UI 伪类。输入元素也可以用属性选择器按类型定位。有一些属性也是特别有用的。

UI 伪类​

伪类描述
:enabled任何当前启用的元素，可以被激活（选择、点击、输入等）或接受焦点；也有一个禁用状态，在这个状态下，它不能被激活或接受焦点。
:disabled任何当前禁用的元素都有一个启用的状态，这意味着如果它没有被禁用，它可以被激活（选择、点击、输入等等）或接受焦点。
:read-only不能被用户编辑的元素。
:read-write可以被用户编辑的元素。
:placeholder-shown当前显示 placeholder 文字的元素，包括有 placeholder 显示，尚未拥有值的 <input> 和 <textarea> 元素。
:default在一组相关元素中属于默认的表单元素。匹配 checkbox 和 radio 在页面加载或渲染时被选中的输入类型。
:checked匹配当前被选中的 checkbox 和 radio 输入类型（以及当前被选中的 <select> 中的 <option>）。
:indeterminateindeterminate 属性被 JavaScript 设置为真的 checkbox 元素，表单中所有具有相同名称值的单选按钮被取消选中的 radio 元素，以及处于不确定状态的 <progress> 元素。
:valid可以应用约束验证的表单控件，并且当前是有效的。
:invalid应用了约束条件验证的表单控件，并且当前是无效的。匹配一个表单控件，它的值与它的属性设置的约束条件不一致，如 required、pattern、step 和 max。
:in-range一个非空的输入，其当前值在 min 和 max 属性以及 step 指定的范围限制内。
:out-of-range一个非空的输入，其当前值不在 min 和 max 属性以及 step 指定的范围限制内。
:required有 required 属性设置的 <input>、<select> 或 <textarea> 元素。只匹配可以被 required 的元素，不匹配不能被 required 的元素。
:optional没有 required 属性设置的 <input>、<select> 或 <textarea> 元素。只匹配可以被 required 的元素，不匹配不能被 required 的元素。
:blank没有值的 <input> 和 <textarea> 元素。
:user-invalid (en-US)与 :invalid 相似，但是在失焦的情况下激活。匹配无效的输入，但只在用户交互之后，例如关注该控件、离开该控件或试图提交包含无效控件的表单。

示例

我们可以根据复选框是否被选中来为复选框的标签添加样式。在这个例子中，我们对紧跟在复选输入之后的 color 和 font-weight 的 <label> 进行样式设置。如果 input 没有选中，我们没有应用任何样式。

input:checked + label {
  color: red;
  font-weight: bold;
}
Loading Github Gist ...
Details

属性选择器​

使用属性选择器，可以根据表单控件的 type 来锁定不同类型的表单控件。CSS 属性选择器只需根据一个属性的存在或一个给定属性的值来匹配元素。

/* 匹配密码输入 */
input[type="password"] {
}

/* 匹配合法值限制在一个范围内的表单控件 */
input[min][max] {
}

/* 匹配含有 pattern 属性的表单控件 */
input[pattern] {
}

::placeholder​

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

::placeholder {
  color: blue;
}

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

appearance​

appearance 属性可以将（几乎）任何元素显示为基于操作系统主题的平台原生样式，也可以用 none 值去除任何平台原生样式。

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

设置 appearance: none 移除了平台原生的边框，但没有移除其功能。

caret-color​

一个专门针对文本输入相关元素的属性是 CSS caret-color 属性，它可以让你设置用于绘制文本输入光标的颜色：

Loading Github Gist ...
Details

总结​

所有文本框都有一些通用规范：

  • 它们可以被标记为 readonly（用户不能修改输入值）甚至是 disabled（输入值永远不会与表单数据的其余部分一起发送）。
  • 它们可以有一个 placeholder；这是文本输入框中出现的文本，用来简略描述输入框的目的。
  • 它们可以使用 size (en-US)（框的物理尺寸）和 maxlength (en-US)（可以输入的最大字符数）进行限制。
  • 如果浏览器支持的话，它们可以从拼写检查（使用 spellcheck 属性）中获益。

单行文本输入框​

<div>
  <input type="text" value="单行文本框" />
</div>

密码输入框​

<div>
  <input type="password" value="密码输入框" />
</div>

隐藏输入框​

<div>
  <input type="hidden" value="隐藏输入框" />
</div>

单选框​

name 属性共享相同的值，属于同一组的按钮。同一组中只有一个按钮可以同时被选

<div>
  <input type="radio" name="radio" value="yes" checked />
  <input type="radio" name="radio" /> 单选框
</div>

复选框​

<div>
  <input type="checkbox" value="yes" checked />
  <input type="checkbox" /> 复选框
</div>

提交按钮 submit​

<button type="submit">This is a <strong>submit button</strong></button>

<input type="submit" value="This is a submit button" />

重置按钮 reset​

<button type="reset">This is a <strong>reset button</strong></button>

<input type="reset" value="This is a reset button" />

文件上传​

<div>
  <input type="file" value="文件上传" />
</div>

邮箱输入框​

<div>
  <input type="email" value="邮箱输入框" />
</div>

电话输入框​

<div>
  <input type="tel" value="电话输入框" />
</div>

数字输入框​

<div>
  <input type="number" value="数字输入框" />
</div>

搜索输入框​

<div>
  <input type="search" value="搜索输入框" />
</div>

URL 输入框​

<div>
  <input type="url" value="URL 输入框" />
</div>

日期输入框​

<div>
  <input type="date" value="日期输入框" />
</div>

月份输入框​

<div>
  <input type="month" value="月份输入框" />
</div>

周输入框​

<div>
  <input type="week" value="周输入框" />
</div>

时间输入框​

<div>
  <input type="time" value="时间输入框" />
</div>

练习​

Loading Github Gist ...
Details