今天翻到一篇 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 文件

这一到年末，网上各种总结性的文章就出来了，大家都纷纷列出各种 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 上的介绍还是蛮吸引人的。

Dan Cederholm 刚刚在 BLOG 写了一篇 Bulletproof  Logos ，主要就是写如何美化图片的 ALT，他介绍了两种方法：

１）　

<h1><img src="img/logo.gif" alt="ROLLYO" /></h1>他举的是 Rolly 的例子，正常的时候，是这个效果：

如果图片不显示的话，就是这个效果：

２）<div id="logo"><img src="img/logo.gif" alt="SimpleBits" /></div>

这个是举的 simplebits 的例子,正常时显示的是：

如果图片没有显示的话，那就变成：

瞧，真的是很巧妙，你曾想到过去美化 ALT 吗？或许这才是真正的 Web Developer 吧～