占位文字
Placeholder
初级通用占位文字(Placeholder)是输入框为空时显示在框内的提示,用户输入后通常就会消失。它帮你用一个短例子说明可输入的内容,比如在搜索框里显示“搜索项目名称”,但不能代替字段名称。
你可能会说:「我想让空输入框里先显示一个填写示例,开始输入后它就消失,该怎么做?」
动手看看项目搜索框的占位提示
项目名称
例如:季度复盘
输入状态
切换下方状态,模拟输入和清空;也可以点进搜索框看聚焦反馈。上面的「项目名称」是字段名称,不会随输入消失。
框里还没有内容,所以显示「例如:季度复盘」。它给出填写示例,不负责说明这个字段叫什么。
要点占位文字怎样帮用户填写表单?
- 1
只在输入框为空时提供线索
你做一个创建项目的表单,可以在项目名称输入框里放“例如:客户门户”。用户还没输入时,它给出内容示例;用户开始输入后,它让位给实际内容。
- 2
提示要短且贴近输入任务
占位文字适合回答“这里可以填什么”,比如在工单编号搜索框里写“输入工单编号”。如果解释需要好几句话,放在框内会很难读,改用输入框旁的帮助文字更合适。
- 3
保留独立的字段名称
因为占位文字会随输入消失,所以用户填到一半时,可能看不到这个框原本问什么。给输入框配上始终可见的标签,比如“项目名称”,也方便使用辅助技术的用户识别字段。
容易混淆的地方
占位文字不是表单标签:标签告诉你字段是什么,并且在输入后仍然可见;占位文字只在框为空时提供简短线索。它也不是默认值:看到“例如:客户门户”不代表表单已经填入了这个名称。如果你希望用户提交前就有一个可编辑的实际值,那要设置初始值。
什么时候用
适合用
- 做后台项目搜索框时,用“搜索项目名称”提示用户可以输入什么关键词。
- 做邀请成员表单时,在邮箱输入框里给一个邮箱格式示例,配合可见的“邮箱地址”标签。
不适合用
- 字段需要预先填好当前团队名称、让用户按需修改时,用可编辑的初始值,而不是占位文字。
- 填写规则包含字数限制和命名要求时,用输入框旁的帮助文字,让用户输入后还能查看规则。
练一练选一个答案,看看解释
你在做一个创建项目的表单。用户需要填写项目名称,也希望看到一个名称示例。哪种设计最合适?
让 AI 帮你做复制给 AI Agent 直接用
请为创建项目表单的“项目名称”输入框添加占位文字“例如:客户门户”,并保留始终可见的字段标签。占位文字只作填写示例,不作为输入框的初始值;用户输入后应能看到自己填写的内容。