输入框

Input

也常被叫作：文本框输入栏单行输入填东西的格子那个可以打字的框

界面与组件通常止于「主路径」约 1 分钟读完

你可能会这么说

「页面上有一个格子，用户可以在里面打字，比如填邮箱、填名字、填验证码。」

输入框 Input

让用户往里面输入一行文字或数字的控件，是表单和搜索最基础的地基。

输入框（Input）是用户往里面填一个值的单行控件，比如邮箱、昵称、验证码、搜索词。它和表单的区别很实际：输入框是一个格子，表单是「一组格子加一个提交按钮」。单独一个框、不提交任何东西（比如页面右上角那个即时搜索框）就不算表单，但永远是输入框。

输入框最容易踩的三个坑，每个都能让用户直接流失。第一，用占位字（placeholder）当标签：占位字一打字就消失，用户打完字回头不知道这一栏原来要填什么。标签必须永远在，放在框外。第二，类型用错：填邮箱就该用邮箱类型，填密码就该用密码类型（字变成黑点），填数字不能给个能打字母的普通框。类型错了，手机键盘弹出来的都不是该有的键盘。第三，隐藏了「这是个必填项」：必填不该靠红字提醒才知道，应该在框里/标签旁明确标出来，不然用户空着提交被拦，还不知道错在哪。

还有一个常被忽略的：输入框要有看得见的聚焦状态。键盘用户 Tab 到框上时，框要有清晰的轮廓，不然他根本不知道光标在哪。禁用态（灰色不可点）和加载中（比如搜索框在转圈）也要和普通状态能区分开。

长什么样真实可交互，不是截图

邮箱

密码

验证码

注意标签（邮箱、密码、验证码）都放在框外面、不会一打字就消失；密码框用了密码类型，输入会变成黑点；验证码框旁边配了「获取」按钮。

拆开看，里面有这几块

1
标签 Label
永远在框外的一行说明，告诉用户这一栏填什么。别用占位字顶替，占位字一打字就没了。
2
输入区 Input area
用户打字的地方。类型要对（邮箱/密码/数字/文本），手机才会弹对的键盘。
3
占位字 Placeholder
灰字提示示例，一打字就消失。只能当补充，不能当标签。
4
状态 State
默认 / 聚焦 / 已填 / 错误 / 禁用 / 加载中，每个状态都要能一眼区分。
5
辅助说明与错误 Help & Error
这一栏的提示或报错，要贴着框、说清哪一栏错在哪。

常见的有哪几种

文本输入框Text

默认形态，填任意文字。

用在：昵称、标题、一句话

邮箱/数字等专用框Typed (email/number…)

用对应类型，手机键盘正确、校验更准。

用在：邮箱、电话、数量

密码框Password

输入变黑点，可选「显示/隐藏」切换。

用在：密码、确认密码

搜索框Search

通常即时过滤，不跳页。可带清除按钮和加载态。

用在：页面顶部搜索

容易搞混？这样区分

输入框 ≠ 多行文本框 Textarea

输入框是一行，回车会直接触发/换行不自由；多行文本框是一个大矩形，能写很多行（比如简介、评论）。要填的内容可能超过一行，就该用多行文本框，别硬塞进单行框。

看多行文本框

输入框 ≠ 下拉选择 Select

输入框是自由打字（用户说什么都行），下拉是从给定选项里选一个（用户不能乱填）。值只能在有限几个里面挑时用下拉，值完全开放时用输入框。

看下拉选择

什么时候用得上

登录表单

邮箱框用邮箱类型、密码框用密码类型，标签都在框外，密码可切换显示。

页内搜索

单独一个搜索框即时过滤列表，聚焦有清晰轮廓，可一键清除已输入的内容。

验证码输入

专门类型的数字框，旁边配「获取」按钮，错误时贴着框提示重发或重新输入。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [登录页] 的这几个输入框，不动其他页面和登录逻辑
【要求】
  - 每个框都要有**永远的标签**，放在框外面，不许用占位字当标签
  - 邮箱用邮箱类型、密码用密码类型（输入变黑点），这样手机键盘是对的
  - 必填项要在界面上明确标出来（标签旁的星号或提示），别让用户空着提交被拦才知道
  - 聚焦时框有清晰可见的轮廓，键盘 Tab 能落到每个框
  - 错误提示贴着框、说出「哪一栏、错在哪、怎么改」
【边界】不要新增第三方组件库；不要改整体布局和配色
【交付】告诉我改了哪些文件、我打开哪个地址、填哪些值能走通一次成功、错误时提示出现在哪，以及哪部分你没验证

这段话最硬的两条是「标签永远在框外、不许用占位字当标签」和「类型要对」。这两条 AI 最容易偷懒——用占位字顶标签、全都做成普通文本框，界面看着干净但体验是断的。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

