小说明：
这篇译文的英文题目是Trimming Form fields，上面的中文译题可能不是很贴切。
序：
在web开发中Form经常被用来收集用户的一些信息，由用户在Form中输入一些基本的必填信息，当然包括你可以填写或可以不填写的非必填信息。
许多web商务站点的Form中通常会包含许多冗长和繁杂的各种字段项（与特定信息相关的文本框，下拉选择菜单，单选、多选按钮等HTML标记元素），由用户来填写或选择，一个不愿看到的事实是：这将严重影响电子商务的销售量－ 大多数用户不会填写这些杂乱无章的字段项，而选择离开。
如果由用户来控制显示或隐藏那些非必填的字段项，将是一个非常好的主意！
怎么做？非常简单 － 仅用少量的Javascript、DOM和CSS就能轻松完成。
n HTML标记
首先，我们设置一个基本的Form，HTML代码如下，在Form中包含了fieldsets，legends和labels及一些HTML标记。
你将注意到每个字段项元素的后面都添加了<br/>标记，这里纯粹是为了页面布局，如果你不考虑布局效果可以把它删除。
n 绑定非必填字段项
需要被绑定的非必填字段项以及相关的label被放入div标记块中，并设置div的class属性名为“fm-optional”，代码如下：
现在，我们添加一个空段落放在Form上面，过一会它将成为显示／隐藏非必填字段项的一个开关：
n Form中CSS设定
下面的CSS设定将适用于所有必填字段项。（所有字段都被指定为必填，除非另外设定－见后文）
其中，input和select的外边线颜色被设为红色。
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;
}
为了进一步告知用户哪些是必填的字段项，在CSS中为label标记添加一个before伪类，它不适用于IE，见下面的代码：
fieldset div label:before {
content: "* "; // 在label前加一个*号，表示是必填字段项
}
现在，我们设置非必选字段项的样式（还记得前面有关非必填字段项的设置吗？div的class属性值是fm-optional，且这个div中包含的是非必填字段项。），这里input的外边线表现为灰色：
fieldset div.fm-optional {
display : block; /* 默认显示非必填字段项 */
}
fieldset div.fm-optional label:before {
content: ""; /* 移除label前的*号 */
}
.fm-optional input {
border : 1px solid #ccc; }
Form中所有样式设毕，当然，上面只是样式的一种方案，你可以自定义更贴切自已需要的。
n 添加事件
还记得吗？在开始时我们在Form上放置了一个id属性值为linkContainer的空段落。现在，我们要写一点Javascript并结合DOM对这个段落标记作一些操作，当html页面加载时，段落标记中生成一个超链接文本：
toggle.appendChild(document.createTextNode('要隐藏非必填字段项吗?'));
然后，当用户点击这个超链接文本后，会有一些文字上的变化：
this.firstChild.nodeValue = (linkText == '要隐藏非必填字段项吗?') ?'要显示非必填字段项吗?' : '要隐藏非必填字段项吗?';
最后，还要设置所有class属性值为fm-optional标记的样式：
n 小结
瞧！一个非常易于使用和理解（它甚至在JAWS上工作得非常好）的Form就做好了，用户只需要开关显示／隐藏非必填的字段，能够很快地在线处理那些必需填写的字段项。
下面是已经完成的一个示例：
扫一扫
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
