前端表单控件图鉴：12个输入组件，搞懂每个状态才能让AI秒懂
输入框、下拉、开关、滑块……表单是业务系统出现率最高的界面，也是最容易出bug的地方。每个控件的状态、校验、反馈、AI提需求的话术，这篇全讲透。
写在前面
收集用户输入的全套控件。表单是业务系统出现率最高的界面，控件的每个状态都值得认识。
这篇文章面向三类读者：刚开始用AI写代码、但没系统学过前端的新手；前端零基础、看到设计稿叫不出组件名字的爱好者；以及有开发经验、但不太会向AI精准描述前端需求的开发者。
每个组件都会讲清楚：叫什么、长什么样、什么时候用、怎么跟AI描述（附好/坏话术对比）、常见误区是什么。看完这一篇，下次看设计稿、跟开发沟通、给AI提需求，你都能精准叫出名字、说清要求。
1. 文本输入框（Text Input）
别名：输入框、文本框
这是什么
单行文本录入控件；配套标签、占位符、清空与校验反馈。
输入框是最常用表单控件。沟通模板：字段标签、占位符文案（给示例而非说明）、输入类型（文本/数字/密码）、可选项（清空按钮、字数限制、前后缀单位如 ￥/kg）。
状态设计是 AI 经常遗漏的部分：聚焦高亮、校验成功/失败、disabled 与 readonly（不可编辑但可复制，区别于禁用）、密码框的「显示/隐藏」切换。给 AI 的完整句式：「手机号输入框，占位 请输入手机号，11 位校验，失焦即校验并显示错误文案」。
单行文本录入。完整状态含：占位文案（placeholder）、聚焦态、错误态（红框+提示）、禁用态、前后置图标。
打个比方
输入框像挂号窗口：格子要写明「姓名/科室」（标签与占位），填错要当场告诉你哪错了（校验反馈），而不是出院才通知。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：邮箱输入框：type=email，失焦校验格式，错误时红色边框加提示文案，提供清空按钮。
❌ 避免：放个输入框 —— 缺标签、类型、校验与反馈，AI 生成裸 input，表单体验全靠你事后补。
常见误区
- placeholder 可以当表单标签？占位符在失焦空值时消失，不能替代永远可见的 label。
实战要点
单行文本录入。
完整状态含：占位文案（placeholder）、聚焦态、错误态（红框+提示）、禁用态、前后置图标。
2. 搜索框（Search Input）
别名：搜索栏、Search Bar、检索框
这是什么
带图标与清空按钮的输入框；联想、防抖、回车与键盘导航是标配。
搜索框与普通输入框的差异都在周边配套：搜索图标、清空按钮（有内容才出现）、聚焦时的建议列表、回车触发、可选的历史记录。
工程要点：联想请求必须防抖 + 竞态防护；空关键词的边界（回车但没输入）；建议列表的键盘导航（↑↓ 选择、Enter 选中、Esc 关闭）。给 AI 的完整描述：「顶部搜索框：输入 300ms 防抖请求联想，下拉展示结果支持键盘选择，点清空恢复初始列表」。
带放大镜图标的输入框，常配清除按钮与实时联想下拉。页内过滤用小框、独立搜索页用大框；输入即过滤还是回车再搜，要提前约定。
打个比方
搜索框像图书馆检索台：输入即出候选书名（联想），回车才正式翻库（提交），旁边有个小红叉随时清空重来。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：全站搜索：输入防抖 300ms 调联想接口，命中高亮，Enter 进入结果页，支持键盘 ↑↓ 选择建议项。
❌ 避免：搞个能搜的框 —— 联想要不要、防抖多久、回车去哪都没说，AI 生成的是没有灵魂的裸输入框。
常见误区
- 搜索联想必须实时？数据量大或接口贵时按需触发（如输入两个字符以上）反而更合理。
实战要点
带放大镜图标的输入框，常配清除按钮与实时联想下拉。
页内过滤用小框、独立搜索页用大框；输入即过滤还是回车再搜，要提前约定。
3. 多行文本框（Textarea）
别名：文本域、留言框
这是什么
多行文本录入区；可配初始行数、字数上限与自适应高度。
多行文本适合备注、描述、评论这类长内容。关键参数：初始行数 rows、最大长度 maxlength（要配字数计数器）、自适应高度 autosize、是否允许换行。
产品细节常被 AI 忽略：粘贴超长内容的处理（截断还是拒绝）、空行折叠规则、输入法组合态。向 AI 描述时给业务规则而非只说「大文本框」：「描述框最多 500 字，右下角实时计数，超出截断并提示」。
多行输入，用于长文本：备注、简介、反馈。右下角字数统计是常见配套。
打个比方
文本框像意见簿：格子多深取决于想收多少字，还要贴一张「限 500 字」的说明（字数计数）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：评论 textarea：初始 3 行自适应到 8 行，上限 200 字，右下角字数计数接近上限时变红。
❌ 避免：搞个大一点的输入框 —— 行数、限长、自适应都没说，AI 的默认实现大概率与你的规格不符。
常见误区
- textarea 和 input 没区别？input 单行不能换行，textarea 支持多行与 resize，语义不同。
实战要点
多行输入，用于长文本：备注、简介、反馈。
右下角字数统计是常见配套。
4. 下拉选择（Select）
别名：下拉框、选择器
这是什么
从固定候选中单选/多选；注意原生 select 与自定义组件的差异。
候选集固定且几十项以内时用下拉选择：默认收起一个框，点开出现列表。关键参数：默认值、可搜索（选项多时）、多选、分组、禁用项。
选型的现实考量：原生 select 样式难统一但零依赖、无障碍天然；自定义下拉（组件库）体验可控但要处理点击外部关闭、键盘导航、焦点管理。给 AI 的句式：「状态筛选下拉，含 全部/待审核/已通过/已驳回，多选且可清空」。
从预设选项中选一个（或多个）。选项多于 5 个或空间紧张时优于单选按钮组。
打个比方
下拉像点餐机的固定套餐菜单：列什么就点什么，不会出现「其他」这种开放式选项（那应该用输入框）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：城市选择用可搜索下拉：接口提供列表，本地过滤，选中显示完整名称，支持键盘上下选择。
❌ 避免：弄个能选的框 —— 单选多选、数据来源、可搜索都没说，AI 大概率生成一个静态空列表。
常见误区
- 下拉选择什么都适合？候选无限或需精确输入的场景，下拉是灾难，该用带建议的输入框。
实战要点
从预设选项中选一个（或多个）。
选项多于 5 个或空间紧张时优于单选按钮组。
5. 标签输入框（Tag Input / Input Chips）
别名：输入框chip、输入框 Chip、Input Chip、标签选择器、收件人输入框
这是什么
小尺寸类别标记：可着色表状态、可关闭、可点击筛选。
Tag/Chip 用一句话标记对象的类别或状态：订单状态、文章分类、技能标签。与徽标的区别：Tag 是静态分类信息，Chip 更强调可交互（点击筛选、右上角关闭移除）。
高频用法与细节：不同状态配不同语义色（成功绿/警告橙/危险红/信息蓝）；可关闭的 Tag 关闭后要回调父级更新；可点击筛选的 Chip 要体现选中态。嵌在输入框里的形态叫输入型 Chip（标签输入框）：回车固化、× 移除，收件人与筛选条件回显都是它。给 AI 的句式：「订单状态列渲染成 Tag：待支付橙、已支付蓝、已发货紫、已完成绿、已取消灰，可点击按状态筛选」。
在输入框里把一段段输入固化成可删除的小胶囊：收件人、话题标签、筛选条件回显。本质是多选的回显形态——回车确认生成、× 单独移除、退格删末尾。
打个比方
标签像超市货架的分类牌：告诉你这是什么类（状态）；点牌子就只看这一类（筛选），拆掉牌子（关闭）则货品不再属于该类。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：多选筛选用 Chip：选中标签高亮并显示勾号，右上角小叉可单独移除，底部显示已选条件可一键清空。
❌ 避免：给状态加个标签 —— 颜色语义与是否可交互未定，AI 生成清一色灰 Tag，状态一眼分不出来。
常见误区
- 标签颜色随便配？状态色需全站统一语义（成功/警告/危险），换项目也要沿用约定。
实战要点
在输入框里把一段段输入固化成可删除的小胶囊：收件人、话题标签、筛选条件回显。
本质是多选的回显形态——回车确认生成、× 单独移除、退格删末尾。
6. 复选框（Checkbox）
别名：多选框、勾选框
这是什么
可多选的勾选框；有半选态（indeterminate），批量操作场景的标配。
复选框表达「可同时选多个」：勾选/取消、全选与半选（部分子项选中时父项显示短横）、禁用。它与单选框（只能选一）的分工是产品设计第一课。
交互细节高频被 AI 漏掉：点击整行文字是否切换（通常要）、全选与子项的联动、选中数量提示。向 AI 描述：「列表头全选复选框，子项全选时打勾、部分选中显示半选态，底部条显示已选数量与批量操作」。
可多选的勾选控件，「全选」常配半选（indeterminate）状态。与开关的区别：勾选用于「提交的选择」，开关用于「立即生效的切换」。
打个比方
复选框像火锅勾菜单：可以同时勾肥牛和毛肚（多选）；单选框则是锅底——鸳鸯/清汤只能二选一。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：多选表格用复选框：表头全选联动子项，部分选中显示半选态，底部工具栏按选中数显示操作。
❌ 避免：加个勾选功能 —— 多选还是单选、是否联动全选都没定义，AI 只能做个孤立的 checkbox。
常见误区
- 半选态是个可点击的第三状态？indeterminate 只是展示态，点击它应进入全选或全不选。
实战要点
可多选的勾选控件，「全选」常配半选（indeterminate）状态。
与开关的区别：勾选用于「提交的选择」，开关用于「立即生效的切换」。
7. 单选组（Radio Group）
别名：单选按钮、Radio
这是什么
一组互斥选项只能选其一；选项过多时应改用下拉或分段控件。
单选框组强调「从 N 个里必选一」：默认值、禁用项、垂直还是水平排列、选项过多时的替代方案（下拉、分段按钮）。
无障碍要点：整组用 fieldset 包裹，键盘方向键切换选项。给 AI 的完整描述：「支付方式单选组：微信/支付宝/银行卡，默认微信，银行卡选中时下方展开卡号输入」——这类选中分支展开的联动正是 AI 容易漏写的逻辑。
互斥选择：一组里只能选一个，且选定后不能取消（只能换选）。选项 2-5 个且需要全部可见时优于下拉。
打个比方
单选组像相亲必答项：籍贯、学历、收入各勾一个，多勾会被打回（互斥）；选项太多就该换成下拉筛选。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：偏好设置用单选组：通知方式 站内/邮件/关闭 三选一，默认站内；选关闭时隐藏下方的通知预览。
❌ 避免：选项选一个就行 —— 没说选项内容与联动行为，AI 产出无法与你的业务状态绑定。
常见误区
- 单选和复选框效果差不多？单选=互斥二选一，复选框=可多选，交互语义完全不同。
实战要点
互斥选择：一组里只能选一个，且选定后不能取消（只能换选）。
选项 2-5 个且需要全部可见时优于下拉。
8. 开关（Switch / Toggle）
别名：切换开关、Toggle
这是什么
二值状态的即时开关：切换即生效，破坏性开关要二次确认。
开关适合「立即生效」的二元设置：开启通知、黑暗模式、自动续费。视觉像灯开关，切换瞬间就改变系统状态，不需要「保存」按钮——这是它与复选框的本质差异：复选框等提交，开关即点即生效。
设计守则：开/关有明确后果时要给反馈文案（「已开启推送」）；破坏性开关（停用账号）需要二次确认。给 AI 描述：「自动续费开关，开启时弹确认框说明扣费规则，关闭时直接生效并 toast 提示」。
拨动后立即生效的二元状态控件：开/关。典型如「接受通知」。操作型设置用开关，表单提交型选择用复选框。
打个比方
开关像房间灯闸：按下去灯立刻亮（即时生效）；复选框则像购物清单——勾了还要等「提交」才作数。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：设置项用 switch：开启「新消息提醒」立即生效并 toast 确认；关闭弹二次确认避免误关。
❌ 避免：弄个开关按钮 —— 没说是否即时生效与后果，AI 可能做成点一下才保存的伪开关。
常见误区
- 开关就是美化过的复选框？switch 代表即时二元动作，checkbox 代表可推迟提交的多选状态，语义不同。
实战要点
拨动后立即生效的二元状态控件：开/关。
典型如「接受通知」。
操作型设置用开关，表单提交型选择用复选框。
9. 滑块（Slider）
别名：滑动条、拖动条
这是什么
拖拽取值的控件：连续范围或离散档位，注意回调节流。
滑块用于「区间取值」：音量、价格区间、评分。参数：min/max/step（步长决定离散或连续）、是否支持范围（双滑块）、刻度标签、拖拽中实时显示当前值。
细节决定体验：拖拽过程触发的回调要节流或只在松手时提交（否则接口被高频请求打爆）；双滑块的两端边界要防交叉。给 AI 的句式：「价格区间双滑块：min 0 max 1000 step 50，拖拽中只本地显示数值，松手后才触发查询」。
在一个连续区间内拖动取值，如音量、价格范围。可带刻度与当前值气泡；精细输入应配数字框。
打个比方
滑块像收音机音量旋钮：一边转一边听变化（连续反馈），也能咔哒咔哒卡在固定档位（step 离散）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：视频进度条：支持点击跳转与拖拽预览，拖拽中暂停更新主界面，松手后 seek。
❌ 避免：加个可以拖的条 —— 取值范围、离散连续、拖拽节流都没说，AI 的默认实现会拖一下打一堆请求。
常见误区
- 滑块适合精确输入？它只适合模糊选择；要输「正好 15.5」还是用数字输入框。
实战要点
在一个连续区间内拖动取值，如音量、价格范围。
可带刻度与当前值气泡；精细输入应配数字框。
10. 日期选择器（Date Picker）
别名：日历选择、日期控件
这是什么
日期/时间/范围选择控件；格式、时区与禁用日期是三大坑。
日期选择常见形态：单选日期、日期+时间、范围选择（开始-结束）、周/月选择。给 AI 的关键参数：日期格式、快捷选项（今天/近 7 天）、可禁用日期（过去日期、已满房源）。
工程三坑：字符串格式与时区——传给后端应为 ISO 而非本地化字符串；范围选择的开始晚于结束要自动校正；「今天」的定义在跨时区用户上是玄学，先约定用哪个时区。给 AI 描述：「入住日期选择：禁用今天之前，入住早于退房，离店日期不可早于入住」。
从日历面板选日期或区间。变体：范围选择、月份选择、快捷选项（近 7 天）。也常见纯文本输入 + 格式校验的轻量形态。
打个比方
日期选择像车站售票窗口：告诉它出发日和返程日（范围），它还帮你挡掉「昨天出发」这种不可能的组合（禁用逻辑）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：订单筛选加日期范围选择：默认近 30 天，提供 今天/近7天/本月 快捷项，传后端统一为 YYYY-MM-DD。
❌ 避免：做个选日期的 —— 范围还是单点、禁用什么日期、格式都没定，AI 的默认实现十有八九时区踩雷。
常见误区
- 日期选择器显示的格式就是传输格式？显示格式是给人看的，传输必须标准化并考虑时区。
实战要点
从日历面板选日期或区间。
变体：范围选择、月份选择、快捷选项（近 7 天）。
也常见纯文本输入 + 格式校验的轻量形态。
11. 评分（Rate / Rating）
别名：星级评分、打星、Rating
这是什么
1~5 星打分控件：可只读展示或可交互打分，半星与 hover 预览是细节。
星级评分把「感觉」量化成 1~5 分：商品评分展示（只读）、用户打分（可交互）、筛选（多少星以上）。细节：hover 实时预览、点击后锁定、可选半星、键盘可达（方向键调星）。
展示与交互两态要分清：只读态只是数据展示（配分数文本「4.6」），可交互态才有 hover/click。给 AI 的句式：「图书详情只读评分 4.5 星 + 评价人数；我的打分用可交互星级，默认 0 星，hover 高亮预览，提交后锁定」。
用星级或分数表达评价：可交互选择，也可只读展示。支持半星与清零；只读展示要去掉悬停态，只留静态星色。
打个比方
星级像餐厅点评：先看你打几分（展示），轮到你也可以自己比划（打分），中途还能反悔（hover 预览未提交）。
怎么跟AI说
面向AI编程初学者：精准的描述 = 一次生成对的结果。下面是好/坏对比。
✅ 推荐：可交互星级：支持半星与键盘方向键调节，点击后高亮锁定并显示所选分数，未选择时文案提示「点击评分」。
❌ 避免：弄个五星评分 —— 只读还是可交互、半星、默认值都没说，AI 大概率做一个不可交互的死星星。
常见误区
- 星级只能整颗跳？半星表达 4.5 这类中间值是常见需求，实现上按 0.5 步长即可。
实战要点
用星级或分数表达评价：可交互选择，也可只读展示。
支持半星与清零；只读展示要去掉悬停态，只留静态星色。
12. 数字输入框（Input Number）
别名：数字输入、步进器、Stepper
这是什么
只能输入数字的输入框，常配 +/- 步进按钮，可限定最小值、最大值与步长。数量、份数等精确取值用它，感受区间用滑块。
实战要点
只能输入数字的输入框，常配 +/- 步进按钮，可限定最小值、最大值与步长。
数量、份数等精确取值用它，感受区间用滑块。
小结
表单控件的核心原则是：状态完整（默认/聚焦/错误/禁用/成功缺一不可）、反馈即时（输入就校验，不要等提交才报错）、语义正确（开关=即时生效，复选框=提交选择，别搞混）、约束明确（格式、大小、范围要提前说清）。表单是用户和系统对话的界面，每个控件都是一句话——话说清楚了，用户才愿意填完。跟AI提表单需求时，一定要说清每个字段的校验规则和错误提示文案。