打开页面，每个框的标签都在框外面。在框里打字后，标签仍然看得见（没被占位字顶替）。
邮箱框里输入，手机/浏览器弹出来的是邮箱键盘；密码框输入，字符显示成黑点。
只用键盘：Tab 能落到每个框，聚焦时框有清晰轮廓，能看清光标在哪。
必填项在界面上有明确标记；故意空着必填项提交，会被拦住且提示指着具体那一栏。
错误时，提示贴着这个框出现，文案说清了「哪一栏、错在哪、怎么改」，不是一句笼统的「输入有误」。

它常这么糊弄你

「输入框已加」——但标签是用占位字做的，一打字标签就消失，用户回头不知道这栏是干嘛的。
所有框都做成普通文本框——填邮箱弹不出邮箱键盘、填密码不隐藏，手机用户根本没法用。
必填项不标注，用户空着提交被笼统提示「请检查输入」，不知道错在哪一栏。
聚焦状态没有轮廓或很不明显，键盘用户光标不知道在哪。
错误提示统一放在页面底部，不贴着框——用户得来回看才知道哪栏错了。

输入框能验到「主路径」层：你亲手打几个字、用键盘 Tab 一遍、故意留空和填错看提示，就验完了。

考考你选一个你觉得对的

登录页有个「邮箱」输入框。哪种做法是对的？

想再深挖一点靠谱出处

<input>：输入元素MDN ↗HTML5 输入类型MDN ↗

# 输入框 (Input)

> 让用户往里面输入一行文字或数字的控件，是表单和搜索最基础的地基。

**你可能会这么说**：页面上有一个格子，用户可以在里面打字，比如填邮箱、填名字、填验证码。

输入框（Input）是用户往里面填一个值的单行控件，比如邮箱、昵称、验证码、搜索词。它和表单的区别很实际：输入框是一个格子，表单是「一组格子加一个提交按钮」。单独一个框、不提交任何东西（比如页面右上角那个即时搜索框）就不算表单，但永远是输入框。 输入框最容易踩的三个坑，每个都能让用户直接流失。第一，用占位字（placeholder）当标签：占位字一打字就消失，用户打完字回头不知道这一栏原来要填什么。标签必须永远在，放在框外。第二，类型用错：填邮箱就该用邮箱类型，填密码就该用密码类型（字变成黑点），填数字不能给个能打字母的普通框。类型错了，手机键盘弹出来的都不是该有的键盘。第三，隐藏了「这是个必填项」：必填不该靠红字提醒才知道，应该在框里/标签旁明确标出来，不然用户空着提交被拦，还不知道错在哪。 还有一个常被忽略的：输入框要有看得见的聚焦状态。键盘用户 Tab 到框上时，框要有清晰的轮廓，不然他根本不知道光标在哪。禁用态（灰色不可点）和加载中（比如搜索框在转圈）也要和普通状态能区分开。

**也叫**：文本框、输入栏、单行输入、填东西的格子、那个可以打字的框

## 你可以这样告诉 AI

```text
【范围】只改 [登录页] 的这几个输入框，不动其他页面和登录逻辑
【要求】
  - 每个框都要有**永远的标签**，放在框外面，不许用占位字当标签
  - 邮箱用邮箱类型、密码用密码类型（输入变黑点），这样手机键盘是对的
  - 必填项要在界面上明确标出来（标签旁的星号或提示），别让用户空着提交被拦才知道
  - 聚焦时框有清晰可见的轮廓，键盘 Tab 能落到每个框
  - 错误提示贴着框、说出「哪一栏、错在哪、怎么改」
【边界】不要新增第三方组件库；不要改整体布局和配色
【交付】告诉我改了哪些文件、我打开哪个地址、填哪些值能走通一次成功、错误时提示出现在哪，以及哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 打开页面，每个框的标签都在框外面。在框里打字后，标签仍然看得见（没被占位字顶替）。
- [ ] 邮箱框里输入，手机/浏览器弹出来的是邮箱键盘；密码框输入，字符显示成黑点。
- [ ] 只用键盘：Tab 能落到每个框，聚焦时框有清晰轮廓，能看清光标在哪。
- [ ] 必填项在界面上有明确标记；故意空着必填项提交，会被拦住且提示指着具体那一栏。
- [ ] 错误时，提示贴着这个框出现，文案说清了「哪一栏、错在哪、怎么改」，不是一句笼统的「输入有误」。

常见糊弄：
- 「输入框已加」——但标签是用占位字做的，一打字标签就消失，用户回头不知道这栏是干嘛的。
- 所有框都做成普通文本框——填邮箱弹不出邮箱键盘、填密码不隐藏，手机用户根本没法用。
- 必填项不标注，用户空着提交被笼统提示「请检查输入」，不知道错在哪一栏。
- 聚焦状态没有轮廓或很不明显，键盘用户光标不知道在哪。
- 错误提示统一放在页面底部，不贴着框——用户得来回看才知道哪栏错了。

来源：https://mickerbook.com/reference/t/input/