input 是 HTML 表单里最核心的单标签元素，它依靠不同属性来切换输入类型，控制校验，设置默认值，绑定事件与表单行为，input 标签属性分为核心基础属性，类型控制属性，表单校验属性，样式与交互属性，HTML5 新增属性这几大类，很多初学者只记住 type 和 value，忽略 name placeholder required 等关键属性，会导致表单提交失败，校验不生效，前端开发的时候必须理解每个属性的作用，name 属性是表单提交的关键字段名，没有 name 属性的数据不会随表单提交，type 决定这个输入框是文本框密码框单选框复选框还是文件上传，不同 type 下部分属性才会生效，比如 max min 只在 number date 这类类型才具备意义，学习的时候不要死记硬背，要结合属性生效场景理解，区分全局属性和 input 专属属性，全局属性比如 id class style 所有 HTML 标签都可以使用，不属于 input 独有的属性。
核心属性分类清单
基础必备属性
| 属性 | 作用说明 |
|---|---|
| type | 定义 input 输入类型，常用值 text password number email tel date file radio checkbox submit reset hidden |
| name | 表单字段名称，提交表单的时候作为键名，后端接收数据依靠这个属性 |
| value | 输入框的值，单选复选按钮还可以通过 value 定义提交的实际数据 |
| id | 唯一标识，用于 js 获取 dom 元素，css 选择器定位 |
| class | 类名，用于 css 样式控制，支持多个类名空格分隔 |
| style | 行内样式，直接写 css 代码修改外观 |
HTML5 新增交互与校验属性
| 属性 | 作用说明 |
|---|---|
| placeholder | 输入框提示占位文字，用户输入内容之后自动消失，不会作为 value 值 |
| required | 必填校验，表单提交的时候如果为空，浏览器自动拦截并提示 |
| readonly | 只读，用户不能修改内容，但是数据可以随表单提交 |
| disabled | 禁用输入框，变灰不可操作，设置之后该 input 标签的数据不会提交表单 |
| maxlength | 限制文本最大可输入字符数量 |
| minlength | 限制文本最小输入字符数量 |
| min | 最小值，适配 number range date 类型 |
| max | 最大值，适配 number range date 类型 |
| step | 步长，number 和 range 类型，控制每次增减的间隔数值 |
| pattern | 正则表达式校验，自定义输入格式规则 |
| autocomplete | 自动补全，取值 on 或者 off，控制浏览器是否记住历史输入 |
| autofocus | 页面加载完成之后自动获得焦点 |
| multiple | 允许多选，file 类型多选文件，email 类型填写多个邮箱 |
| accept | 仅 file 类型生效，限定可选择文件的 MIME 类型或者后缀 |
| form | 把 input 标签关联到页面其他 form 表单，即使 input 不在 form 标签内部也可以参与提交 |
| formaction | submit 类型专用，覆盖 form 原本的提交地址 |
| formmethod | submit 类型专用，覆盖 form 原本的提交方式 get 或者 post |
其他辅助属性
| 属性 | 作用说明 |
|---|---|
| size | 设置输入框可视宽度，单位是字符，现代开发一般改用 css 宽度控制 |
| alt | image 类型 input 的替代文本 |
| src | image 类型 input 的图片地址 |
| height | image 类型 input 图片高度 |
| width | image 类型 input 图片宽度 |
| checked | radio checkbox 类型，设置默认选中状态 |
| list | 关联 datalist，实现带下拉建议的输入框 |
属性使用学习步骤
第一步 先掌握最基础四个属性 type name value id，这是开发高频使用属性
第二步 学习校验类属性 required maxlength min max pattern，理解浏览器原生表单校验逻辑
第三步 区分 readonly 和 disabled，这是面试高频考点，重点记住 disabled 不提交数据
第四步 学习 HTML5 新增属性，结合对应的 type 类型，确认属性生效前提
第五步 编写测试代码，逐个修改属性值，在浏览器查看渲染效果和提交行为
第六步 区分全局属性和 input 专属属性，不要把所有属性都当成 input 独有属性
深度补充要点
input 是自闭合标签，不需要写闭合标签，属性全部写在标签尖括号内部，属性值一般用双引号包裹，布尔类属性比如 required disabled autofocus checked，写法比较特殊，只写属性名就代表开启，不需要写等于 true，当然也可以写成 required="required"。
不同 type 对属性支持是有限制的，比如 placeholder 不能作用于 radio 和 checkbox，min 和 max 不能作用于普通 text 文本框，写代码的时候如果属性不生效，优先检查当前 type 是否支持这个属性，很多 bug 都是选错 type 造成。
还有事件类属性属于 HTML 事件属性，比如 onclick oninput onchange，这类也可以写在 input 标签上，属于 HTML 原生事件属性，现在项目开发更多推荐 js 绑定事件，不再推荐直接写行内事件属性。
【常见问题】
问题 1 input 标签属性 readonly 和 disabled 有什么核心差别
回答 1 input 标签属性 readonly 只是禁止用户编辑，表单提交的时候这个 input 标签的数据仍然会上传，input 标签属性 disabled 会直接禁用控件，控件置灰，表单提交的时候该 input 标签的数据不会提交到后端。
问题 2 input 标签属性 pattern 是所有 type 都可以使用吗
回答 2 input 标签属性 pattern 主要适用于 text email tel url 这类文本类输入类型，并不是全部 type 都支持，radio checkbox file 类型使用 input 标签属性 pattern 没有任何校验效果，使用前要确认当前 type 支持该属性。
问题 3 input 标签属性 name 为什么不能省略
回答 1 input 标签属性 name 是表单提交的键名，如果 input 标签缺少 name 属性，浏览器提交表单的时候会直接忽略这个输入项的数据，后端无法接收，所以参与表单提交的 input 标签必须填写 name 属性。
【免责申明】
本内容仅作为前端 HTML 学习参考，不同浏览器对 input 标签属性的原生校验支持存在差异，新标准属性在老旧浏览器可能不兼容，本内容不替代官方 W3C 规范文档，不构成项目开发强制规范。