<input type="text">

类型为text的<input>元素创建基本的单行文本字段。

试一试

值

value属性是一个字符串，包含输入到文本字段中的当前文本值。您可以使用 JavaScript 中的HTMLInputElement value属性检索此值。

let theText = myTextInput.value;

如果输入没有设置验证约束（有关详细信息，请参阅验证），则该值可能为空字符串（""）。

其他属性

除了适用于所有<input>元素（无论其类型如何）的属性之外，文本输入还支持以下属性。

`list`

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

`maxlength`

用户可以在text输入中输入的最大字符串长度（以 UTF-16 代码单元计）。这必须是 0 或更高的整数值。如果未指定maxlength或指定了无效值，则text输入没有最大长度。此值还必须大于或等于minlength的值。

如果字段的文本值的长度大于maxlength UTF-16 代码单元，则输入将无法通过约束验证。仅当用户更改值时才会应用约束验证。

`minlength`

用户可以在text输入中输入的最小字符串长度（以 UTF-16 代码单元计）。这必须是非负整数值，并且小于或等于maxlength指定的值。如果未指定minlength或指定了无效值，则text输入没有最小长度。

如果输入到字段中的文本长度少于minlength UTF-16 代码单元，则输入将无法通过约束验证。仅当用户更改值时才会应用约束验证。

`pattern`

如果指定了pattern属性，则它是一个正则表达式，输入的value必须匹配该正则表达式才能通过约束验证。它必须是一个有效的 JavaScript 正则表达式，与RegExp类型使用的正则表达式相同，并在我们的正则表达式指南中进行了介绍；编译正则表达式时会指定'u'标志，以便将模式视为 Unicode 代码点的序列，而不是ASCII。模式文本周围不应指定正斜杠。

如果未指定或指定了无效的模式，则不应用任何正则表达式，并且完全忽略此属性。

注意：使用title属性来指定大多数浏览器将显示为工具提示的文本，以解释匹配模式的要求。您还应该在附近包含其他说明性文本。

有关更多详细信息和示例，请参阅指定模式。

`placeholder`

placeholder属性是一个字符串，它向用户提供一个简短的提示，说明在该字段中期望哪种信息。它应该是一个单词或短语，演示预期的数据类型，而不是说明性消息。文本不得包含回车符或换行符。

如果控件的内容具有一个方向性（LTR或RTL），但需要以相反的方向性显示占位符，则可以使用 Unicode 双向算法格式化字符来覆盖占位符中的方向性；有关更多信息，请参阅如何使用 Unicode 控件进行双向文本。

注意：如果可以，请避免使用placeholder属性。它在语义上不如其他解释表单的方式有用，并且可能导致内容出现意外的技术问题。有关更多信息，请参阅<input>可访问性问题。

`readonly`

如果存在，则此布尔属性表示用户无法编辑此字段。但是，JavaScript 代码可以通过直接设置HTMLInputElement value属性来更改其value。

注意：由于只读字段不能具有值，因此required对也指定了readonly属性的输入没有任何影响。

`size`

size 属性是一个数值，指示输入字段应该有多宽（以字符为单位）。该值必须大于零，默认值为 20。由于字符宽度各不相同，因此这可能不精确，也不应该依赖于此；根据字符和使用的字体（font 设置），生成的输入可能比指定的字符数窄或宽。

这并**不**设置用户可以在字段中输入的字符数限制。它仅指定大约一次可以查看多少个字符。要设置输入数据长度的上限，请使用 maxlength 属性。

`spellcheck`

spellcheck 全局属性用于指示是否为元素启用拼写检查。它可以用于任何可编辑内容，但这里我们考虑与在 <input> 元素上使用 spellcheck 相关的细节。spellcheck 的允许值为

false: 禁用此元素的拼写检查。
true: 启用此元素的拼写检查。
""（空字符串）或无值: 遵循元素的默认拼写检查行为。这可能是基于父级的 spellcheck 设置或其他因素。

如果输入字段没有设置 readonly 属性且未禁用，则可以启用拼写检查。

如果用户代理的首选项覆盖了设置，则读取 spellcheck 返回的值可能无法反映控件中拼写检查的实际状态。

非标准属性

以下非标准属性在某些浏览器上也可用。作为一般规则，除非无法避免，否则应避免使用它们。

`autocorrect`

autocorrect 属性是 Safari 的扩展，是一个字符串，指示在用户编辑此字段时是否激活自动更正。允许的值为

