小说明: 这篇译文的英文题目是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; }
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 { Form中所有样式设毕,当然,上面只是样式的一种方案,你可以自定义更贴切自已需要的。
n 添加事件 还记得吗?在开始时我们在Form上放置了一个id属性值为linkContainer的空段落。现在,我们要写一点Javascript并结合DOM对这个段落标记作一些操作,当html页面加载时,段落标记中生成一个超链接文本: toggle.appendChild(document.createTextNode('要隐藏非必填字段项吗?')); 然后,当用户点击这个超链接文本后,会有一些文字上的变化: this.firstChild.nodeValue = (linkText == '要隐藏非必填字段项吗?') ? '要显示非必填字段项吗?' : '要隐藏非必填字段项吗?'; 最后,还要设置所有class属性值为fm-optional标记的样式:
n 小结 瞧!一个非常易于使用和理解(它甚至在JAWS上工作得非常好)的Form就做好了,用户只需要开关显示/隐藏非必填的字段,能够很快地在线处理那些必需填写的字段项。 下面是已经完成的一个示例: http://blog.csdn.net/yjgx007/archive/2004/07/10/38273.aspx 下载示例中的css和js代码 |
用DHTML整饰Form中的必填和非必填字段项
最新推荐文章于 2023-12-08 10:41:17 发布