f# let!_不要成为＃f00！ 赶快行动吧！

f# let!

One element of a website that involves direct user to website interaction is web forms. Web forms can be extremely helpful in getting customer information or retrieving customer feedback. The problem is that users can forget to provide a value in a text field or choose a radio button option, thus submitting an incomplete form.

网站中涉及直接用户与网站交互的元素之一是Web表单。 Web表单对于获取客户信息或获取客户反馈非常有帮助。 问题是用户可能忘记在文本字段中提供值或选择单选按钮选项，从而提交不完整的表单。

It's extremely important to provide meaningful feedback to user when they've forgotten to provide required values or provide invalid information. Quite often that becomes red text or icons and involves telling the user "There's an error with your information..." Don't you think red is a bit harsh though?

当用户忘记提供所需的值或提供无效的信息时，向他们提供有意义的反馈非常重要。 经常会变成红色文本或图标，并告诉用户“您的信息有误...”，您难道不认为红色有点苛刻吗？

In my opinion, there are too many websites that display information to users in a crude fashion. That got me to thinking of better ways to display negative feedback on websites. I've created the following guidelines for myself:

我认为，有太多网站以粗糙的方式向用户显示信息。 这使我想到了在网站上显示负面反馈的更好方法。 我为自己创建了以下准则：

• Avoid red at all costs
  不惜一切代价避免红色
• Avoid using the term "error"; instead use "warning"
  避免使用“错误”一词； 改为使用“警告”
• Use graphics/icons to make the feedback "softer"
  使用图形/图标使反馈“更柔和”

I use the following system for providing feedback to the user.

我使用以下系统向​​用户提供反馈。

标头警告消息CSS (Header Warning Message CSS)

<div class="message-box">
	Ooops! You've forgotten to provide your first name.</div>
;

.message-box	{ border:2px solid #fc0; background:#fffea1; padding:5px 5px 5px 30px; background:url(/graphics/warning-big.png) 3px 3px no-repeat; }

输入字段CSS (Input Field CSS)

	.message-label	{ padding:0 0 2px 0; border-bottom:1px dashed #fc0; font-weight:bold; }
	.message-input	{ border:1px solid #fc0; background:#fffea1; }

I know that Google uses similar colors on form fields that the toolbar believes it knows the values to. That's why I've placed the smaller warning icon outside the field instead of as a background image.

我知道Google在表单栏上使用了相似的颜色，工具栏认为它知道这些值。 这就是为什么我将较小的警告图标放在字段之外而不是作为背景图像的原因。

Do you have any ideas for my code? How do you provide error messages back to users?

您对我的代码有任何想法吗？ 您如何将错误消息提供给用户？

翻译自: https://davidwalsh.name/dont-be-a-f00

f# let!