HTML参考手册
标签 | Elements
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.value
JavaScript中的属性来检索它。
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) |
标签 | Elements相关
超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。