文本框允许用户输入、编辑和选择文本。
文本框通常出现在表单中,但也可以出现在其他地方,例如对话框和搜索框。
用法
文本框可以对输入进行验证、帮助修复错误的输入、自动完成输入的词、以及提供输入建议。
文本框类型
单行
多行
文本区域
输入类型
格式化输入
嵌套菜单 & 选择器
文本框通常出现在表单中,但也可以出现在其他地方,例如对话框和搜索框。
文本框可以对输入进行验证、帮助修复错误的输入、自动完成输入的词、以及提供输入建议。
单行
多行
文本区域
格式化输入
嵌套菜单 & 选择器
文本框应具有以下特征:
文本框应使用可点击的触摸目标,指示用户可以输入信息。
应该要能很容易的在其他元素中找到文本框。
文本框应该指明其状态 - 启用还是禁用、为空还是已有文本输入、通过验证还是未通过验证 - 具有清晰的标签、输入框和辅助文本。
文本框包含以下元素:
文本框标签显示字段所需的输入类型。每个文本框都应该有一个标签。
标签和输入线对齐,且始终可见。它们可以处于静止状态(当禁用文本框或文本字段为空时)或浮动状态。
输入线表示输入文本的位置,它位于标签下方。
当文本框处于聚焦状态或包含错误时,输入线的颜色和厚度会有所不同。
光标指示用户当前输入的位置。
向文本框中键入的文本称为输入文本。
输入文本的第一个字母(以及每一个句子的第一个字母)应在适当的时候大写。例如:
输入文本可以和自动完成一起使用,以帮助读写能力不好的用户、或使用外语输入的用户。例如自动完成可以:
按下返回按钮即接受当前自动完成显示的文本。
占位符文本位于输入框中,直到用户开始输入文本。它可以显示一个操作或示例,例如一个手机号或邮件地址。
帮助文本提供文本框的有关信息,例如输入的文本会被用在哪里。
它应该持续显示、或只在聚焦时显示。
规格:
当输入存在错误时,可以在输入线下方显示错误信息,并提供如何修复错误的说明。在错误修复之前,错误信息将代替帮助文本。
如果可能的话,错误信息应尽量显示在一行内。
错误信息前面带有 “Error” 文本(或者一个错误图标),以使色盲能更清楚的看到错误状态。
要指示一个字段是必填的,请在标签旁边显示一个星号(*)。在表单底部,写上星号表示必填字段。
要指示一个字段是可选的,请在标签旁边添加文本 “可选”。
表单中有少量的必填字段时,指示出所有的必填字段。但是,如果只有少量的可选字段,则指示出所有的可选字段,而不必指示出必填字段。
文本框有字数限制时,可以使用字符计数器。
规格:
图标描述了文本框需要的输入类型。它们显示在文本框左侧。
图标也可以作为的触摸目标。例如,日历图标可以在触摸时展开日期选择器。
麦克风图标表示用户可以使用语音输入。
语音输入图标右对齐,始终启用。
下拉箭头表示文本框包含一个嵌套的下拉选择。
清除按钮可以使用户清空整个输入字段。
它们在文本框中右对齐。
在具有很多个字段的表单中,可以缩短文本框。
规格:
文本框有两个主要状态:启用或禁用。
在启用状态下,可以使用这些交互:
文本框输入可以是:
启用
默认情况下,启用的文本框为空。
规格
无障碍功能
输入线应该具有 3:1 的对比度,以提高可识别性,和大文本相同的 AA 级无障碍标准。
标签文本
帮助文本(可选)
标签文本
帮助文本(可选)
禁用
禁用的文本框是不能编辑的。它们使用虚线作为输入线,以及使用较低的不透明度,使它们看起来不可点击。
标签文本
输入文本
标签文本
输入文本
鼠标悬停
悬停状态给了输入线更多的不透明度,使文本框在桌面端更加醒目。
标签文本
帮助文本(可选)
标签文本
帮助文本(可选)
按下
按下时,文本框标签缩小并浮动到字段上方,显示出光标和占位符文本。
为了指示出该字段已被激活,在输入线、标签文本和光标上使用 UI 的主色。
标签文本
占位符文本(可选)
帮助文本(可选)
标签文本
占位符文本(可选)
帮助文本(可选)
聚焦
当用户在文本框中输入文本时,输入的文本会代替占位符文本。自动完成的文本显示在光标的右侧,且使用和占位符文本相同的字体大小和颜色。
标签文本
输入文本
帮助文本(可选)
标签文本
输入文本
帮助文本(可选)
闲置和已输入
当用户把焦点切换到另一个元素时,已输入的文本会保持可见。
标签文本
输入文本
帮助文本(可选)
标签文本
输入文本
帮助文本(可选)
错误
如果文本框没有通过验证,当用户将焦点移动到另一个元素时,会显示错误信息。要指示一个错误,可以在输入线和标签上使用较暖色调的颜色,例如红色或橙色。
规格
标签文本
输入文本
错误文本
标签文本
输入文本
错误文本
文本框有多种类型:
单行文本框
当输入的文本长度超过文本框的长度时,当光标到达文本框右边缘时,它会自动向左滚动。
多行文本框
多行文本框通过扩展文本框的底部,把文本换行到新的一行上,并把屏幕中位于文本框下方的元素向下移动。
多行文本框允许用户一次性看到他们输入的所有内容。
文本区域
文本区域比文本框要高,并可将溢出的文本换行到新行上。当光标到达文本区域的底部时,它们会垂直滚动。
文本区域应该有一个可见的边框,边框颜色和厚度和输入线相同。
文本框可以通过使用占位符文本、预设布局、和字数限制,来表示可以输入的数据类型。只有在按下、聚焦或输入文本时才应显示文本格式。
字符可以使用以下方式进行格式化:
分组字符
输入文本可以以不同的方式进行分组,并在适当的位置添加特殊字符,例如添加到电话号码上的连字符。一旦完成第一个特殊字符,光标会自动跳转到下一个分组。
前缀 & 后缀
前缀和后缀可用于明确单位、或添加预输入文本。前缀在文本框中左对齐;后缀在文本框中右对齐。文本框可以同时拥有前缀和后缀。
密码修改
密码输入默认会隐藏密码。每个密码字符都用一个居中的椭圆表示(例如 •••••••)。
当文本框中显示可见性图标时,它指示该字段输入的时候是否可见。可以通过该图标来切换输入文本的可见性。
使用这些样式的变体来把额外的焦点添加到文本框:
当文本框是屏幕上的主要操作时,可以移除它的标签,或者把标签当作标题。
占位符文本在闲置状态会出现,在用户输入文本时,输入的文本会代替占位符文本。
全宽文本框对于更深入的任务或输入复杂信息会很有用。
文本字段框使用透明的矩形包裹住标签和输入文本,以增强文本框的可识别性和可扫描性。
文本字段框使用矩形填充作为主要特征,遮盖住输入线的末端。涟漪动效在鼠标悬停和按下时触发。
输入线
闲置状态 & 为空状态
鼠标悬停
按下
聚焦、闲置、已输入、错误和禁用状态的间距和按下状态相同。
文本字段框使密集型布局更容易阅读。