良好的HTML表单要求至少在四点注意：
语义学
无障碍
功能
设计
表格可能会很困难，有时甚至是困扰了用户;经常中断的形式在页面上用户的主要重点和方向：他们购买的礼物，或尝试新的Web应用程序的意图，没有给你的送货地址或未来与另一个密码。这些提示将表格您更容易为开发/设计，以及他们作为用户。
语义学
1：使用字段集来封装类似领域
一般来说，表格内的组成形式标记的投入。当你有很多的领域，用户必须填写，可以方便用户和您的开发，保持利用字段集输入轨道。这个例子是常年使用字段集分离帐单地址和送货地址。
帐单地址“/跨度”
城市“/跨度”
省“/跨度”
邮政编码“/跨度”
“/字段集”
送货地址“/跨度”
城市“/跨度”
省“/跨度”
邮政编码“/跨度”
“/字段集”
2：传奇标签字段集
它没有任何意义使用没有给它一个明确的名称字段集。我们可以提高使用传奇元素名称的字段集上面的代码。
FIELDSET元素有一个默认的边界，而传奇将为超过该边界本身。
帐单地址“/传奇”
地址“/跨度”
城市“/跨度”
省“/跨度”
邮政编码“/跨度”
“/字段集”
在结果如下：
3：为您的输入
如果你想传递表单数据的脚本，每个输入元素需要有一个名称，如果您使用的是PHP，这些名称将成为一个超级全局数组，键通常是$
_POST或$ _GET。
帐单地址“/跨度”
城市“/跨度”
省“/跨度”
邮政编码“/跨度”
“/字段集”
4：使用标签元素
让我们继续提高的代码，不会有本质错用跨度标签的投入，但标签标签是出生的投入比赛。
结算Affress“/传奇”
“/字段集”
5：给标签的属性
我真的很喜欢的''属性，它提供了一种标签绑定到一个输入。在'对'值应作为输入您想要的ID绑定到相同的。
结算Affress“/传奇”
地址“/标签”
城市“/标签”
省“/标签”
“/字段集”
首先，这是其中的一件事情似乎只影响您的代码的质量，但它们在可见光内容的特殊工作：属性时，定义的标签变成了'点击'领域，将重点投入。例如，点击了一个文本输入标签将注意力集中在框中输入您的光标，点击一个复选框标签将检查(或取消)的框。
6：使用optgroup的分类办法
如果你有一个选择，通常最好分组到optgroups他们很多选择。
是一个鲜为人知的因素，将缩进选项，给他们一个冠军。请注意，标签属性是必需的。
选项>阿拉斯加“/选项”>
“/ optgroup”
选项>阿尔伯塔“/选项”>
选项>不列颠哥伦比亚省“/选项”>
“/ optgroup”
“/选择”>
这给我们的结果如下：
7：总是完整的属性分配
当使用的形式，特别是，让你不由得不这样写：
生活？“/标签”
是的，这做什么是应该做的。不，你不应该这样的代码！它不是符合标准。每当你要添加属性的元素，不偷工减料。
生活？“/标签”
8：考虑使用，而不是提交输入按钮
一般来说，
/>已普遍提交按钮。但HTML有元素。为什么你会使用它？那么，它通常更容易样式按钮，也可以把你在一个按钮图像，这的确让提供更多的灵活性。你可以阅读更多
这些 二 的文章。
无障碍
9：把你的投入tabindices
这无疑很容易通过一个表格，标签，但要使用鼠标。 。
。但是，默认情况下，您的用户将标签通过在它们在HTML的书面命令。如果这不是为了您希望他们经历的投入，您可以轻松地TabIndex属性添加到您的投入;的tabindex接受一个数字值，并会跳的一个最高值时，你按下输入该标签的关键。
10：在适当的时候定义导览
在导览属性创建一个键盘快捷方式，将重点，输入：捷径是Alt(选配)+的快速键的值。显然，你不会把每输入一个快速键，但它肯定会在，例如，一个有用的搜索框。别忘了让用户对快捷知道，通常这是由信中强调做，因为它通常标签的一部分。
拧“/跨度”earch“/标签”
11：使用好重点技术
你可能认为这一点是在设计的一面，它更是方便。它总是好的，如果窗体字段(通常是一个文本框，在这种情况下，)改变颜色时，它的重点，但对视障人士，这几乎是必要的，如果他们使用的形式成功。为此，您可以使用你CSS悬停psuedoclass，这将在除IE7和了所有常见的浏览器。您也可以使用这个JavaScript;
jQuery的有悬停事件。
输入[类型=文本]：徘徊(
背景颜色：＃999999;
边框颜色：＃999999;
)
12：考虑使用屏幕读取器
由于形式的倾向，如此繁琐，每个人都喜欢一个设计良好的形式。但是不要让看上形式忽略屏幕阅读器：始终确保您的输入有明显标记。如果您不希望这些标志，以显示(也许你标记的价值观，重点是消失文本输入)，您可以删除他们的视觉效果(不使用显示：无，但;
有更好的办法)。此外，屏幕阅读器之前，一般的副文本直接输入是用于输入标签。这是对单选按钮和复选框例外。
功能
13：使用正确的内容类型
在大多数情况下，你不需要把你的表单标签的enctype属性，它会默认为“应用程序/ x -
www的形式，进行urlencode。”然而，当您有一个文件输入，这将允许用户上载文件，您需要使用“多部分/表格的数据。”
&tl;标签为=“化身”“上传您的头像：”/标签“
“/表格”
14：知道何时使用Get以及何时使用邮政
表单可以通过两种方式发送的数据：GET和POST，你定义窗体上的标记方法，属性之一。有什么区别，什么时候应该使用它们？忽视所发生的在服务器上，主要的区别就是这样的浏览器发送的信息。随着获取，数据的形式发送一个查询，可见的url。因此，这种形式。
。 。
&tl;标签为=“FName的”“姓”/标签“
&tl;标签为=“lname”，“姓氏”/标签“
“/表格”
。 。
。将导致在此网址时提交：http://www.example.com/you.php?fname=Bill&lname=Gates
当您使用后，数据发送的HTTP请求头。这样，它的不可见的普通用户。所以，你应该使用它的时候？邮政是更好的(如密码)和任何数据，一般会改变一些敏感数据(如记录添加到数据库)。此外，职位是您唯一的选择，如果您上传的文件。得到的是伟大的查询数据库，和其他要求上没有什么长期影响(“幂”的规范要求它)。真的，我刚刚触及到表面上的差异在这里：有
其他 文章 这是进入深入。
15：在客户端和服务器验证
验证是形式的祸根。但是，最好检查无论在客户端和服务器上的投入，在浏览器中验证可以警告用户的错误之前，提交表单，需要与服务器少了一个交易。然而，始终确保在服务器上验证，以及为安全起见。
16：给你的用户智能警告
这会与以前的最佳实践的手。我已经提交了太多只被告知的形式很多次“栏填写不正确。”你能拼写含糊？一旦确定了你，你的用户犯了一个错误，让他们知道尽快和尽可能明确。把你的错误信息接近坏领域，让您的用户知道什么是他们的入境问题。我喜欢使用jQuery的模糊此()事件：一旦用户跃到下一个框，前一个验证。
17：考虑使用AJAX提交
很多时候，submiting在一个简单的信息窗体的结果：“谢谢你”，“请检查您的电子邮件确认函”或“我们会尽快给您的时候，我们可以。”当是这种情况，什么更好的地方使用AJAX？你可以只淡出的形式，发送jQuery的数据或(最喜欢的资料库中)，并在邮件中淡出。
18：请确保您的表单没有启用Javascript工程
也许这应该去下的机会;虽然技巧上的情侣需要启动所有工作，确保您的形式是完全没有这些功能。这意味着定期提交表单，服务器端验证，并重新载入网页后良好的错误。
设计
19：风格形式始终
我不是设计师，我不敢说，但我知道这么多：不甩你的表单字段随便左右。您的表格应符合其风格。决定是否您的标签将是向左或向右(或者以上或以下)的领域，并坚持下去。让所有您的文本输入和textareas相同的宽度。空间所有的领域同样具有。保持至少一箱的边缘对齐。在tuts
+注释的形式，是良好的风格形式的榜样。
20：考虑使用JavaScript来对不同的平台始终风格形式
随着upteen浏览器/操作系统组合，形成元素的一致性几乎是不可能的。 。
。没有一点的JavaScript帮助。如果你想看看你的形式，对几乎所有的浏览器相同的，签出 jqTransform
jQuery插件，针对这个问题，直接兼容插件。简单，包括它，调用它，调整包括CSS文件到您的口味，它与IE6的+，2
+ Safari浏览器，火狐2 +和铬。
21：受到启发别人
如果您在心照不宣的，对您的网站设计了独特的形式，去一个小灵感！碎杂志有 伟大的形式综述和Smileycat的“设计元素”画廊有一堆
博客评论形式 值得检查。
结论
22：展望HTML 5的形式
HTML
5中的Web窗体一些伟大的功能。最令人兴奋的是两个输入端(如网址，电子邮件及日期)和DataList的元素，它可以自动完成，方便使用的新类型。当这些和其他地方的规范得到执行，动态形式将容易得多！
网站的形式可以是具有挑战性的，但我希望这些建议将有助于您让您形式鹤立鸡群了。有一
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
