引言

HTML表单一文中介绍了关于表单的创建和样式化的基础内容。本文提供了关于表单元素和样式的更多详细内容，以及在真实的web应用程序设计中表单是如何运用的。

本文中引入的概念

这一部分提供了关于表单实现和界面布局的新信息。

规则和标记超载

大量使用class和id标记是违反KISS（保持简洁）准则的（在CSS盒模型与基础布局一文中已经解释过了）。然而，难度大的布局却经常会在级联上遇到很多冲突——这些冲突最简单的解决方法就是在元素中添加标记，以及编写包含若干选择符的样式表规则。

难度最大的布局中到处都是边缘情况，对这些边缘情况最好的处理办法就是给元素赋一个id，来定义一个狭义而唯一的环境。

新表单域元素

通常一个实际的表单所需要的不仅仅是按钮和文本输入区域，因为我们常常会需要按照选项来构建用户响应。HTML为有这种要求的设计人员提供了若干选项。

表单设计原则

对于网站来说，表单常常是用户交互和数据搜集的焦点所在。因此，表单对于一个网站的成功与否是非常关键的，这就要求我们对表单的设计给予高度的关注。

三分法则

最容易吸引网站用户的注意力的是浏览器画布（以及穿过布局的线条）上的四个特定点。本文将向你介绍这种现象，并提供一些建议，告诉你如何通过CSS来最大程度地利用这种现象。

Grids栅格

前面的文章中我们介绍了如何确保排版的一致性以及最大化地利用空白。本文中我们会更进一步地阐述如何利用em单位来实现一定程度的布局一致性，这种一致性只有通过CSS才能实现。

平台支持等级

商业项目中常见的一种要求是，一个被认可的网站设计应当在一种或多种浏览器上渲染效果一致。本文将会对这种要求的原因，效果，以及用于满足这种要求的处理方法进行简要的探讨。

一张简单的联系表单

通过联系表单，网站访客可以直接将e-mail发送到站内信箱中，联系表单的使用是非常普遍的，这是因为：只要用户具有激活的e-mail地址，他就可以使用联系表单，而且联系表单可以很方便地结合到专门的邮件文件夹中。

在前面的表单一文中，所涉及到的标记就是用来创建这样的表单的，我们还对这个表单进行了一些修饰：

标记

<form id="contactForm" method="post" action="/cgi-bin/service_email_script.php">
  <ul>
    <li id="nameField" class="required"><label for="realname">Name:</label><input type="text"
      name="name" value="" class="medium" id="realname" /><span
      class="note">required</span></li>

    <li id="addressField" class="required"><label for="address">Email:</label><input
      type="text" name="email" value="" class="medium" id="address" /><span 
      class="note">required</span></li>
    <li id="subjectField"><label for="natureOfInquiry">General
    subject:</label>

      <select name="subject" class="medium" id="natureOfInquiry">
        <option value="support">Support</option>
        <option value="billing">Accounts & billing</option>
        <option value="press">Press</option>

        <option value="other_q">Other questions</option>
      </select>
    </li>
    <li id="acctTypeField"><label for="acctNone">Account type:</label>

      <fieldset>
        <label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct"
          class="rInput" />
        <label for="acctSilver">Silver</label><input type="radio" name="acct_type"
          id="acctSilver" class="rInput" />
        <label for="acctBronze">Bronze</label><input type="radio" name="acct_type"
          id="acctBronze" class="rInput" />

        <label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone"
          class="rInput" checked="checked" />
      </fieldset>
      <span class="note">required</span>
    </li>

    <li id="availabilityField">
      <label for="availability">My account is unavailable:</label><input type="checkbox"
        name="is_down" id="availability" class="rInput" /></li>
    <li id="messageField"><label for="messageBody">Comments:</label><textarea name="comments"
      cols="32" rows="8" class="long" id="messageBody"></textarea></li>

    <li class="submitField"><input type="submit" value="Send" class="submitButton" /></li>
  </ul>
</form>

由之前的表单变化而来

除了包含了几个新元素之外，这段标记之中还添加了许多class和ID，这些class和ID可以在样式表中加以引用。这样就可以对每个表单，表单域/值组，以及表单域分别加以引用，而不用管上下文。

此外，通过新的标志符，设计师就可以将必须填写的表单域和不是必填的表单域区分开来。

最后，这段代码中还有一些新的类，用来提示自身所在的表单元素应该显示的信息的数量和类型。通过这些类，就可以将布局细节同时应用到多个任意元素上。