B端产品经理在入行时，可能需要了解各式各样的组件，了解其规范、作用和使用规则。这篇文章里，作者就介绍并拆解了B端组件——输入框。一起来看看吧，相信可以帮你加深对这一组件的了解和印象。
中医的入门知识是什么?肯定是认识各种中草药，了解他们的特性、功效和使用方法。中药店柜台后面一个个的木格子，就是中医的入行门槛。
B端产品的入门知识是什么？肯定是认识各种组件，了解他们的规范、作用和使用规则。构成页面的一个个组件，就是B端产品的入行门槛。
一个不认识中草药的中医不可能是好医生，一个不认识B端组件的产品经理也做不出好产品。
这个《好玩》系列为大家汇总了多种常用的B端组件，认识它们、熟悉它们、用好它们，为产品晋级之路打下扎实的基本功。
今天聊一下：输入框。
输入框是承载用户文本输入或文本编辑的输入类组件，常用在表单页面。支持多种数据类型，比如纯文本、密码、数字、时间等。
也可以在原组件的基础上搭配其他组件使用。比如搭配搜索按钮，就是搜索组件。搭配前缀或后缀，可以快捷输入网址、电话号码等。
输入框由以下5部分组成：
根据可输入文本的行数，输入框可分为3种：
1）单行输入框：只能输入一行文本，字数有限制，超出部分会被截取隐藏。
2）多行输入框：可以输入多行文本，输入框会根据输入行数自动调整高度。
3）文本域：可拖动右下角图标改边文本域尺寸。
根据不同的扩展功能，输入框可以分为以下多种类型：
1）常规输入框：原始状态的输入框，无拓展功能。
2）带前缀的输入框：在输入框左侧有前缀图标或文案。
3）带前置或后置标签的输入框：在输入框前后有功能标签，比如搜索按钮，邮箱，手机号码的国际区号等。
4）带字数统计的输入框：可以显示已输入的字数，也可以对输入数量进行限制。
5）富文本输入框：拥有丰富的文字编辑功能的输入框，也可以插入图片、视频等其他格式的数据。
输入框组件的8种状态：
常见的四种高度的输入框尺寸，分别为24px、32px、36px、40px。在做原型图时，除非特殊场景，一般使用36px的高度即可。
组件宽度可以根据页面空间与网页栅格规范自由调整。网页栅格规范后续文章会详细说明。
二用：
三不用：
对于输入框组件来说，最重要的就是降低用户的输入成本和减少用户的出错概率。为此需要注意一下几点：
输入框组件搭配其他组件，就可以形成多种不同使用场景的功能。以下是几种常用的组合。
认识每个组件、熟悉每个组件、用好每个组件，对待它们像儿时对待心爱的玩具一样，如数家珍、了如指掌。它们会给你源源不断的勇气和底气，让你在产品晋级之路上闪闪发光。
相关阅读：
专栏作家
原木森林，人人都是产品经理专栏作家。专注于用户增长相关的逻辑、方法和案例分享。
本文原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。