引言

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><