今天翻到一篇 Andy Clarke 的老文章《 Trimming Form Fields 》，感觉不错，主要是这种思想，设计的时候要尽量为 User 着想，这是许多 Web Developer 所缺少的。

Web 表单通常要求用户填写一些必要和非必要的信息，长而复杂的表单会影响用户的体验效果，拿电子商务来说，它会使销售过程严重受阻。

如果用户可以自由隐藏选填项的话，你认为怎么样？而这些只用一些 Javascript、DOM、CSS 就可以实现。

我们只要填加一些额外的代码，就可以做出一个充满语义和亲和力的表单。对于不支持 CSS 和 Javascript 的客户端，表单也会正常“运转”的。这个表单将完全实现内容、表现和行为的分离。

在我们具体实施之前，您可以先看以下最终的效果（在 IE 和 Firefox 中效果可是不一样的）。

标记

首先，我们要做一个基本的表单，包含一些结构化的 fieldset，legend 和 labels 。

注意到，我们在每一个表单元素的后面都加了一个＜ＢＲ／＞。这当然是不符合语意义的规范的，但是它将保证在缺少样式表的情况下，依然有一个整齐的布局。如果您不担心无样式的布局，那么就可以把这个标记去掉了。

确保区域是可以隐藏的

确保有些区域是可以隐藏的，我们将把可选项都用一个赋予 class="fm-optional" 的 DIV 所包围。

我们同时也将在它们的前面添加一个空段，配有一个唯一的 ID ，在后面，它将变成我们的转换按钮。

必填区域怎么办？

尽管我们使用 CSS 来在视觉上区分“必填区域”，但是它对文本浏览器和读屏软件是不起作用的。所以我们在每一个“必填区域”的 label 上都增加了 Required 以做提醒。

现在表单的雏形已经出来了，它只包含一些简单的标记，没有“表现”和“行为”，其中的 class 和 id 都是根据内容来命名的。

表单的 CSS

现在我们要给必填区域增加一些样式。（所有的区域我们都先给它按照必填区域对待，选填区域我们会特别声明）我们给文本输入和下拉菜单的边框都赋予红色。

fieldset div {
margin : 0;
padding : 0;
}

fieldset div input {
width: 200px; /* 我们先不考虑盒子模型的问题 */
border : 1px solid #900;
padding : 1px;
}

fieldset div select {
width: 200px;
border : 1px solid #900;
padding : 1px;
}

为了使用户明确的识别出“必填区域”，我们为 label 增加一个 :before 的假定类（ pseudo class ），这在 IE 中是看不出来的。

fieldset div label:before {
content: "* ";
}

就是下面的效果（在文字前面多了一个星号，在 IE 中是看不到的）

好了，下面该轮到选填区域了，我们为每个选填区域都定义了一个 fm-optional 的类。我们首先要去掉刚刚加上的“星星”，然后让他们的边框变成灰色。

fieldset div.fm-optional {
display : block; /* 设置选填区域 DIV 的显示方式 */
}

fieldset div.fm-optional label:before {
content: "";  /* 去掉 label 前的小星星 */
}

.fm-optional input {
border : 1px solid #ccc;  /* 让它们的边框变成灰色 */
}

好了，现在表单的其他部分，例如 button 等等，你就自己看着加吧，我们快大功告成了。

添加“动作”

首先我们将用到前面设置的空容器：

。在这个脚本中，最 cool 的是我们用到了 DOM ，如果 javascript 没有被禁用的话，它将自动创建链接和其中的文本。

当页面被载入时，我们将先创建链接文本。

toggle.appendChild(document.createTextNode('Remove optional fields?'));

然后我们在具体转变链接文本是 'Display' （显示）还是 'Remove' （隐藏）。

this.firstChild.nodeValue = (linkText == 'Remove optional fields?') ?
'Display optional fields?' : 'Remove optional fields?';

最后，我们将设置所有可选区域（类为 'fm-optional' ）的显示属性。

{
tmp[i].style.display = (tmp[i].style.display == 'none') 
? 'block' : 'none';
}

总结

看看最终效果吧，它的可用性和亲和力都是很强的，用 JAWS 检验以下吧~

下载

样式表和 Javascript 文件

Update: Onestab 又恢复了！

今天刚刚写了一篇关于 web standards 的论文（字数5000+）作为系统工程的作业，可是却发现 Onestab 没了，突然感觉到一种凄凉~

不得不承认时间过得飞快，2005这么一眨眼就过去了，忘记了去年的这个时候在做什么，又在想什么。所以想把今年的发生的事情做一个简单的回顾，并对明年做一个简单的规划。希望明年的这个时候，不再有“忘记”的遗憾。

