HTML 中的 <input> 标签是表单中最常用的元素之一,拥有超过 50 个属性(包括全局属性和专用属性)。以下是分类整理的核心属性列表:


一、通用属性(所有 <input> 类型共用)

  1. 基础属性

    • type:输入类型(如 text, password, email, checkbox, radio, file, submit 等,共约 23 种)。
    • name:字段名称(表单提交的键名)。
    • value:默认值。
    • disabled:禁用输入。
    • readonly:只读(不可编辑)。
    • autofocus:页面加载自动聚焦。
    • placeholder:提示文本。
    • required:必填字段。
    • form:关联的表单 ID(可脱离 <form> 标签使用)。
  2. 事件处理属性

    • onclick, onchange, oninput, onfocus, onblur 等(用于 JavaScript 交互)。
  3. 全局 HTML 属性

    • class, id, style, title, data-*(自定义数据属性)等。

二、类型相关属性(根据 type 变化)

  1. 文本类输入(text, password, email, search 等)

    • maxlength:最大字符数。
    • minlength:最小字符数。
    • pattern:正则验证(如 [A-Za-z]{3})。
    • size:显示宽度(字符数)。
  2. 数值/范围输入(number, range

    • min:最小值。
    • max:最大值。
    • step:步长(如 0.1)。
  3. 日期时间输入(date, time, datetime-local

    • min/max:日期范围(格式如 2024-01-01)。
  4. 文件上传(file

    • accept:允许的文件类型(如 .jpg, image/*)。
    • multiple:允许多文件上传。
  5. 复选框/单选按钮(checkbox, radio

    • checked:默认选中。
  6. 按钮类(submit, reset, button

    • formaction, formenctype, formmethod:覆盖表单的提交行为。

三、现代 HTML5 新增属性

  • autocomplete:自动填充(如 on/off)。
  • list:关联 <datalist> 提供下拉选项。
  • inputmode:虚拟键盘类型(如 numeric, email)。
  • dirname:提交文本方向(如 ltr/rtl)。
  • formtarget:覆盖表单的 target(如 _blank)。

四、不常用但有用的属性

  • srctype="image"):图片按钮的 URL。
  • usemap:关联图像映射。
  • webkitdirectory(非标准):上传目录(仅 Chrome)。

总结

  • 核心属性约 20 多个(如 type, name, value 等)。
  • 类型专用属性约 10+ 个(如 min, max, accept)。
  • 全局属性(如 class, id)和事件属性未计入总数。

完整列表可参考 MDN Input 文档。实际开发中,常用属性约 15-20 个,其余按需使用。