B端产品经理在入行时，可能需要了解各式各样的组件，了解其规范、作用和使用规则。这篇文章里，作者就介绍并拆解了B端组件——输入框。一起来看看吧，相信可以帮你加深对这一组件的了解和印象。

中医的入门知识是什么?肯定是认识各种中草药，了解他们的特性、功效和使用方法。中药店柜台后面一个个的木格子，就是中医的入行门槛。

B端产品的入门知识是什么？肯定是认识各种组件，了解他们的规范、作用和使用规则。构成页面的一个个组件，就是B端产品的入行门槛。

一个不认识中草药的中医不可能是好医生，一个不认识B端组件的产品经理也做不出好产品。

这个《好玩》系列为大家汇总了多种常用的B端组件，认识它们、熟悉它们、用好它们，为产品晋级之路打下扎实的基本功。

今天聊一下：输入框。

一、组件简介

输入框是承载用户文本输入或文本编辑的输入类组件，常用在表单页面。支持多种数据类型，比如纯文本、密码、数字、时间等。

也可以在原组件的基础上搭配其他组件使用。比如搭配搜索按钮，就是搜索组件。搭配前缀或后缀，可以快捷输入网址、电话号码等。

二、组件构成

输入框由以下5部分组成：

1. 文本框（必须有）：展示用户输入的内容。文本框的边框颜色和粗细变化可以代表输入框的状态，比如获取焦点、禁用、成功、报错等。
2. 标签文字（可选）：一般在文本框的左侧或顶部，用于说明输入框所输入的内容。
3. 提示文字（可选）：在文本框中显示的灰色提示文字，用来显示与输入内容的相关的提示或示例，当文本框获取光标时，提示文字自动消失。提示文字与用户实际输入的内容，会有明显视觉差异。
4. 前缀图标（可选）：可以更形象化的说明输入框的内容，一定程度上可以提升用户体验。
5. 后缀图标（可选）：常用于输入框的功能扩展，比如内容清除按钮，可以一键清除文本框中已输入的内容。或者密码隐藏按钮，可以将已输入内容进行加密脱敏。

三、组件类型

1. 根据可输入文本的行数

根据可输入文本的行数，输入框可分为3种：

1）单行输入框：只能输入一行文本，字数有限制，超出部分会被截取隐藏。

2）多行输入框：可以输入多行文本，输入框会根据输入行数自动调整高度。

3）文本域：可拖动右下角图标改边文本域尺寸。

2. 根据不同的扩展功能

根据不同的扩展功能，输入框可以分为以下多种类型：

1）常规输入框：原始状态的输入框，无拓展功能。

2）带前缀的输入框：在输入框左侧有前缀图标或文案。

3）带前置或后置标签的输入框：在输入框前后有功能标签，比如搜索按钮，邮箱，手机号码的国际区号等。

4）带字数统计的输入框：可以显示已输入的字数，也可以对输入数量进行限制。

5）富文本输入框：拥有丰富的文字编辑功能的输入框，也可以插入图片、视频等其他格式的数据。

四、组件状态

输入框组件的8种状态：

1. 初始态：组件首次打开时的状态。
2. 悬停态：鼠标悬停在输入框上时的状态。
3. 焦点态：输入框获取焦点时的状态。这时输入框上会有一个闪烁的光标，表示现在可以输入内容。
4. 完成态：用户输入内容后，输入框失去焦点时的状态。
5. 禁用态：输入框无法输入内容，功能失效时的状态。禁用状态下输入框可以显示内容，但无法修改内容。
6. 加载态：多用于数据检索或数据验证的场景。数据的检索或验证过程需要与远程服务器交互，因此会有一定的延迟，在这个短暂”卡住“的过程中，给用户明确的加载中的反馈，提升用户体验。
7. 成功态：内容输入成功时的状态。
8. 报错态：内容输入错误时的状态。报错状态一般会搭配其他提示类组件一起使用，比如气泡提示、全局提示、文本提示等。

五、组件大小

1. 对组件高度规范

常见的四种高度的输入框尺寸，分别为24px、32px、36px、40px。在做原型图时，除非特殊场景，一般使用36px的高度即可。

2. 组件的宽度规范

组件宽度可以根据页面空间与网页栅格规范自由调整。网页栅格规范后续文章会详细说明。

六、使用规则与注意事项

1. 输入框组件的二用三不用

二用：

1. 输入自由度较高的开放性内容时使用，不需要对用户输入内容做限制，可以允许用户自由发挥。比如输入商品名称。
2. 用户需要复制粘贴时使用。在订单号、收货地址等输入难度较大的场景中，用户使用复制粘贴会更加方便。

三不用：

1. 用户输入有限制的封闭式内容时不能用，比如订单状态、性别、学历等场景。这种场景下建议使用选择器组件。
2. 用户输入特定格式的内容时不能用，比如日期、省市区等场景。这类场景下建议使用时间选择器或联级选择器。
3. 用户当前状态不知道输入什么时不能用。比如医院挂号前，可能暂时不知道该挂哪个科室，这种场景下使用选择器组件让用户选择会更好。

2. 注意事项

对于输入框组件来说，最重要的就是降低用户的输入成本和减少用户的出错概率。为此需要注意一下几点：

1. 要有简洁扼要的提示文案，让用户第一时间知道输入的内容。
2. 设置适当的组件大小和间距，保持页面的浏览体验，不拥挤、不凌乱。
3. 有清晰的错误提示，让用户直观的知道错误原因及改正措施。

七、功能扩展

输入框组件搭配其他组件，就可以形成多种不同使用场景的功能。以下是几种常用的组合。

1. 搜索组件

2. 浮窗提示

3. 银行卡输入

4. 验证码输入

八、相似组件

九、小结

认识每个组件、熟悉每个组件、用好每个组件，对待它们像儿时对待心爱的玩具一样，如数家珍、了如指掌。它们会给你源源不断的勇气和底气，让你在产品晋级之路上闪闪发光。

相关阅读：

• 好玩的B端组件 丨 选择器
• 好玩的B端组件 丨 数据穿梭框
• 好玩的B端组件 丨 上传组件
• 好玩的B端组件 丨 导航