HTML 输入属性
本章介绍 HTML 的不同属性<input>元素。
值属性
输入value属性指定输入字段的初始值：
示例
具有初始（默认）值的输入字段：
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
亲自试一试 »
只读属性
输入readonly属性指定输入字段是只读的。
只读输入字段无法修改（但是，用户可以使用 Tab 键切换到该字段、突出显示该字段并从中复制文本）。
提交表单时将发送只读输入字段的值！
示例
只读输入字段：
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
亲自试一试 »
禁用属性
输入disabled属性指定应禁用输入字段。
禁用的输入字段无法使用且不可单击。
提交表单时，不会发送禁用输入字段的值！
示例
禁用的输入字段：
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
亲自试一试 »
尺寸属性
输入size属性指定输入字段的可见宽度（以字符为单位）。
默认值为size是 20。
笔记：这个size属性适用于以下输入类型：文本、搜索、电话、url、电子邮件和密码。
示例
设置输入字段的宽度：
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
亲自试一试 »
最大长度属性
输入maxlength属性指定输入字段中允许的最大字符数。
笔记：当一个maxlength设置后，输入字段将不会接受超过指定数量的字符。但是，该属性不提供任何反馈。所以，如果你想提醒用户，你必须编写JavaScript代码。
示例
设置输入字段的最大长度：
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
亲自试一试 »
最小和最大属性
输入min和max属性指定输入字段的最小值和最大值。
这个min和max属性适用于以下输入类型：数字、范围、日期、本地日期时间、月份、时间和星期。
提示：一起使用 max 和 min 属性可以创建一系列合法值。
示例
设置最大日期、最小日期和合法值范围：
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
亲自试一试 »
多重属性
输入multiple属性指定允许用户在输入字段中输入多个值。
这个multiple属性适用于以下输入类型：电子邮件和文件。
示例
接受多个值的文件上传字段：
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
亲自试一试 »
模式属性
输入pattern属性指定一个正则表达式，提交表单时将根据该正则表达式检查输入字段的值。
这个pattern属性适用于以下输入类型：文本、日期、搜索、url、电话、电子邮件和密码。
提示：使用全局标题属性来描述模式以帮助用户。
提示：学习更多关于常用表达在我们的 JavaScript 教程中。
示例
只能包含三个字母的输入字段（不能包含数字或特殊字符）：
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
亲自试一试 »
占位符属性
输入placeholder属性指定描述输入字段的预期值的简短提示（样本值或预期格式的简短描述）。
在用户输入值之前，简短提示会显示在输入字段中。
这个placeholder属性适用于以下输入类型：文本、搜索、url、电话、电子邮件和密码。
示例
带有占位符文本的输入字段：
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
亲自试一试 »
所需属性
输入required属性指定在提交表单之前必须填写输入字段。
这个required属性适用于以下输入类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、单选按钮和文件。
示例
必填输入字段：
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
亲自试一试 »
步骤属性
输入step属性指定输入字段的合法数字间隔。
示例：如果 step="3"，则合法数字可以是 -3、0、3、6 等。
提示：该属性可以与 max 和 min 属性一起使用来创建合法值的范围。
这个step属性适用于以下输入类型：数字、范围、日期、本地日期时间、月份、时间和星期。
示例
具有指定合法数字间隔的输入字段：
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
亲自试一试 »
笔记：输入限制并不是万无一失的，JavaScript 提供了很多方法来添加非法输入。为了安全地限制输入，还必须由接收者（服务器）进行检查！
自动对焦属性
输入autofocus属性指定页面加载时输入字段应自动获得焦点。
示例
让 "First name" 输入字段在页面加载时自动获得焦点：
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
亲自试一试 »
高度和宽度属性
输入height和width属性指定高度和宽度<input type="image">元素。
提示：始终指定图片的高度和宽度属性。如果设置了高度和宽度，则在加载页面时会保留图片所需的空间。如果没有这些属性，浏览器就不知道图片的大小，也无法为其保留适当的空间。其效果是页面布局在加载期间（图片加载时）发生变化。
示例
定义一个图片作为提交按钮，具有高度和宽度属性：
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
亲自试一试 »
列表属性
输入list属性指的是<datalist>包含 <input> 元素的预定义选项的元素。
示例
<datalist> 中具有预定义值的 <input> 元素：
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
亲自试一试 »
自动完成属性
输入autocomplete属性指定表单或输入字段是否应打开或关闭自动完成功能。
自动完成允许浏览器预测该值。当用户开始在字段中键入时，浏览器应根据先前键入的值显示填充该字段的选项。
这个autocomplete属性适用于<form>以及以下内容<input>类型：文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。
示例
一种 HTML 表单，可打开和关闭一个输入字段的自动完成功能：
<form action="/action_page.html" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
亲自试一试 »
提示：在某些浏览器中，您可能需要激活自动完成功能才能发挥作用（请在浏览器菜单中的 "Preferences" 下查看）。
HTML练习
HTML 表单和输入元素
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
有关所有可用 HTML 标签的完整列表，请访问我们的HTML 标签参考。