输入框 Input
用户创建一个项目,需要输入项目名称这样的短值,而不是编辑一段带换行的说明。
前端与交互约 10 分钟 · 从真实需求理解
1Input 负责承接什么?
新建项目
发布计划
先为项目写一个可识别的短名称。
Input 是一个单行自由输入字段,负责承接一条短值,例如项目名称、联系人或搜索关键词。它的重点不是替用户做选择,而是让用户把一个值写进当前页面。
当值需要自然换行、展开成长段说明,或答案本来就来自固定集合时,应换用 Textarea 或 Select。
2Input、Textarea、Select 怎么分?
Input 不是所有“需要填写”的地方都适用。它承接一条短的单行自由值;Textarea 给一段可以换行的自由文本更多空间;Select 则把答案限制在预先定义的集合里。
- 项目名称、邮箱或搜索词通常是一条单行值,适合 Input。
- 背景说明、复盘记录或长备注需要保留换行,适合 Textarea。
先看值的形态和来源,再决定控件;不要因为三个控件都能“出现文字”就把它们互换。
3Input 的真实结构是什么?
新建项目
发布计划
先为项目写一个可识别的短名称。
一个可用的 Input 至少包含能说明语境的字段 label、真实的单行 input,以及在空值时帮助用户判断要填写什么的 placeholder。placeholder 不是已经提交的值,用户输入后它应当让位给真实内容。
- label 要明确说明这条值的用途,并与真实 input 绑定。
- input 承担文本值、键盘输入、焦点和必要的 autocomplete 语义。
- placeholder 只能做轻量提示,不能替代持久 label 或错误说明。
4什么时候该用 Input?
一条单行自由值由 Input 直接承接。
需要自然换行时改用 Textarea。
有限选项应由 Select 呈现,而不是让用户自由输入。
选择结果会回到当前字段。
用 Input 承接一条短的单行自由值;如果内容需要换行,改用 Textarea;如果答案来自固定集合,改用 Select。
5怎样把 Input 需求告诉 Agent?
请在新建项目页提供一个有持久 label 的单行 Input,用来填写项目名称;空值时显示轻量 placeholder,输入后保留真实值,键盘和鼠标都能操作。这个字段只承接短的自由文本,不要把项目说明塞进同一行,也不要用自由输入代替固定分类选择。
6不用背,看看你能不能判断
1 / 3
项目名称预计保持在一行时,Input 的主要责任是什么?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。