图5-1:浏览器显示的方法A的效果

你会发现,使用表格可以把文字说明表单元素排列的十分整齐.然而,对这样简单的表单来说,或许我会避免选择使用表格,并且换用其他不需要使用这么多标签的方法.除非表单的视觉设计十分需要这种排版,否者未必需要使用表格.同时我们也要考虑几个易用性问题,在研究下面两个方法的时候,我们就会接触到这个部分.

方法B:不用表格,单挤在一起
<form action="/path/to/script" method="post">

  <p>

    Name: <input type="text" name="name" /><br />

    Email: <input type="text" name="email" /><br />

    <input type="submit" value="submit" />

  </p>

</form>

使用单一段落和几个<br />标签隔开所有元素是个可行方法,但视觉上可能会被描绘的有点挤.图5-2十一版浏览器的显示效果:

图5-2:浏览器显示方法B的效果

虽然我们不用表格就能完成排版,但是它看起来有点挤,有点丑.同时我们也遇上表单元素无法完美对齐的问题.

我们能够以CSS为<input>元素加上一个外补丁,以便减轻拥挤的感觉.像是这样:

input{

    margin:6px 0;

}

前面这段为每个<input>元素的上下分别加上6像素的外补丁(包含了Name,Email的输入框,以及submit按钮),在元素之间加上额外的空间.就像图5-3一样:

图5-3.方法B在为input元素加上外补丁之后的效果

方法B本身没什么大问题,但是还能进行一些微调,以便把表单做得更好.方法C里头也运用了这些微调技巧,所以一起来看看吧.

方法C:朴素,更容易使用
<form action="/path/to/script" id="thisform" method="post">

  <p><label for="name">Name:</label><br />

  <input type="text" id="name" name="name" /></p>

  <p><label for="email">Email:</label><br />

  <input type="text" id="email" name="email" /></p>

  <p><input type="submit" value="submit" /></p>

</form>

我喜欢方法C的几个地方.首先,对于类似本示例的单纯表单来说,我发现把每个说明与表单元素放在单独的段落比较方便,不加上样式显示时,段落之间的预设距离应该足以让你轻松阅读内容.稍后我们还能以CSS为表单内包含的<p>标签设定间隔.

我们甚至更进一步,为表单设定了唯一的id="thisform".因此,刚才我提到的精确间隔大致上可以写成这样:

#thisform p{

margin:6px 0;

}

这代表将这个表单内的<p>标签的上下外补丁设定为6个像素,覆盖浏览器为一般段落选用的预设值.

方法C与前两种方法的另一个不同之处在于:尽管每个群组(说明和输入框)都放在<p>里头,我们仍以<br />把他们放在独立的一行.使用<br />分开每个元素,就能绕过文字长短不一,造成输入项无法完美对齐的问题.

图5-4是一般浏览器显示方法C的效果,这边有使用先前为<p>标签设定的样式.

图5-4.浏览器显示方法C的效果,有对P标签使用CSS

除了方法C的视觉效果之外,最重要的优点:也就是提升易用性的部分.

<label>标签
使用<label>标签提升表单的易用性需要两个步骤,而方法C已经完成这两个步骤了.首先是以<label>将文字说明与相关的表单元素连接在一起,不管是文字输入框(text field),文字区块输入框(text area),单选框(radio),多选框(checkbox)等等都好.方法C在"Name:"与"Email:"标题上使用了<label>标签,把9 7 3 1 2 4 8 :