关于input的一些记忆-让你的表单更漂亮

技巧延伸

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

神奇的tabindex

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

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

Webjx.Com

<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属性,那么在使用者按下指定的按键时,光标就会自动跳到与说明文字相关的输入框.

Webjx.Com

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

<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> Webjx.Com

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

容易使用的搜索框

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

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

为表单加上样式

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

Webjx.Com

设定文字输入框的宽度

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

Webjx.Com

<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是可视化浏览器的显示效果. Webjx.Com

Webjx.Com

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

Webjx.Com

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

Webjx.Com

#name, #email {

  width: 200px;

  } 网页教学网

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

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

使用<label>自定字体

我们有几种不同的方法能够调整表单内文字的大小,字体与色彩,我们再度奉行"利用你使用的标签"哲学,直接以<label>元素为文字设定样式.

我喜欢以<label>元素指定文字样式,主要是因为,在不少情况下,我们都会希望为说明文字指定独特的样式,使它们容易与表单内可能出现的其他文字区分开来,举例来说,我们可以为表单内的所有段落标签制定独特的样式:

#thisform p {

  font-family: Verdana, sans-serif;

  font-size: 12px;

  font-weight: bold;

  color: #66000;

  }

网页教学网

这会使表单内的所有段落文字使用粗糙,酒红色的Verdana 12像素大小的字体.但是同样的结果也能借着为表单内的<label>元素指定相同样式来达成,像这样:

#thisform label {

  font-family: Verdana, sans-serif;

  font-size: 12px;

  font-weight: bold;

  color: #66000;

  } Webjx.Com

这个样式的显示效果见图5-11. 网页教学网

图5-11.为label指定样式的效果

为什么我比较喜欢这个方法?假设除了说明文字之外,表单还有其他放在<p>当中的指示或文字内容.那么在前一种方法内,这些文字就会使用和<p>相同的样式设定了.

Webjx.Com

也能先为表单中的所有文字制定一种样式,接着再为<label>特别指定样式,以便做出独特的表单元素显示效果.

使用的CSS大概类似这样:

#thisform {

  font-family: Georgia, serif;

  font-size: 12px;

  color: #999;

  }



#thisform label {

  font-family: Verdana, sans-serif;

  font-weight: bold;

  color: #660000;

  }

网页教学网

不需要多余的代码

 或许你或发现,在#thisform label 的定义中没有重复font-size:12px;由于<label>元素包含在#thisform之内,因此他们会继承这个属性.在较高层级设定共享规则,接着在元素树底层覆盖有需要的设定值是个好习惯.这能节省不少代码.除了显而易见好处之外,也能让往后的维护工作轻松不少.如果你想改变整个表单的font-family,那么只需要修改一条规则,而不必修改所有重复设定字体的规则.

想象你设计了一个网站,全部使用了Georgia字体,最初你在20个不同的规则中分别加上相同的font-face:Georgia,serif;规则,过了一星期后,老板跑来找你并且对你说"CEO现在讨厌serif字体了,把网站内容改用Verdana".这时你的钻进这20条规则里,慢慢修改了.

或者是,你也能在更高层级设定一次这条规则,比如说指定在<body>元素里,此时整份文档都汇继承Georgia字体,除非以其他规则指定另外的设定值.现在,当老板要求你进行修改时,你就能回答"没问题,两分钟之后搞定";或者是能把简易性留给自己,告诉他这需要耗上两个小时,然后用这些额外的时间上eBay标东西.

OK,当然,你应该告诉老板真相,他们应该知道你的价值,为公司节省时间并且善用你找到的新解法.

网页教学网

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

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

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

<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;

  } Webjx.Com

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

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

Webjx.Com

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

立体的<legend>

最后,为<legend>标签指定一些样式,做出立体的边线效果,让它看起来像是与<fieldset>元素的边线连在一起. 网页教学网

#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;

  }



#thisform legend {

  font-family: arial, sans-serif;

  font-weight: bold;

  font-size: 90%;

  color: #666;

  background: #eee;

  border: 1px solid #ccc;

  border-bottom-color: #999;

Webjx.Com

  border-right-color: #999;

  padding: 4px 8px;

  }

Webjx.Com

如你所见,这里做了几件事,首先,调整了<legend>的字体,粗细与大小,接着产生了立体效果,把背景设为浅灰色,然后在整个<legend>的外面加上配合<fieldset>边线颜色的单像素边线,为了达成阴影效果,我们还把底部与右侧的边线颜色换成深一点的灰色.

字体大小百分比: 由于我们之前为整个#thisform 的字体设置为font-size:12px;因此要缩小<legend>文字时,我们直接用百分比,在较高层级指定字体大小,接着在底层使用百分比,能够减轻未来的维护负担.要调大整个网站的字体大小么?只要修改一个地方,所有百分比都会随之改变.事实上,最理想的状况下,我们可以设定<body>的初始字型大小,然后在其他所有地方使用百分比.然而在这个示例中,我们选择在<form>层级指定字体大小.

然后调整内部定,以便文字与边线之间留下一点空间.就是这样了!图5-14显示的是最后结果,加上本章内的所有CSS代码,同时仍然使用最简洁,灵活的表单结构. 网页教学网

图5-14 完成的表单示例,以CSS设定样式. 网页教学网

结论

标记表单有许多方法,不管你使用表格,定义清单,还是最基本的段落标签进行说明,表单元素的排版,都要记住,本章讨论的易用性功能,可以轻易加到任何方法里面.

像是tabindex与accesskey这种属性可以提升浏览效率,而<label>元素与对应的id属性能确保互助设备可以正确辨识你的表单内容.

基础短小简介的修改,就能得到更好的结果.