在网络表单上突出显示必填字段的最佳方法是什么？

Posted 2021-05-01

我没有发现经常使用的“*”看起来很漂亮 - 任何人都可以建议一个更好看的方法或指向我的例子吗？

我尝试将该字段用红色突出显示为一个人建议，但我不喜欢这个外观。

大胆的标签可能会成功。

但我真的很喜欢“必填”的想法在字段中以灰色显示，直到添加文字。有没有人有这个代码？

答案

一般来说，最好的网络表单是最简单的，需要我思考最少。已经发展的“标准”是必填字段旁边有一个星号（*）。有时星号是红色的，以帮助它突出一点。

为什么要打标准？不要让你的用户想太多。遵循标准，并将您的创造力放在更重要的事情上。

另一答案

如果您要使用颜色突出显示该字段，请记住有些人是色盲的（所以也许提供另一个指示）

另一答案

如果使用样式表格式化html，则可以为.mandatory创建样式。例如，设置强制输入以使用此样式，然后您可以更轻松地使用它，直到您拥有适合您的整体设计的颜色，边框和其他样式元素的正确组合。

HTML

<input id="username" type="text" class="mandatory" />

CSS

.mandatory {
    color: red;
    font-size: 12pt;
    font-weight: bold;
    font-style: italic;
}

我也使用asterisk作为OP提到的“备份”。

-R

另一答案

有时将字段标记为强制字段和可选字段确实是合理的。但是，在您这样做之前，您应该质疑向用户询问任何非强制性信息是否合理。这尤其适用于登记表格。

在注册表等中，最好只询问最低限度的信息。在注册之后，用户可以随意以单独的形式填写可选信息​​。

在从表单中取出所有不必要的错误之后，您可能会发现没有必要将字段标记为强制字段;要么一切都是强制性的，要么对用户来说可能是显而易见的哪些字段是可选的，没有必要给出关于它的视觉提示。

另一答案

add style =“border：thin red solid;”对元素

另一答案

我发现LukeW.com的答案是最有用的。因为这里没有简单的解决方案。这取决于所需字段的百分比，表单中的字段数以及标签的长度。对于绝大多数网络而言，人们理解需要粗体，而正常体重是可选的（如果任何选项是粗体的）。只有在表单验证失败后，才会向用户显示突出显示所需但已跳过的输入框。

另一答案

我通常不反对在字段名称正下方或与输入字段相邻的较小字体中查看（必需）。

我还可以看到使用“文本框水印”让字段在其中显示“必需”，直到它们将焦点带到字段并开始键入。

另一答案

我喜欢它在ASP.NET Ajax控件工具包中为ValidatorCallout control完成的方式：

另一答案

可能想查看www.PeterBlum.com - 他的专业验证包摇滚用于验证和格式化控件。他有使用教程和大量示例以及详细的手册。