水平表单的错误消息方式

垂直方向的表单，错误消息有很多种呈现方式，放在输入框后面，下面，或上面都挺好，因为垂直表单本身可用空间较大，而且向下或向右挤也不是什么问题，布局也没什么影响。

但是对于水平方向向右一字排开的表单（自动适应可用宽度，不够则自动折行），搜索表单比较常用，这种表单会有数个搜索输入框或选项，如图：

这种表单，错误消息无论放在上、下、左、右，都会影响到表单的布局，而悬浮消息也可能会遮挡住其他的输入框。那这样的表单，错误消息应该如何更好的呈现呢？

我想到一种，即“双重视觉强调”讲的：在表单上/下方给出整体的的错误信息，但输入框本身，只给出警戒色的边框进行提醒。

当用户鼠标悬浮在出错输入框上，或者出错输入框获得焦点时，上/下面的错误信息框自动高亮当前输入框对应的错误消息。

这种表单本身不会很多选项导致需要翻页，所以放在上面是没有问题的。如果真的需要很多选项，那就要考虑换成垂直表单了。

高亮而不是更新消息内容，是为了防止消息框高度发生变化，导致表单本身上下跳跃移动；当然也可以将消息框放在下面，不过直觉上，错误消息放在上面似乎更靠谱。

上面是个人观点，大家可以各抒己见。

Tags: Forms, Web-Design

Published on 2010-11-26

水平表单的错误消息方式#