| 网站首页 | 本站新闻 | 康复医疗 | 人间真情 | 起来商务 | 就业指导 | 学习资料 | 站起来论坛 | 

您现在的位置: 站起来公益网 >> 学习资料 >> 网页制作 >> 正文
HTML标记语言——表单(4)
作者:站起来    文章来源:本网站    点击数:    更新时间:2008-5-28【字体:

技巧延伸

在这个单元中,我们会先讨论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,但是加上9 7 3 1 2 3 4 4 8 :

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 最新文章 热点新闻 相关文章
    HTML标记语言——表单(3)
    HTML标记语言——表单(2)
    HTML标记语言——表单(1)
    HTML标记语言——引用