SPT术语库

输入框 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 的主要责任是什么?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。