<input type="text">
<input> 元素的 text 类型会创建基本的单行文本字段。
试一试
<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;
}
值
value 属性是一个字符串，其中包含文本字段中输入的当前文本。你可以通过 JavaScript 中的 HTMLInputElement 的 value 属性来获取它。
let theText = myTextInput.value;
如果输入框没有设置验证约束（更多细节请参见验证），那么该值可能是一个空字符串（""）。
附加属性
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 属性是一个字符串，它向用户提供一个简短的提示，说明字段中预期哪种信息。它应该是一个词或短语，演示预期的数据类型，而不是解释性消息。文本不能包含回车或换行符。
如果控件的内容具有单一方向性（从左到右或从右到左），但需要以相反的方向性呈现占位符，您可以使用 Unicode 双向算法格式字符来覆盖占位符内的方向性；有关更多信息，请参阅如何使用 Unicode 控件处理双向文本。
注意：如果可以，请避免使用 placeholder 属性。它在语义上不如其他解释表单的方式有用，并且可能导致内容出现意想不到的技术问题。更多信息请参见 <input> 辅助功能问题。
readonly
一个布尔属性，如果存在，则表示该字段不能由用户编辑。但是，其 value 仍然可以通过 JavaScript 代码直接设置 HTMLInputElement value 属性来更改。
注意： 由于只读字段不能有值，因此 required 对同时指定了 readonly 属性的输入没有影响。
size
size 属性是一个数字值，表示输入字段应该有多宽（以字符为单位）。该值必须是一个大于零的数字，默认值为 20。由于字符宽度不同，这可能不完全精确，不应依赖于此；最终的输入可能比指定的字符数更窄或更宽，具体取决于字符和正在使用的字体（font 设置）。
这不限制用户可以在字段中输入的字符数。它只指定一次大约可以看到多少个字符。要对输入数据的长度设置上限，请使用maxlength 属性。
spellcheck
spellcheck 全局属性用于指示是否为元素启用拼写检查。它可以用于任何可编辑内容，但这里我们主要讨论 spellcheck 在 <input> 元素上的具体用法。spellcheck 的允许值为：
false-
禁用此元素的拼写检查。
true-
启用此元素的拼写检查。
""（空字符串）或无值-
遵循元素的拼写检查默认行为。这可能基于父元素的
spellcheck设置或其他因素。
如果输入字段未设置 readonly 属性且未禁用，则可以启用拼写检查。
如果用户代理的偏好设置覆盖了该设定，那么读取 spellcheck 返回的值可能不反映控件内拼写检查的实际状态。
使用文本输入框
<input> 元素的 text 类型用于创建基本的单行输入框。当你想让用户输入单行值，并且没有更具体的输入类型可用时（例如，如果是日期、URL、电子邮件或搜索词，你有更好的选择），就应该使用它。
基本示例
<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 属性，在文本输入框内提供一个有用的占位符，它可以提示用户应该输入什么内容。请看下面的例子：
<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 个字符：
<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>
验证
<input> 元素的 text 类型没有自动验证（因为一个基本的文本输入框需要能够接受任何任意字符串），但有一些客户端验证选项可用，我们将在下面讨论。
注意：HTML 表单验证不能替代确保输入数据格式正确的服务器端脚本。因为有人可以轻易地调整 HTML 来绕过验证，或者完全移除它。也有可能有人完全绕过你的 HTML，直接向你的服务器提交数据。如果你的服务器端代码未能验证其接收到的数据，当格式不正确的数据（或数据过大、类型错误等）被录入数据库时，可能会引发灾难。
关于样式的说明
有一些有用的伪类可用于设置表单元素的样式，以帮助用户看到他们的值是有效还是无效。它们是 :valid 和 :invalid。在本节中，我们将使用以下 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 属性，轻松地将输入值设为必填项，这样在允许表单提交之前必须输入一个值：
<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>
渲染效果如下：
如果你尝试在没有输入用户名的情况下提交表单，浏览器会显示一条错误消息。
输入值长度
你可以使用 minlength 属性指定输入值的最小长度（以字符为单位）；同样，使用 maxlength 设置输入值的最大长度（以字符为单位）。
下面的例子要求输入值的长度在 4 到 8 个字符之间。
<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>
渲染效果如下：
如果你尝试提交少于 4 个字符的表单，你会收到一条相应的错误消息（不同浏览器显示不同）。如果你尝试输入超过 8 个字符，浏览器将不允许你输入。
注意： 如果你指定了 minlength 但没有指定 required，那么该输入被认为是有效的，因为用户不需要指定一个值。
指定模式
你可以使用 pattern 属性指定一个正则表达式，输入的值必须匹配该表达式才被认为是有效的（关于使用正则表达式验证输入的速成课程，请参见根据正则表达式进行验证）。
下面的例子将值的长度限制在 4-8 个字符，并要求它只包含小写字母。
<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>
渲染效果如下：
示例
你可以在我们的你的第一个 HTML 表单和如何组织一个 Web 表单文章中看到文本输入框在实际场景中使用的好例子。
技术摘要
| 值 | 一个表示文本字段中包含的文本的字符串。 | |
| 事件 |
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) |
浏览器兼容性
加载中…
另见
- HTML 表单
<input>及其所基于的HTMLInputElement接口。<input type="search"><textarea>：多行文本输入