创建优秀网页表单的技巧

1. 使用标签

表单不需要标签也能工作，但正如一位 CSS-Tricks 读者曾经说过的，不使用标签是一种无障碍方面的犯罪。 标签表明输入框的用途，并将它们关联起来。 使用 <label> 标签不仅语义正确，而且可以让您有机会使用 CSS 对其进行独特样式设置。

2. 使标签浮动

这就是如何在不实际使用表格的情况下实现表单上的表格式结构的方法。 只需设置一个静态宽度，将其向左浮动，将文本向右对齐，并给它添加一点右边距。 很漂亮。

label {
  float: left;
  text-align: right;
  margin-right: 15px;
  width: 100px;
}

3. 注意不要破坏默认样式

许多浏览器都对输入按钮应用了默认样式。 这提供了良好的用户体验一致性，因此，如果您选择干预，请确保您有充分的理由。 一种常见的破坏方法是使用 CSS 重置技术，其中包含如下内容

* {
  border: none;
}

这很好，因为它可以防止在您不希望出现的位置出现不需要的边框，但它也会破坏 Firefox 中输入按钮的默认样式。 一些浏览器更具弹性，有些即使您想更改也很难更改（Safari）。

4. 使用 :focus 伪类

您可以对输入区域和文本区域应用样式，这些样式仅在用户使用 :focus 伪类单击该区域时才会生效。 例如，您可以像这样更改这些元素的边框颜色

textarea:focus, input:focus {
  border: 2px solid #900;
}

大多数浏览器都支持它，因此您不妨使用它。 考虑前瞻性增强。

5. 预填充提示，但清除它们

在输入字段和文本区域中预填充一些提示或提醒可能很有用。 例如，如果您有一个常规联系表单和一个标记为“消息：”的文本区域，您可能希望在该文本区域中预填充类似“在此处留下您的积极评论或建设性批评。”的内容。或者，您可以拥有一个预填充为“姓 名 称”的姓名字段，以便您可以提醒用户他们应该按此顺序填写他们的姓名。 您只需在标签中包含文本即可实现此目的

<textarea cols="20" name="Message" rows="20">Hint goes here.</textarea>

但是，如果您就此止步，用户将需要手动删除您在那里输入的任何内容，这不好。 您可以添加一些 Javascript 代码，以便在用户单击该框内部时清除该提示。 这段小程序代码还只允许发生一次，因此如果用户单击离开然后再次单击，他们不会丢失他们输入的内容。

<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Hint goes here.</textarea>

6. 使其与 Web 表单工厂一起工作

表单不仅仅是为了美观，它们需要发挥作用。 网页表单可以有两个主要功能：与数据库交互或生成电子邮件。 Web 表单工厂 是一项开源服务，它可以获取您的表单并生成使其完成所需操作所需的代码。

7. 考虑预制解决方案

网页表单是一个反复被讨论的领域。 在这个领域，“不要重新发明轮子”可能是您能做出的最佳决定。

我认为每个人都应该查看 Wufoo。 Wufoo 绝对是有史以来最棒的表单创建器。 他们的价格从免费到合理不等，创建向导非常棒，并且将表单实现到您的网站上非常容易。