2005

1、2月悠闲的过着寒假

3月决定考研，不过 blog 和 web standards 仍然占去了我大量的时间

4、5月开始了考研的复习，郁闷开始伴随我左右

6月打算放弃写 blog ，一心不可二用，考研的压力逐渐增大

7、8月的主题仍然是考研，不过，还是按耐不住对 blog 的着迷，在 donews 上开了一个 x5 考研周记，寻找一个发泄的窗口。暑假的时间并没有利用好，使复习进度明显慢于其他研友。

9月新学期开始了，别看是大四，课程依然很多，复习的时间骤然减少，不过学校的外推考试，完全打破了我平静的生活。

10月由于外推考试的原因，近一个月没有学习，考研的信心骤减，处于极度郁闷状态。月末，经过了 N 多波折，结果出来了，外推成功，被保送至哈工大。也是这个月，打算重新 blog ，选择了 blogbus 。

11月过着猪一般的生活，虽然自己定了 N 多计划，不过，都被这突然松懈下来的神经打破。

12月神志开始逐渐清醒，不能再过猪一般的生活了，遂开始上自习，开始学自己想学的东西，这是最令我以前向往的生活了。偶然的机会，认识了常可（其实我的 bloglines 中早就订阅他的 blog  ，只是一直未与作者接触），并与其合作——这件事，对我的意义还是满大的。

2005年算是我的一个转折点，希望能转到一个好的方向上去.......

2006

有许多愿望，想在06年实现，最起码在上半年（下半年就离开沈阳了，还是不做预测的好），有一些事情是我希望能够完成的：

1、强化英语口语、听力，并参加最后一次老 TOEFL，希望分数不要让自己失望；

2、减肥——怎么都得减个30斤；

3、做出两个网站来，其中的 csser.org 也拖了很久了，致以深深的歉意，不希望大家以为我只是说说而已；至于另一个站点，现在已经有很多想法，就是不知道在技术上如何实现。

4、举办 1kg 图片展，唉，不能再拖了，自费也得把它搞定；

5、希望能够独立翻译一本书。

6、学会珍惜时间，这一点我认为是最重要的一点。

就写到这儿吧～

祝大家2006年身体健康、万事如意。

对了，还有一个希望，就是 blogbus 别总宕机:-)

这一到年末，网上各种总结性的文章就出来了，大家都纷纷列出各种 top 10/12/15 的事物，CSS Beauty  上的 SkillShare 论坛上也有人发起了《 My Top 12 CSS Articles/Tricks of 2005  》，下面列出的是这个帖子中（截止到12.15日）提到过的文章：

Turning a list into a navigation bar

How To Clear Floats Without Structural Markup

A CSS styled table

Generating Dynamic CSS with PHP

A CSS Framework

Avoiding classitis

Architecting CSS

Creating a Star Rater using CSS

Introducing the CSS3 Multi-Column Module

In search of the One True Layout

One clean HTML markup, many layouts

PHP + CSS Dynamic Text Replacement (P+C DTR)

Dynamic Resolution Dependent Layouts

Playing nice with the other CSS kids

10 tips to a better form

simple accessible "more" links, v2

CSS Technique: Worn Type

我从25日起,会每周从中选一篇文章,把它翻译出来,放在这个 BLOG 上的.

大家心目中的 Top N CSS 文章是什么?不妨说出来，与大家分享一下。

BTW，Andy Budd 的新书《 CSS Mastery 》明年2月份就要出版了，看它 back cover 上的介绍还是蛮吸引人的。

Meryl 前几天提到了 i.e., etc., 和 e.g. 的用法和区别，说实话，我以前对它们分的也不是很清，这回才算是真正搞明白了：

i.e. 是拉丁文 id est 的缩写，它的意思就是“那就是说，换句话说”，等同于“that is，in other words” ，目的是用来进一步解释前面所说的观点。

e.g. 是拉丁文 exempli gratia 的缩写，它的意思是“举个例子，比如”，等同与“for example”,目的就是用几个例子来说明前面的观点。

etc.就比较好理解了，它是 etcetera 的缩写，意思是“等等”，相当于“and so on”

e.g. 和 etc. 不能出现在同一句话中，因为 e.g. 是表示泛泛的举几个例子，并没有囊括所有的实例，其中就已经包含“等等”，如果再加一个 etc. 就画蛇添足了，例如下面这句话就是错的：

Writing instructors focus on a number of complex skills that require extensive practice (e.g., organization, clear expression, logical thinking, etc.)

注意，用它们的时候，不要把“小点”给落了~

BTW，Common Errors in English 是一个很好的学习英语的资源。