input type="text"

"text"类型的<input>元素创建通用的单行文本字段。

<input type="text">

值	表示文本字段中包含的值的DOMString。
活动	change 和 input
支持的通用属性	autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
IDL属性	value
方法	select（），setRangeText（），setSelectionRange（）

例子

该value属性包含一个DOMString表示文本字段中包含的值。您可以使用HTMLInputElement.valueJavaScript中的属性来检索它。

myTextInput.value;

如果输入没有验证约束（请参阅验证以获取更多详细信息），该值可以是文本字符串或空字符串（“”）。

使用文本输入

text类型的<input>元素用于创建通用的单行输入 - 您应该使用它们，无论您希望用户输入一个单行值，并没有一个更好的输入类型可用于收集该值（如果它是一个日期，网址，电子邮件或搜索词，例如，你有更好的选择）。

基本的例子

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

这呈现如下：

提交时，发送到服务器的数据键/值将是uname=Chris（如果在提交之前输入“Chris”作为输入值）。你必须记得name为你的输入设置一个，否则什么都不会被提交。

设置占位符placeholders

你可以在你的文本输入中提供一个有用的占位符，它可以给出使用该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>

呈现如下：

物理输入元素大小

输入框的物理尺寸可以使用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>

验证

text类型的<input>元素没有应用自动验证，但有一些客户端验证选项可供他们使用，我们将在下面讨论。

注意：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;
}

The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.

要求输入

您可以使用该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="45"
           placeholder="Usernames must be 4-8 characters in length"
           minlength="4" maxlength="8">
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

呈现如下：

如果您尝试提交少于4个字符的表单，则会给出相应的错误消息（这在浏览器中会有所不同）。如果您尝试输入超过8个字符，浏览器将不会让您。

格式验证

如果要进一步限制输入的数字以使其必须符合指定的模式才是有效的，则可以使用该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>

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

这呈现如下：

例子

You can see good examples of text inputs used in context in our Your first HTML form and How to structure an HTML form articles.

规范

规范	状态	评论
HTML生活标准在该规范中定义了'<input type ='text'>''。	生活水平	初始定义
HTML 5.1该规范中的<input type =“text”>“的定义。	建议	初始定义

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	(Yes)	(Yes)	1.0

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	iOS WebKit (Safari/Chrome/Firefox/etc)
Basic support	(Yes)	(Yes)	(Yes)	4.0 (4.0)	(Yes)	(Yes)	(Yes)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18