HTML input 元素属性介绍
本文介绍了 HTML input 元素的不同属性，以及各个属性的适用场景和用法。
<input> 元素有多种不同的输入类型，也有很多属性，并且不同输入类型的属性设置可能并不相同，本文介绍了 HTML <input> 元素的不同属性，以及各个属性的适用场景和用法。
值属性 value
<input> 元素的 value 属性设置输入字段的初始值。
具有初始（默认）值的输入字段：
<form>
<label for="name">姓名：</label><br />
<input type="text" id="name" name="name" value="张三" /><br />
<label for="age">年龄：</label><br />
<input type="text" id="age" name="age" value="19" />
</form>
只读属性 readonly
<input> 元素的 readonly 属性设置输入字段是只读的。
只读输入字段的值是无法修改的，但是，用户可以使用 Tab 键切换到它、突出显示它并从中复制文本。
提交表单数据时，只读输入字段会作为表单数据一并提交。
只读输入字段：
<form>
<label for="name">姓名：</label><br />
<input type="text" id="name" name="name" value="张三" readonly /><br />
<label for="age">年龄：</label><br />
<input type="text" id="age" name="age" value="19" />
</form>
禁用属性 disabled
<input> 元素的 disabled 属性设置输入字段是禁用的，不可点击，也不可编辑。
提交表单数据时，禁用输入字段不会被提交。
<form>
<label for="name">姓名：</label><br />
<input type="text" id="name" name="name" value="张三" disabled /><br />
<label for="age">年龄：</label><br />
<input type="text" id="age" name="age" value="19" />
</form>
尺寸大小 size
<input> 元素的 size 属性设置输入字段的可见宽度（以字符为单位），默认值为 20。
size 属性适用于输入类型为 text, search, tel, url, email 和 password 的输入字段。
设置输入字段的宽度：
<form>
<label for="name">姓名：</label><br />
<input type="text" id="name" name="name" size="50" /><br />
<label for="pin">PIN:</label><br />
<input type="text" id="pin" name="pin" size="4" />
</form>
maxlength 属性
<input> 元素的 maxlength 属性设置了输入字段允许的最大字符数。
设置输入字段的最大长度：
<form>
<label for="name">姓名：</label><br />
<input type="text" id="name" name="name" 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 属性设置输入字段的最小值和最大值，适用于输入类型为 number, range, date, datetime-local, month, time 和 week 的输入字段。
设置最大日期、最小日期和合法值范围：
<form>
<label for="datemax">输入早于 1980-01-01 的日期：</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />
<label for="datemin">输入晚于 2000-01-01 的日期：</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02" /><br /><br />
<label for="quantity">输入 1 - 5 之间的数字</label>
<input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>
多值属性 multiple
<input> 元素的 multiple 属性设置允许用户在输入字段中输入多个值。
该 multiple 属性适用于 email 和 file 输入类型。
接受多个值的文件上传字段：
<form>
<label for="files">请至少选择一个文件：</label>
<input type="file" id="files" name="files" multiple />
</form>
模式属性 pattern
<input> 元素的 pattern 属性设置一个正则表达式，当提交表单时，会根据正则表达式检查输入字段的值。
pattern 属性适用于 text, date, search, url, tel, email 和 password 输入类型。
只能包含三个字母（无数字或特殊字符）的输入字段：
<form>
<label for="country_code">国家代码</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="只能输入3微字母的国家代码" />
</form>
占位符属性
<input> 元素的 placeholder 属性设置了一个简短的提示，用于描述输入字段的样例或预期的格式。
在用户输入值之前， placeholder 值会显示在输入字段中。
该 placeholder 属性适用于 text, search, url, tel, email, password 输入类型。
带有占位符文本的输入字段：
<form>
<label for="phone">输入电话号码：</label>
<input type="tel" id="phone" name="phone" placeholder="010-12345678" pattern="[0-9]{3}-[0-9]{8}" />
</form>
required 属性
<input> 元素的 required 属性指示该输入字段必须填写，表单提交之前会检查此属性。
该 required 属性适用于 text, search, url, tel, email, password, date, datetime-local, month, time, week, number, checkbox, radio, file 输入类型。
必填字段：
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required />
</form>
步长属性 step
<input> 元素的 step 属性设置输入字段的合法数字间隔。示例：如果 step=“3”，则合法数字可以是 -3、0、3、6 等。
step 属性可与 max 和 min 属性一起使用来创建一系列合法值。
step 属性适用于 number, range, date, datetime-local, month, time, week 输入类型。
具有设置合法数字间隔的输入字段：
<form>
<label for="points">数量：</label>
<input type="number" id="points" name="points" step="3" />
</form>
自动对焦属性 autofocus
<input> 元素的 autofocus 属性设置输入字段应在页面加载时自动获得焦点。
让“名字”输入字段在页面加载时自动获得焦点：
<form>
<label for="name">姓名：</label><br />
<input type="text" id="name" name="name" autofocus /><br />
<label for="age">年龄：</label><br />
<input type="text" id="age" name="age" />
</form>
width 和 height 属性
<input type="image"> 元素使用 width 和 height 属性设置宽度和高度。
**提示：**始终设置图像的高度和宽度属性。如果设置了高度和宽度，则在加载页面时会保留图像所需的空间。没有这些属性，浏览器不知道图像的大小，也无法为其预留合适的空间，则网页可能在加载过程中闪烁。
定义一个图像作为提交按钮，具有高度和宽度属性：
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="age">年龄：</label>
<input type="text" id="age" name="age" /><br /><br />
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />
</form>
list 属性
<input> 元素通过 list 属性指定预定义的选项列表 <datalist> 元素。
使用 <datalist> 中具有预定义列表的 <input> 元素：
<form>
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
</form>
自动完成属性 autocomplete
<input> 元素的 autocomplete 属性设置表单或输入字段是否应打开或关闭自动完成功能。
自动完成允许浏览器预测值。当用户开始在字段中键入时，浏览器应根据先前键入的值显示用于填充该字段的选项。
autocomplete 属性适用 text, search, url, tel, email, password, date, datetime-local, month, time, week, range, color 输入类型。
为一个输入字段打开和关闭自动完成功能的 HTML 表单：
<form action="/action_page.php" autocomplete="on">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="age">年龄：</label>
<input type="text" id="age" name="age" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off" /><br /><br />
<input type="submit" value="Submit" />
</form>
! **提示：**在某些浏览器中，您可能需要在设置中激活自动完成功能才能使其工作。
form 属性
<input> 元素通过 form 属性指定所属的表单，该属性的值必须等于它所属的 <form> 元素的 id 属性。通过这个属性，让不在 <form> 容器中的的元素仍然是表单的一部分。
位于 HTML 表单之外的输入字段：
<form action="/action_page.php" id="form1">
<label for="name">姓名：</label> <input type="text" id="name" name="name" /><br /><br />
<input type="submit" value="Submit" />
</form>
<label for="age">年龄：</label>
<input type="text" id="age" name="age" form="form1" />
formaction 属性
按钮的 formaction 属性指定表单处理程序的 URL，此属性会覆盖 <form> 元素的 action 属性。
formaction 属性适用于 submit 和 image 输入类型。
带有两个不同的操作提交按钮的 HTML 表单：
<form action="/action_page.php">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="age">年龄：</label>
<input type="text" id="age" name="age" /><br /><br />
<input type="submit" value="提交" />
<input type="submit" formaction="/action_page2.php" value="提交到另一个表单处理程序" />
</form>
formenctype 属性
按钮的 formenctype 属性指定提交表单时对数据的编码方法（仅适用于 POST 方法），此属性会覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于 submit 和 image 输入类型。
第一个按钮使用默认编码发送数据，第二个使用“multipart/form-data”编码数据：
<form action="/action_page_binary.asp" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" /><br /><br />
<input type="submit" value="Submit" />
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" />
</form>
formmethod 属性
按钮的 formmethod 属性指定发送表单的方法，此属性会覆盖 <form> 元素的 method 属性。
formmethod 属性适用于 submit 和 image 输入类型。
GET 方法注意事项：
- 将表单数据以 名称/值 对的形式附加到 URL
- 切勿使用 GET 发送敏感数据，因为提交的表单数据在 URL 中可见
- URL 的长度有限制（2048 个字符）
- GET 对于用户想要为结果添加书签的表单提交很有用
- GET 适用于非安全数据，例如 Google 中的查询字符串
POST 注意事项：
- 在 HTTP 请求的正文中附加表单数据（提交的表单数据未显示在 URL 中）
- POST 没有大小限制，可用于发送大量数据。
- 使用 POST 提交的表单无法添加书签
第一个按钮使用 GET 发送表单数据，第二个使用 POST 发送表单数据：
<form action="/action_page.php" method="get">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="age">年龄：</label>
<input type="text" id="age" name="age" /><br /><br />
<input type="submit" value="使用 GET 提交" />
<input type="submit" formmethod="post" value="使用 POST 提交" />
</form>
formtarget 属性
按钮的 formtarget 属性指定发送表单的方法，此属性会覆盖 <form> 元素的 target 属性。
formtarget 属性适用于 submit 和 image 输入类型。
具有两个提交按钮的表单，具有不同的目标窗口：
<form action="/action_page.php">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" /><br /><br />
<label for="age">年龄：</label>
<input type="text" id="age" name="age" /><br /><br />
<input type="submit" value="当前窗口提交表单" />
<input type="submit" formtarget="_blank" value="表单提交到新窗口/新标签" />
</form>
formnovalidate 属性
按钮的 formnovalidate 属性指定发送表单的方法，此属性会覆盖 <form> 元素的 novalidate 属性。
formnovalidate 属性适用于 submit 输入类型。
带有两个提交按钮的表单（带验证和不带验证）：
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" /><br /><br />
<input type="submit" value="校验后提交" />
<input type="submit" formnovalidate="formnovalidate" value="不校验提交" />
</form>