输入框
Input
UI 组件也叫：文本框、单行输入框、TextField、Text Input
一句话：让用户输入一行简短文字的框，比如姓名、手机号、邮箱、标题，是表单里最常见的控件。
详细解释
输入框只接收一行文字，按回车不会换行。它通常配一个标题文字（label）说明要填什么，框里可以有灰色的占位提示（placeholder），前后还能加图标或固定文字，比如「¥」「.com」。常见状态有默认、聚焦（边框变深）、禁用、只读和校验出错（边框变红、下方出现提示）。
几种相近的控件要分清：内容可能有好几句、需要换行的用 多行文本框；只能填数字、需要限制范围或加减按钮的用 数字输入框；用来在页面或数据里查找内容的用 搜索框。另外 type 属性要选对，邮箱用 email、手机号用 tel、密码用 password，手机上才会弹出对应的键盘。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
表单里的「手机号」输入框：上方放标题文字，框内灰色占位提示「请输入 11 位手机号」，type 设为 tel，最多输入 11 位。聚焦时边框变深；失去焦点时校验格式，出错时边框变红，并在下方显示红色提示文字。
结构与适用场景
结构描述
由标题文字、单行输入区域和占位提示组成，可以加前后缀图标，下方可显示帮助或错误提示。
适用场景
- 填写姓名、手机号、邮箱、标题这类一行就能写完的短文字
- 登录、注册页里的账号和密码
- 需要按格式校验的短内容，比如邮箱、网址、验证码
不适用场景
- 可能要写好几句话或需要换行的内容，比如备注、评价，应该用多行文本框
- 只能填数字并且有范围限制的内容，比如数量、年龄，应该用数字输入框
- 在列表或全站里按关键词查找内容时，应该用带放大镜图标的搜索框
- 选项是固定几种时，应该用下拉选择或单选框
常见坏用法
- 只用占位提示代替标题文字，一开始输入提示就消失，用户忘了这一栏要填什么
- 手机号、邮箱都用默认的 text 类型，手机上弹出的键盘不对
- 输入框宽度和内容不匹配，比如邮编框占满整行、地址框却很窄
识别特征
- 一个细边框的长方形，高度约一行文字
- 框内左侧常有灰色占位提示文字
- 上方或左侧有标题文字，出错时边框变红、下方出现提示
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
input[type="text"]input:not([type])input[type="email"]input[type="password"]input[type="tel"]input[type="url"]input.ant-input.ant-input-affix-wrapper.el-input[class*="MuiTextField-root"]input.arco-input.arco-input-wrapper.t-input.n-input:not(.n-input--textarea)[data-slot="input"]input.form-control