HTML <input> 属性

HTML <input> 元素是表单中最常用的控件之一。通过设置不同的属性，可以控制 <input> 元素的行为、外观、验证规则等。以下是一些常见的 <input> 属性及其说明。

1. type

  • 说明：指定输入控件的类型，决定了控件的外观和功能。常见类型包括 text、password、email、radio、checkbox 等。
  • 示例：
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">

2. name

  • 说明：指定控件的名称，表单提交时该值将作为键发送到服务器。
  • 示例：
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">

3. value

  • 说明：设置或获取输入控件的默认值。对于文本输入框和按钮，value 指定初始显示内容。对于复选框和单选按钮，value 指定提交时提交的值。
  • 示例：
<input type="text" name="username" value="john_doe">
<input type="submit" value="提交">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

4. placeholder

  • 说明：为输入框提供提示文本，通常在输入框为空时显示，用户输入内容后提示文本消失。
  • 示例：
<input type="text" name="email" placeholder="请输入邮箱地址">
<input type="password" name="password" placeholder="请输入密码">

5. id

  • 说明：为元素指定唯一的标识符，通常与 <label> 元素配合使用，增强可访问性。
  • 示例：
<label for="username">用户名:</label>
<input type="text" id="username" name="username">

6. class

  • 说明：为元素指定一个或多个类名，通常用于 CSS 样式或 JavaScript 操作。
  • 示例：
<input type="text" name="username" class="input-field">

7. required

  • 说明：指定该输入字段为必填项，表单提交时如果该字段为空，将触发浏览器验证。
  • 示例：
<input type="text" name="username" required placeholder="请输入用户名">
<input type="email" name="email" required placeholder="请输入邮箱">

8. readonly

  • 说明：使输入框只读，用户无法修改内容，但可以提交内容。
  • 示例：
<input type="text" name="username" value="john_doe" readonly>

9. disabled

  • 说明：禁用输入框，用户无法与该输入控件进行交互，也无法提交该控件的数据。
  • 示例：
<input type="text" name="username" disabled placeholder="该字段已禁用">

10. maxlength

  • 说明：限制用户在文本框中输入的最大字符数。
  • 示例：
<input type="text" name="username" maxlength="20" placeholder="最多输入20个字符">

11. minlength

  • 说明：限制用户在文本框中输入的最小字符数。
  • 示例：
<input type="password" name="password" minlength="8" placeholder="密码至少8个字符">

12. min 和 max

  • 说明：用于数字、日期、时间等输入类型，指定输入的最小值和最大值。
  • 示例：
<input type="number" name="age" min="18" max="100" placeholder="请输入年龄">
<input type="date" name="dob" min="1900-01-01" max="2025-12-31">

13. step

  • 说明：用于数字和日期输入类型，定义允许输入的步长值。常用于调整数字的增量。
  • 示例：
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
<input type="time" name="meetingTime" step="900">

14. autofocus

  • 说明：自动聚焦输入框，当页面加载时，输入框会自动获得焦点。
  • 示例：
<input type="text" name="username" autofocus placeholder="请输入用户名">

15. autocomplete

  • 说明：控制浏览器是否启用自动完成。on 表示启用，off 表示禁用。
  • 示例：
<input type="email" name="email" autocomplete="on" placeholder="请输入邮箱">

16. accept

  • 说明：用于文件输入框（type="file"），指定用户可上传的文件类型。
  • 示例：
<input type="file" name="file" accept="image/*">
  • 用途：可以限制上传的文件类型，例如只允许上传图像、视频或文档等。

17. multiple

  • 说明：用于文件输入框，允许用户选择多个文件进行上传。
  • 示例：
<input type="file" name="files" multiple>
  • 用途：用户可以选择多个文件进行上传。

18. pattern

  • 说明：为输入框指定一个正则表达式，只有匹配该模式的数据才能提交。
  • 示例：
<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="请输入邮政编码">
  • 用途：常用于输入格式验证，如电话号码、邮政编码等。

19. size

  • 说明：指定输入框的可见字符宽度。对于文本框，设置此属性可以控制显示的宽度（以字符为单位）。
  • 示例：
<input type="text" name="username" size="20" placeholder="最多显示20个字符">

20. form

  • 说明：指定该输入控件属于哪个表单。这个属性可以将一个 <input> 控件与多个表单关联。
  • 示例：
<form id="form1" action="submit_form1.php">
    <input type="text" name="username">
</form>

<form id="form2" action="submit_form2.php">
    <input type="text" name="username" form="form1">
</form>

21. target

  • 说明：在使用 type="image" 的情况下，指定点击图像提交表单后的目标窗口。
  • 示例：
<input type="image" src="submit_button.png" alt="Submit" target="_blank">
  • 用途：通常与 type="image" 一起使用。

总结

通过使用不同的 <input> 属性，可以定制表单控件的行为和验证规则。合理利用这些属性，可以提高表单的用户体验、增强表单验证并确保数据的准确性。