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

时间:2022-11-09 01:52:02

I don't find the oft-used "*" to be very nice looking - can anyone suggest a nicer-looking method or point me to an example?

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

I tried making the field highlighted in red as one person suggested but I did not like the look.

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

Bold labels might do the trick.

大胆的标签可能会成功。

But I really like the idea of "Required" being shown in grey in the field until text is added. Does anyone have code for this?

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

9 个解决方案

#1


14  

Generally speaking, the best web forms are the simplest ones that require me to think the least. The "standard" that has evolved is that required fields have an asterisk (*) next to them. Sometimes the asterisk is red to help it stand out a bit.

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

Why fight the standard? Don't make your users think too much. Go with the standard and keep your creativity for more important things.

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

#2


7  

If you're going to use colour to highlight the field, bear in mind that some people are colour-blind (so maybe provide another indicator too)

如果你打算使用颜色突出显示字段,请记住有些人是色盲的(所以也许提供另一个指示)

#3


5  

If you use stylesheets to format your HTML, then you can create a style for .mandatory. As an example, set the mandatory input to use this style, then you can play with it more easily until you have the right mix of color, border, and other style elements to suit your overall design.

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

HTML

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

CSS

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

I also use the asterisk as the OP mentioned as a "backup".

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

-R

#4


4  

Sometimes it really is justifiable to mark fields as mandatory and optional. However, before you do so, you should question whether it is reasonable to ask the user any non-mandatory information. This applies especially in registration forms.

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

In registration forms and such, it is much better to ask only the minimum information. After the registration the user can, at will, fill out optional information in separate forms.

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

After all the unnecessary cruft has been taken out from the form, you might see that there is no need to mark fields as mandatory; either everything is mandatory, or it might be so obvious to the user which fields are optional, that there would be no need to give visual cues about it.

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

#5


2  

add style="border: thin red solid;" to the element

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

#6


2  

I've found the answers on LukeW.com to be the most useful. because there isn't a simple solution here. It depends on what percentage of the fields are required, how many fields are in your form, and how long your labels are. For the vast majority of the web, people understand bold to be required, and normal-weight to be optional (if any options are bolded). Only after form validation fails would I present the user with the required-yet-skipped input boxes highlighted.

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

#7


1  

I typically have no objections to seeing (required) in a smaller font either right below the field name or adjacent to the entry field.

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

I could also see using a "textbox watermark" to have the field say "required" in it until they bring focus to the field and start typing.

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

#8


1  

I like the way it is done in the ASP.NET Ajax Control Toolkit for the ValidatorCallout control:

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

alt text http://i37.tinypic.com/264j7o5.png

替代文字http://i37.tinypic.com/264j7o5.png

#9


0  

Might want to check out www.PeterBlum.com - His Professional Validation Package rocks for validating and formatting of controls. He has tutorials for using and numerous examples as well as a detailed manual.

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

#1


14  

Generally speaking, the best web forms are the simplest ones that require me to think the least. The "standard" that has evolved is that required fields have an asterisk (*) next to them. Sometimes the asterisk is red to help it stand out a bit.

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

Why fight the standard? Don't make your users think too much. Go with the standard and keep your creativity for more important things.

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

#2


7  

If you're going to use colour to highlight the field, bear in mind that some people are colour-blind (so maybe provide another indicator too)

如果你打算使用颜色突出显示字段,请记住有些人是色盲的(所以也许提供另一个指示)

#3


5  

If you use stylesheets to format your HTML, then you can create a style for .mandatory. As an example, set the mandatory input to use this style, then you can play with it more easily until you have the right mix of color, border, and other style elements to suit your overall design.

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

HTML

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

CSS

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

I also use the asterisk as the OP mentioned as a "backup".

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

-R

#4


4  

Sometimes it really is justifiable to mark fields as mandatory and optional. However, before you do so, you should question whether it is reasonable to ask the user any non-mandatory information. This applies especially in registration forms.

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

In registration forms and such, it is much better to ask only the minimum information. After the registration the user can, at will, fill out optional information in separate forms.

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

After all the unnecessary cruft has been taken out from the form, you might see that there is no need to mark fields as mandatory; either everything is mandatory, or it might be so obvious to the user which fields are optional, that there would be no need to give visual cues about it.

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

#5


2  

add style="border: thin red solid;" to the element

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

#6


2  

I've found the answers on LukeW.com to be the most useful. because there isn't a simple solution here. It depends on what percentage of the fields are required, how many fields are in your form, and how long your labels are. For the vast majority of the web, people understand bold to be required, and normal-weight to be optional (if any options are bolded). Only after form validation fails would I present the user with the required-yet-skipped input boxes highlighted.

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

#7


1  

I typically have no objections to seeing (required) in a smaller font either right below the field name or adjacent to the entry field.

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

I could also see using a "textbox watermark" to have the field say "required" in it until they bring focus to the field and start typing.

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

#8


1  

I like the way it is done in the ASP.NET Ajax Control Toolkit for the ValidatorCallout control:

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

alt text http://i37.tinypic.com/264j7o5.png

替代文字http://i37.tinypic.com/264j7o5.png

#9


0  

Might want to check out www.PeterBlum.com - His Professional Validation Package rocks for validating and formatting of controls. He has tutorials for using and numerous examples as well as a detailed manual.

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