跳到主要内容
Termlib

UI 组件 · 表单输入

输入框

Input

也叫：文本框、单行输入框、TextField、Text Input

让用户输入一行简短文字的框，比如姓名、手机号、邮箱、标题，是表单里最常见的控件。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

表单里的「手机号」输入框：上方放标题文字，框内灰色占位提示「请输入 11 位手机号」，type 设为 tel，最多输入 11 位。聚焦时边框变深；失去焦点时校验格式，出错时边框变红，并在下方显示红色提示文字。

发给

01判断

你的内容是这样吗？

对照两列，确认输入框是不是你要找的。

符合这些情况，用输入框

  • 填写姓名、手机号、邮箱、标题这类一行就能写完的短文字
  • 登录、注册页里的账号和密码
  • 需要按格式校验的短内容，比如邮箱、网址、验证码

是这些情况，换成别的

  • 可能要写好几句话或需要换行的内容，比如备注、评价

    改用多行文本框

  • 只能填数字并且有范围限制的内容，比如数量、年龄

    改用数字输入框

  • 在列表或全站里按关键词查找内容时，应该用带放大镜图标的搜索框

    改用搜索框

  • 选项是固定几种时

    改用下拉选择单选框

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只用占位提示代替标题文字，一开始输入提示就消失，用户忘了这一栏要填什么

  2. 02

    手机号、邮箱都用默认的 text 类型，手机上弹出的键盘不对

  3. 03

    输入框宽度和内容不匹配，比如邮编框占满整行、地址框却很窄

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由标题文字、单行输入区域和占位提示组成，可以加前后缀图标，下方可显示帮助或错误提示。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个细边框的长方形，高度约一行文字
  2. 2框内左侧常有灰色占位提示文字
  3. 3上方或左侧有标题文字，出错时边框变红、下方出现提示

04解释

详细解释

输入框只接收一行文字，按回车不会换行。它通常配一个标题文字（label）说明要填什么，框里可以有灰色的占位提示（placeholder），前后还能加图标或固定文字，比如「¥」「.com」。常见状态有默认、聚焦（边框变深）、禁用、只读和校验出错（边框变红、下方出现提示）。

几种相近的控件要分清：内容可能有好几句、需要换行的用 多行文本框；只能填数字、需要限制范围或加减按钮的用 数字输入框；用来在页面或数据里查找内容的用 搜索框。另外 type 属性要选对，邮箱用 email、手机号用 tel、密码用 password，手机上才会弹出对应的键盘。

开发者信息
术语 ID
component-input
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:not([type="date"], [type="datetime-local"], [type="number"], [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="search"])
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • input
  • text-input
  • text-field
  • textfield
  • input-field
  • form-input
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Input
  • TextInput
  • TextField
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30