用DHTML整饰Form中的必填和非必填字段项

原创 2004年07月10日 02:09:00

小说明:

这篇译文的英文题目是Trimming Form fields,上面的中文译题可能不是很贴切。

 

序:

web开发中Form经常被用来收集用户的一些信息,由用户在Form中输入一些基本的必填信息,当然包括你可以填写或可以不填写的非必填信息。

许多web商务站点的Form中通常会包含许多冗长和繁杂的各种字段项(与特定信息相关的文本框,下拉选择菜单,单选、多选按钮等HTML标记元素),由用户来填写或选择,一个不愿看到的事实是:这将严重影响电子商务的销售量- 大多数用户不会填写这些杂乱无章的字段项,而选择离开。

如果由用户来控制显示或隐藏那些非必填的字段项,将是一个非常好的主意!

怎么做?非常简单 仅用少量的JavascriptDOMCSS就能轻松完成。

 

n         HTML标记

首先,我们设置一个基本的FormHTML代码如下,在Form中包含了fieldsetslegendslabels及一些HTML标记。

你将注意到每个字段项元素的后面都添加了<br/>标记,这里纯粹是为了页面布局,如果你不考虑布局效果可以把它删除。

 

n         绑定非必填字段项

需要被绑定的非必填字段项以及相关的label被放入div标记块中,并设置divclass属性名为“fm-optional”,代码如下:

现在,我们添加一个空段落放在Form上面,过一会它将成为显示/隐藏非必填字段项的一个开关:

n         FormCSS设定

下面的CSS设定将适用于所有必填字段项。(所有字段都被指定为必填,除非另外设定-见后文)

其中,inputselect的外边线颜色被设为红色。

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标记的样式:

if(tmp[i].className == 'fm-optional') { tmp[i].style.display = (tmp[i].style.display == 'none') ? 'block' : 'none'; }

 

n         小结

瞧!一个非常易于使用和理解(它甚至在JAWS上工作得非常好)的Form就做好了,用户只需要开关显示/隐藏非必填的字段,能够很快地在线处理那些必需填写的字段项。

下面是已经完成的一个示例: http://blog.csdn.net/yjgx007/archive/2004/07/10/38273.aspx

下载示例中的css和js代码

菜鸟的jquery学习记录 (一) 对form输入框的必填校验

跟着项目做了一个小功能,自己不会js和jque
  • superzsen
  • superzsen
  • 2014年06月06日 14:19
  • 5851

Oracle EBS中设置项目字段必填

EBS设置字段必填在EBS实施过程中,有时候需要一些栏位必填,这里介绍设置过程。以销售人员为例。1、打开销售人员所在的窗口。2、在菜单上选择帮助->诊断->检查。记住字段的值。3、在菜单上选择帮助->...
  • u012025054
  • u012025054
  • 2016年04月22日 11:12
  • 5074

jquery-easyui必填项隐藏问题的处理方案

使用jquery-easyui制作用户界面,必填项很简单,只需要一个简单的属性data-options="required:true" 就可以把一个输入变成必输项。 但实际问题却是,在某些情况下,即使...
  • waterdemo
  • waterdemo
  • 2015年03月19日 13:39
  • 1579

HTML5必填项信息验证

在窗体上提交输入的验证需要花费大量的时间来构建Web表单。当涉及到填写Web表单上的信息时,即使是最熟悉Web的用户也可以并且都会犯错。当用户点击页面上的提交按钮时,可能会导致不完整或不准确的数据被提...
  • gannanhu
  • gannanhu
  • 2015年10月09日 10:46
  • 4861

ExtJS4为form表单必填项添加红色*标识

转自:http://blog.sina.com.cn/s/blog_8843dc110101ed32.html 通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状...
  • zhang_Red
  • zhang_Red
  • 2014年07月08日 18:38
  • 4692

AngularJs必填、比较、格式验证

界面:
  • qq_31971935
  • qq_31971935
  • 2016年09月18日 15:41
  • 1933

bootstrap风格的html5表单验证示例

看图看效果: demo下载地址:http://download.csdn.net/detail/sweetsuzyhyf/5264197 不想下的就copy吧: ...
  • sweetsuzyhyf
  • sweetsuzyhyf
  • 2013年04月16日 15:13
  • 68469

控制表单内容字段必填项的一种设计思路

业务场景:近日在实施一项目 1、差旅费用报销允许代报,就需要 表单上的报销人可以选择,申请人固定 2、关键业务人员提出 差旅费用报销必须关联 对应差旅申请流程 3、总经理秘书提出 当 报销人为 ...
  • JohnLongYuan
  • JohnLongYuan
  • 2016年03月23日 00:28
  • 816

SAP SD 销售凭证如何设置字段必填

在实际业务中,我们经常遇到需要设置某些字段是必输的。那么在SAP中创建销售订单时如何控制必填字段呢?请看操作手册 第一步:设置屏幕增强 T-CODE:shd0 上截图 ...
  • zhongguomao
  • zhongguomao
  • 2016年09月19日 16:54
  • 1304

当日期有默认值时,My97 DatePicker日期控件实现日期文本输入框必填而无需验证控件支持

在开发的时候发现的小细节,之前用validform验证日期输入框必填,后来发现满足以下条件可实现必填了,条件如下: 1、打开页面时日期有默认值。 my97 datepicker里没有找到默认值显示...
  • eagle_88
  • eagle_88
  • 2015年05月29日 10:05
  • 3688
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用DHTML整饰Form中的必填和非必填字段项
举报原因:
原因补充:

(最多只允许输入30个字)