[翻译]标记语言和样式手册 chapter 5 表单（7）

以<fieldset>制作表单元素群组

使用<fieldset>是个为表单元素分组的便利方法.除此之外,加上叙述用的<legend>则会在大多数浏览器内,为你做好的表单元素群组加上一个漂亮的边框.我刚刚有说"漂亮"吗?嗯,我的确喜欢这种边框.而我们只需要用上一点CSS,就能使它变得更加迷人.

首先,来看看建立群组是需要哪些标签.接着为示例表单加上一个群组:

<form action="/path/to/script" id="thisform" method="post">
  <fieldset>
    <legend>Sign In</legend>
    <p><label for="name" accesskey="9" >Name:</label><br />
    <input type="text" id="name" name="name" tabindex="1" /></p>
    <p><label for="email">Email:</label><br />
    <input type="text" id="email" name="email" tabindex="2" /></p>
    <p><input type="checkbox" id="remember" name="remember"  tabindex="3" />
    <label for="remember">Remember this info?</label></p>
    <p><input type="submit" value="submit" tabindex="4" /></p>
  </fieldset>
</form>

图5-12是浏览器显示这个群组的效果图,包含刚加上的<fieldset>与<legend>标签,以及刚为<label>设定的CSS样式.或许你已发现有条漂亮的边线围绕在<fieldset>里面的所有表单元素之外,同时<legend>的内容断开了左上方的边线.

图5-12.加上<fieldset>与<legend>之后的表单

我说这个效果"漂亮"的原因是:完全不加上CSS,使用它们的预设样式,它的显示效果的确让人相当感动.同时还能加上一些自定属性,使它变得更有趣,我们马上动手.

你应该也能看出<fieldset>在为表单隔出不同区块的时候十分有用,举例来说,如果我们的示例是个大表单的第一部分,那么以<fieldset>从视觉上隔开这些区块的话,不仅语义更清楚,还能使表单结构更明显,更容易阅读使用.

为<fieldset>和<legend>加上样式

我们能使用CSS改写<fieldset>预设边框与<legend>文字的样式,与定义其他元素的样式一样简单,首先,我们来修改边框的颜色和宽度,接着再修改文字本身.

为了使<fieldset>的边线变得更加细致,我们使用以下的CSS:

#thisform {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #999;
  }
#thisform label {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #660000;
  }
#thisform fieldset {
  border: 1px solid #ccc;
  padding: 0 20px;
  }

接着为左右两边指定20像素的外补丁,并且去掉上下外补丁,为什么要去掉这些外补丁?因为我们的表单说明文字,表单元素都放在<p>标签内,因此他们在上下方向上已经留足了边界空白.

图5-13是指定这些样式之后的表单显示效果.

图5-13.为<fieldset>指定样式之后的效果