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

时间:2008-11-04 18:50:46

标签: webforms

我没有发现经常使用的“*”看起来很漂亮 - 有人能建议一个看起来更漂亮的方法或者指点我的例子吗?

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

大胆的标签可能会起到作用。

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

9 个答案:

答案 0 :(得分:14)

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

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

答案 1 :(得分:7)

如果您打算使用颜色来突出显示该字段,请记住有些人是色盲的(因此也许提供另一个指示符)

答案 2 :(得分:5)

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

<强> HTML

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

<强> CSS

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

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

-R

答案 3 :(得分:4)

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

在注册表格等方面,仅提供最低限度的信息更好 。注册后,用户可以随意以不同的形式填写可选信息​​。

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

答案 4 :(得分:2)

添加style =“border:thin red solid;”到元素

答案 5 :(得分:2)

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

答案 6 :(得分:1)

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

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

答案 7 :(得分:1)

我喜欢在{Ajach Control Toolkit中为ValidatorCallout control完成的方式:

alt text

答案 8 :(得分:0)

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