js给网页中textarea标签赋值_关于网页中表单的设计（一）：标签类型

重新码字，梳理下之前网页中表单设计的常见问题。

翻了翻以前设计小本本上记的凌乱笔记，发现内容还是很散，也没认真整理过，希望现在开始梳理还来得急，但愿输出倒逼输入，整理下自己的知识框架。

---

01.

表单元素

表单主要是在网页中负责数据的录入收集功能，是主要与用户之间交互的界面。

常见B端表单由于以下些元素构成：

• 标签

• 表单组件(输入框、下拉框、复选框、单选、时间日期选择框等)

• CTA按钮

• 提示

• 帮助

02.

标签的常见种类

对于输入框中标签是应该是左对齐、右对齐还是采用顶对齐？

主要根据情况而定，设计中问题中的正确解决方案应该是取决设计的具体目标和制约因素。

1.左对齐标签

标签放在表单组件的左边，并且左对齐。

优点：可以引导用户仔细阅读上下标签，而不受输入框影响对于不太熟悉要录入收集具体数据的用户、希望用户可以仔细阅读填写的数据，可以采取这种对齐方式。

减少垂直空间上的浪费

缺点：阅读时间较长，录入数据时间较右对齐、顶对齐为最长。根据马泰奥·彭佐的眼动研究数据表明，标签左对齐时，用户眼球定位时间最长，而且部分长标签会加大标签与数据输入框之间的距离，用户要花时间找到标签与之正确对应的标签，加大了数据录入的时间。

标签与输入框的组合可能性小。

左对齐标签如果字数过长，标签则需要换行，对于表单的阅读会增加时间成本。2.右对齐标签

标签放在表单组件的左边，并且右对齐。

优点：标签与输入框距离较近，数据录入效率较高。

与左对齐一样，减少垂直空间上的浪费。

缺点：标签与输入框的组合可能性小。与左对齐标签一样，如果字数过长，标签则需要换行，表单的阅读会增加时间成本。3.顶对齐标签

标签放在表单组件的顶部，并且左对齐。

优点：数据录入效率高。标签与输入框距离近，与之前两种标签对齐方式对比，效率最高。标签与输入框的组合可能性大。标签在输入框的上方，为输入框提供了较大的横向空间，如下图：

缺点：额外占用了页面垂直高度。标签在输入框的上方，会占用页面中纵向上的垂直高度，而且也要注意下标签与输入框和其它输入字段组合之间的距离，便于区分录入内容。4.输入框内标签

标签在输入框内，看起来是减少表单在网页中需要的空间。

优点：看起来貌似节约了屏幕空间。缺点：若标签内容过长或用户不太熟悉，会给用户增加记忆负担。在输入框内也要区分已输入的内容和占位符提示内容的区别，特别对于一些输入框长度相同的输入项，则容易发生混淆，可以考虑在行内标签加入图标或者使用浮动标签，如下图：浮动标签：输入数据后，输入框内的标签浮动到输入框顶部。

---

先写到标签这里，过几天再把后面的相关内容梳理下。看完的朋友若发现不足或错误，希望能给个建议！嘿嘿