| 小说明： 这篇译文的英文题目是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的外边线颜色被设为红色。 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; }
本文关键：用DHTML整饰Form中的必填和非必填字段项
本站最佳浏览方式为 分辨率 1024x768 IE 6.0（或更高版本的 IE浏览器） 
|