B端产品中，一个较为重要的信息录入角色是文本输入框，输入框承载着一个页面内信息录入的主要入口。那么在输入框的设计中，我们经常遇到哪些问题，需要注意哪些事项呢？笔者根据网上的文章做了一些整理，供大家参考。
输入框的类型
一般输入框分为文本输入框和密码输入框，而文本输入框根据录入不同又有中文输入框、英文输入框、数字输入框等。
输入框在开发人员分解时，主要可以拆分为文本标签、输入框、占位符三个基本结构，此外还可能有帮助、提示和反馈等信息。
输入框设计的要点
输入框设计的时候，需要注意的要点有：
- 表单标签的合理性
- 输入限制
- 占位符
- 输入框的大小、焦点
- 多行文本
- 错误反馈
- 换起键盘样式（移动端）
- 帮助信息
- 是否必填、规则判断
- 结果反馈
- 微文案
1. 标签
主要分为左右和上下结构，由于屏幕尺寸和空间占比原因，左右结构常见于 PC 端，但当标签名字太长时，也可以使用上下结构。
谨慎使用内部标签
内部标签只有提示性文字，当用户输入时，内部标签/文字就回消失，此时用户会失去判断的标准。当内容过多时，用户根本不记得自己填过什么。
尼尔森·诺曼集团的凯蒂·舍温（Katie Sherwin）在她上传的文章中提到将标签替换为占位符的七个不好的原因：
- 消失的占位符文本会使用户的短期记忆紧张
- 没有标签，用户无法在提交表单之前检查所填写的内容
- 出现错误消息时，人们不知道如何解决问题
- 当将光标放在表单字段中，占位符文本消失时，使用键盘导航的用户来说很不友好。
- 其中包含的字段不太明显。
- 用户可能会将占位符误认为是自动填写的数据
- 有时用户必须手动删除占位符文本。
当然，以上原因并不全部适用，比如第六条，无论有没有标签，占位符都存在。
但在某些产品设计上，用户输入时，内部占位符会位移至输入框上，例如谷歌：
2. 输入限制
输入限制方式有两种，一是对表单域的信息进行字数限制，在输入框右下方可以显示当前字数和最大支持字数，例如 QQ 签名；二是属性限制，比如在数字文本框，禁止输入汉字或者字母。但有时候因为开发着急，会直接使用「input」的「text」类别，没有增加限制，这时候我们需要与开发沟通解决。
3. 占位符
占位符文字需要清晰明了、简短一致，颜色上不能使用太突出的颜色。
此外，在一个输入框可以输入多种类型信息的时候，例如用户名可以输入邮箱、手机号、QQ 等，可以使用占位符提醒。
4. 输入框大小
输入框在开发时，具有两个元素，包括外部的可视大小，内部有效输入框的大小。
设计时，需要考虑开发原因，标注输入框的大小与边距。而输入框有图标时，也应该注意图标与输入框的间距。
此外，需要根据输入文本的长度，合理设计输入框大小。
5. 输入框焦点
在用户准备输入的时候，焦点需要提供清晰的视觉定位。在输入框较多的时候，可以对输入框的样式做一些突出的改动，帮助用户清晰辨别。
6. 多行文本
多行文本出现在两个地方：标签和行内信息。
标签出现名字很长的时候，我们给文字设定宽度和行高，超出规定字数的做换行处理。
而行内换行时，我们需要给出横向字体宽度和上下间距。当内容过多时，一定内容下可以撑开输入框，但超出规定大小时，需要做隐藏处理。
7. 错误提醒
错误反馈需要及时、有效，而不是等用户耐心的填完所有表单，点击提交以后再进行。
因为用户在填写结束之后，大脑中分泌多巴胺，获得愉悦感，但在这个时候一个报错，把临到脑门的多巴胺给硬生生逼了回去，是很影响用户心情的，无论表单中所承载的信息有哪些，都应该让用户感受到引导感。用户所需要的是引导他完成表单的填写，而不是对他填写表单做判断。
8. 换起键盘样式
移动端设计表单输入的时候，都会弹起键盘，在不同场景下给用户换起不同的键盘，可以极大提高操作效率。
例如验证码、金融支付输入时弹出数字键盘、密码输入框弹起英文键盘等。
另外，在某些场景下，弹起的键盘可能遮挡关键区域，我们在设计的时候要考虑到。
9. 微文案
无论是以上任何情形，标签还是占位符，提示性文字还是错误反馈，表意必须清晰易懂，消除用户的疑虑，在整个流程中，让用户尽快做出准确的选择。
例如关闭时，弹出弹窗进行确认，是否要取消时，一个是确定，一个是取消，就会产生歧义。
更多关于微文案的内容，可以参考下文：微文案设计指南
特殊输入框的处理
1. 电话输入框
电话通常分为国家地区、区号、手机号。
2. 身份证/银行卡输入框
此类输入框可以结合输入、输入自动填充、扫描、图片识别等功能，减少用户操作。
3. 密码输入框
密码输入有两种形式，一是直接输入以「*」显示，从开始到结束，如果没有查看密码，就不知道自己输入是否正确；二是输入的时候明文显示，1~2s 后进行隐藏处理，这样可以减少用户的使用成本。
另外就是，一旦有密码，就必须有确认密码进行校正，减少用户错误率。
4. 邮箱输入框
邮箱输入时，适当加上后缀选择，可以减少用户输入。
本文参考链接：万字干货！帮你彻底完整掌握表单设计方法（上）