技巧延伸

在这个单元中,我们会先讨论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直接切换到搜索输入框内了.

出处：蓝色理想
责任编辑：bluehearts

上一页 标记语言——表单 [3] 下一页 标记语言——表单 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。