生活中很多地方都涉及表格。 经常遇到的是注册、订票、填写个人信息等。 表单是一个非常常见的模块，有很多用户虽然设计精良，但容易出错，用户体验差，感到不舒服，一个注册登录就生气放弃了产品。
今天我们来谈谈如何避免网页表单的设计错误。 首先谈谈网页表单的设计。
表单的基本元素
表单元素包括标签、占位符、输入框、提示文本和操作。 以照片的登录画面为例，
标签。 告诉用户需要回答什么问题。
输入域。 用户回答问题的控件，包括输入框、选择框、下拉框和滑块。
操作。 用于用户执行操作的控件，如提交、取消、后退和重置。
帮助。 有助于用户回答问题的信息。 例如，帮助文本、字符样本等。
在窗体设计中，每个元素都有存在的意义。 为了深刻理解其中的某些元素在页面中有什么意义，我特意去除这个元素来研究页面是怎么变化的。
第一，表单中的所有标签和占位符都会提示您在用户输入框中输入字段内容，有点吵，请删除标签。 下图：
这样画面看起来就整齐简洁了。 标签似乎真的是多余的。 事实上，我只有在个人输入字段少于三个的情况下才使用这个设计方案，但在发现多馀三个输入字段之后，这个方案就出了问题。 例如，下图：
啊，发现了问题。 例如，如上图所示，从我的鼠标点到第五个输入框，输入提示消失的时候，你真的不知道自己之前输入的信息和以后要填写的信息是什么了吗？ 这个时候，我们很混乱，甚至不得不删除已经填好的东西，看看自己填了什么。 请不要怀疑自己。 从心理学上看，这种现象是由人们短时间记忆的极限引起的。 被称为“五加一”原则，人在短时间内只能记住4到6件事。 这是传说中的“五加一”原则。 但是，由于填写表格时需要使用记忆搜索，消耗了部分大脑能量，“五加一”会大幅下降。 因此，“二加一”原则更适用于表单设计，如果用户需要输入额外的三个输入字段，则需要向用户呈现标签。 所以你需要留下标签。 因为标签总是指示你在输入什么或即将输入。
第二个占位符和标签重复的问题怎么办？ 那么，就简单粗暴地去掉占位符吧。 如下图所示。
如图所示，这样看也不行，内容也能数清楚，不重复。
事实上，在做了很多表格页面之后才慢慢知道，在很多社交网站上，用户拥有的不仅仅是用户名，还可以通过手机号码、邮箱地址、昵称等信息进行登录。 如果没有占位符提示，它到底能用来登录吗？ 让用户推测，那是失败的设计。 届时，占位符将发挥作用。 下图：
这样，用户一眼就能清楚地知道该如何填写。 另一种设计方法是将标签设计为图标，如下图所示。 这样，画面会变得灵活简洁。
另一种新的输入框设计是用户单击输入框输入内容后，选项卡移动到输入框上方，通过颜色的变化呈现当前的输入状态，从而交互细化，提高用户体验。 当然，这种设计方法需要确保浮动字符的空间。
表单中的标签和输入框对齐
遇到的表单较长且输入的信息较多时，标签和输入框的对齐方式会影响用户的表单体验。 对齐方式包括垂直顶部对齐、水平右对齐和水平左对齐。
标签的垂直对齐
选项卡和输入区域垂直排列，减少了页面宽度要求。 如果你的页面没有足够的空间来横向排列标签和输入区域，这个组合是个不错的选择。
眼睛运动的轨迹表明，用户自上而下的扫描形式往往焦点集中在左侧列，抖动小。
标签的水平左对齐
水平对齐左对齐和输入区域还减少了对页面高度的要求。 选项卡左对齐对用户扫描问题选项卡很有用，但对填写答案不利。 因为标签远离输入区域，所以重新定位到右侧的输入框确实需要一点时间。
眼睛移动的轨迹表明，用户查找输入区域比查看选项卡更花时间，从而影响了整个表单的完成时间。
制表符水平右对齐
制表符对齐和输入区域的水平对齐减少了页面高度要求。 但是，与标签的纵向对齐相比，标签字符的左侧零散，因此对问题的认识和扫描时间变长了。
眼睛运动的轨迹表明用户花了更多的时间看问题。 输入框对他们来说很简单。 《Web Form Design》一书中标签和输入区域组合数据的比较表：
总之，标签要靠上对齐
这种定位方式对眼球运动的需求比其他定位方式少，因此用户可以更快地浏览。 其中，使用右对齐选项卡的表单的浏览时间仅次于顶部对齐选项卡。 如果页面高度有限，建议使用这种对齐方式。 采用左对齐制表符方式的表格是三个表格中浏览时间最长的，但这种对齐方式可以帮助用户放慢阅读速度，满足用户经常想的输入信息(重要输入等)。
我不知道到底该怎么排版，现在知道了。 我想帮助大家更好地理解表单和输入的设计。