on: 启用错别字的自动更正，以及如果配置了任何文本替换的处理。
off: 禁用自动更正和文本替换。

使用文本输入

类型为 text 的 <input> 元素创建基本的单行输入。在您希望用户输入单行值且没有更具体的输入类型可用于收集该值（例如，如果它是日期、URL、电子邮件或搜索词，则有更好的选项可用）的任何地方，都应使用它们。

基本示例

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

呈现效果如下

提交时，发送到服务器的数据名称/值对将为 name=Chris（如果在提交前输入“Chris”作为输入值）。您必须记住在 <input> 元素上包含 name 属性，否则文本字段的值将不会包含在提交的数据中。

设置占位符

您可以通过使用 placeholder 属性在文本输入中提供一个有用的占位符，该占位符可以提供有关输入内容的提示。请查看以下示例

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

您可以看到下面是如何渲染占位符的

占位符通常以比元素的前景色更浅的颜色呈现，并且当用户开始在字段中输入文本（或每当通过设置其 value 属性以编程方式设置字段的值时）时，会自动消失。

物理输入元素大小

可以使用 size 属性控制输入框的物理大小。使用它，您可以指定文本输入一次可以显示的字符数。这会影响元素的宽度，让您能够以字符而不是像素为单位指定宽度。例如，在此示例中，输入宽度为 30 个字符

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

验证

类型为 text 的 <input> 元素没有应用任何自动验证（因为基本文本输入需要能够接受任何任意字符串），但有一些客户端验证选项可用，我们将在下面讨论。

注意： HTML 表单验证**不是**确保输入数据格式正确的服务器脚本的替代品。对于某人调整 HTML 以允许他们绕过验证或完全删除它来说，这太容易了。某人还可以完全绕过您的 HTML 并直接将数据提交到您的服务器。如果您的服务器端代码未能验证它接收到的数据，则当不正确格式的数据（或大小过大、类型错误等数据）输入到您的数据库时，可能会发生灾难。

关于样式的说明

有一些有用的伪类可用于为表单元素设置样式，以帮助用户查看其值何时有效或无效。它们是 :valid 和 :invalid。在本节中，我们将使用以下 CSS，它将在包含有效值的输入旁边放置一个复选标记（勾号），并在包含无效值的输入旁边放置一个叉号（X）。

css

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

此技术还需要在表单元素之后放置一个 <span> 元素，该元素充当图标的容器。这是必要的，因为某些浏览器上的一些输入类型不能很好地显示直接放置在其后面的图标。

使输入成为必填项

您可以使用 required 属性作为一种简单的方法，在允许提交表单之前，使输入值成为必填项

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

呈现效果如下

如果您尝试在未输入任何搜索词的情况下提交表单，浏览器将显示一条错误消息。

输入值长度

您可以使用 minlength 属性指定输入值的最小长度（以字符为单位）；类似地，使用 maxlength 设置输入值的最大长度（以字符为单位）。

以下示例要求输入的值长度为 4-8 个字符。

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

呈现效果如下

如果您尝试提交少于 4 个字符的表单，将收到相应的错误消息（浏览器之间有所不同）。如果您尝试输入超过 8 个字符，浏览器将不允许您这样做。

注意：如果您指定了 minlength 但未指定 required，则输入被视为有效，因为用户不需要指定值。

指定模式

您可以使用 pattern 属性指定输入值必须匹配的正则表达式，才能被视为有效（请参阅根据正则表达式验证，了解有关使用正则表达式验证输入的简单速成课程）。

以下示例将值限制为 4-8 个字符，并要求它仅包含小写字母。

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

呈现效果如下

示例

您可以在我们的第一个 HTML 表单和如何构建 HTML 表单文章中看到文本输入在上下文中使用的良好示例。

技术摘要

值	表示文本字段中包含的文本的字符串。
事件	`change` 和 `input`
支持的常用属性	`autocomplete`、`list`、`maxlength`、`minlength`、`pattern`、`placeholder`、`readonly`、`required` 和 `size`
IDL 属性	`list`、`value`
DOM 接口	`HTMLInputElement`
方法	`select()`、`setRangeText()` 和 `setSelectionRange()`。
隐式 ARIA 角色	无 `list` 属性：`textbox`	有 `list` 属性：`combobox`

规范

规范
HTML 标准 # text-(type=text)-state-and-search-state-(type=search)

浏览器兼容性

BCD 表格仅在浏览器中加载