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

技巧延伸

在这个单元中,我们会先讨论tabindex和accesskey属性,看看它们如何使表单变得更加容易浏览.我们也会研究能帮助组织表单区域的<fieldset>标签,最后,我们会看一些CSS,因为它能把表单外观修饰得更漂亮.

神奇的tabindex

我们能轻易加上的功能之一是tabindex属性.加上tabindex,为它指定一个数值之后,使用者就能以键盘切换正在使用的表单元素(通常是Tab键).按下Tab就会依照我们所制定的顺序跳到下一个表单元素.根据预设值,每个能互动的元素都隐含有tabindex,但使用tabindex能收回浏览器指派的顺序,让你完全掌握控制权.

举例来说,让我们为先前的示例(方法C)里面的表单元素加上tabindex属性:

<form action="/path/to/script" id="thisform" method="post">
  <p><label for="name">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>
</form>

现在,当使用者在表单内切换输入框的时候,我们能确定切换的顺序与我们期望的顺序完全相同:Name,Email,Remenber this info与submit按钮.

在设计复杂,单一行有许多输入框或者其他表单元素的表单时,使用tabindex设定切换顺序的优点就显而易见了.

为何指定切换顺序?

除了在我们表单上实施非常简单之外,还能再次帮助到行动受限的使用者,使其能完全以键盘浏览表单内容.他们不需要抓起鼠标点击每个部分,只需要用Tab键就能依照正确的顺序遍历每个表单元素.请为那些无法同时使用双手浏览网页的人想想,这真的很有帮助.

为频繁使用的表单指定快捷键

与tabindex类似的.accesskey属性是另一个容易加上的功能,不仅能帮助行动受限的使用者,对其他人来说也是方便极了.

举例来说,如果为表单内包围着Name:的<label>标签上加上accesskey属性,那么在使用者按下指定的按键时,光标就会自动跳到与说明文字相关的输入框.

我们来看看达成这个效果所需要的代码:

<form action="/path/to/script" id="thisform" method="post">
  <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>
</form>

使用者必须在按下9这个按键的时候同时按下Alt或Ctrl键,根据系统而定,之后光标就会立刻移到Name:的输入框里头.

容易使用的搜索框

在设计会经常使用的表单时(比如搜索框,用户登录等等),加上accesskey属性格外有用,使用者不必伸手去拿鼠标,就能使用键盘立刻切换到适合的位置,开始进行输入.

有件事必须留意,虽然不是所有浏览器都支持accesskey,但是加上这个属性对支持的浏览器使用这很有帮助,举例来说,要是我们加上accesskey="9"的搜索位置时,windows使用者可以按Alt+9,而Mac使用者则能以Command+9直接切换到搜索输入框内了.

为表单加上样式

现在有了结构完善的表单,接着让我们研究一些能够用来自定显示效果的CSS技巧吧!

设定文字输入框的宽度

处理表单元素需要技巧,因为它们的宽度,高度与浏览器种类有关.在表单示例中,我们没有指定文字输入框的宽度,让浏览器自动使用预设值,一般来说,设计者或许会以size属性为<input>元素指定宽度,像这样:

<input type="text" id="name" name="name" tabindex="1" size="20" />

把大小指定为20代表将文字输入框的宽度设置为20字元(而不是像素).根据浏览器的预设表单字体,实际的输入框像素宽度可能会有差异.这使得精确指定表单排版变得有点困难.

如果需要的话,我们能借着CSS以像素为单位控制输入框(以及其他表单元素)的宽度.举例来说,让我们把示例表单中的所有<input>元素宽度设定成200像素,我们会利用为表单指定id属性,在这个示例中是thisform.

#thisform input {
  width: 200px;
  }

这时,所有在#thisform内的<input>元素都会变成200像素宽.图5-9是可视化浏览器的显示效果.

图5-9 把所有<input>元件宽度设置成200像素之后的效果

哦喔~多选框和submit按钮也是<input>元素,因此得到了相同的设定值,让我们改以id指定Name和Email输入框,而不是一次设定所有的<input>元素的宽度:

#name, #email {
  width: 200px;
  }

图5-10是以浏览器检查修正后成果的效果,这时只有两个文字输入框是200像素宽的了.

图5-10.只有文字输入框是200像素宽的效果