春风博客

春天里,百花香...

导航

<2008年9月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

表单的设计浅谈

本例代码下载:http://www.blogjava.net/Files/sitinspring/FormSample20080919161801.zip

表单的重要性

表单是Web应用中一个重要的组成部分,用户向服务器端提交数据主要依靠表单进行. 好的表单能帮助用户顺利的完成数据的填写, 不好的表单会让用户对填写过程充满困惑和挫折感.这些都会影响客户的心理,进而会影响客户对整个网站的感觉.
我觉得,前台的表单设计和后台的业务组件都很重要,和程序设计一样,表单的设计也要遵照一定的原则和规范.
设计一个良好的表单,需要程序员综合运用HTML,CSS,JavaScript等方面的知识,下面就是本人一些关于表单设计的粗浅想法,斗胆拿出来和大家一起探讨探讨.

表单的基本设计要点
1.表单比较适合使用table来完成.
2.表单应该以醒目的标题告诉用户它的用途.
3.从服务器端返回的反馈信息可以放在标题和字段间的一行,这样还可以使表单显得不拥挤.
4.表单的字段应该比标题缩进一个层次,这样有一定的主次感.
5.每个可填写字段应该包含字段说明,是否必填项说明和出错说明三个辅助说明项目.
6.如果用户出现填写错误后,应该能立即找到出错的地方.
7.当前正在填写的字段及其所在的单元格应该凸显出来,让用户能迅速了解当前所在区域.

使用table来完成表单

虽然也可以其它html元素如legend,fieldset等来完成一个表单,但我觉得,最适合制作表单的莫过与table.理由如下:
1.table相对容易掌握,给表格设定简单的文字,图片和样式就能出现不错的视觉效果.
2.使用空白列或是两层table嵌套很容易完成层次效果.
3.很容易调整列宽和列高.
4.在调整浏览器宽度时,Table控制的单元格不会串行.


表单设计效果


表单的标题
表单标题是通过以下代码实现的.

<tr height="30">
        
<td colspan="4" bgcolor="#d6e0ef">
        
&nbsp;<font face=webdings color=#ff8c00>8</font><b>&nbsp;请填入雇员信息</b>
        
</td>
</tr>


其中,通过colspan的设置让标题横跨多列,达成一个整体性效果.另外,为了和边框拉开一定举例,在标题文字前加入一个空格(&nbsp;),最后,通过一定的字体设置,在标题前加上了一个右箭头的效果,这样比嵌入一个图片的方案要简单快捷些.具体效果如下:



在标题和字段间留出一个空行(反馈信息行)
留出空行是以如下代码实现的.

<tr height="20">
  
<td bgcolor="#f7f7f7" width="200" align="right"></td> 
  
<td bgcolor="#f7f7f7" align="left">
    
<div id="msg">
    
<%
      
String msg=(String)request.getAttribute("msg");
      
if(msg!=null){
        out.print(msg);
      }
    
%>
    
</div>            
  
</td> 
</tr>


此行高度比标题行和字段行略窄,以免喧宾夺主.width=200用来控制左边空白列的宽度,由于表格的特殊性,以下的左边空白列都将和它保持一致,这样修改起来就很方便了.右边一列用于存放反馈信息,当request中名为msg的文本变量时将会显示出来,另外反馈信息放入了一个div中,这样通过js改写反馈信息也可以很方便的进行.你还可以设置字体等加强一下反馈效果.
如果有隐藏字段的话可以把它放在div的外面.

放置字段

以下是放置一个姓名字段的代码:

<tr height="40" >
  
<td bgcolor="#f7f7f7" align="right">姓名</td> 
  
<td bgcolor='#f7f7f7' onmouseover="this.style.backgroundColor='#eff3ff'" onmouseout="this.style.backgroundColor='#f7f7f7'" >
        
<input type="text" 
               name
="name" 
               onfocus
="this.style.backgroundColor='#e6e6e6'" 
               onblur
="this.style.backgroundColor='#ffffff'"/>
        
<font color=red>&nbsp;(必填)</font>
        
<span id="nameMsg" class="feedbackHide">姓名必须输入两到四位汉字</span>
      
</td>
</tr>


由于在反馈信息行中已经设置了第一列的宽度为200,这里就不用再设置了;第二列中依次放置的是字段,是否必填的说明和填写出错说明,这样做它们能紧凑的放在一起.必填说明以红色显示,填写出错说明先按样式指定它为不显示,出错后用js修改为feedbackshow即能显示出来.
另外,指定了字段所在单元格的鼠标掠过效果.也指定了字段的焦点进入和焦点离开效果,这样的醒目提示能让用户快速了解当前所在区域.

字段的验证

字段的验证是Web开发中常见环节,这里我把字段的验证和反馈都归纳了出来,要进行验证只需把验证数组写好就行了,如果出现错误,出错说明文字会显示出来.在验证元素较多时优势很明显,能大大加快开发速度.
验证的使用具体使用请见
Web页面表单域验证方式在Struts1.3.8中的使用
通用化Web表单验证方式的改进方案
表单验证方式的通用化

等文,这里不再赘述.验证效果可参考下图:


获取验证的字段

如果在Servlet中取得验证字段的文本信息可能出现乱码,这时进行转码即可,可以参考下列函数:

public static String getFormParam(String paramName,HttpServletRequest request){
  
try{
    
    
return new String(request.getParameter(paramName).getBytes("ISO-8859-1"),"UTF-8");
  }

  
catch(Exception ex){
    
return null;
  }

}

 

取值可以这样做:

String name=ReqUtil.getFormParam("name",request);


这样,出现的乱码就没有了

 

posted on 2008-09-16 14:49 sitinspring 阅读(1966) 评论(5)  编辑  收藏 所属分类: Web开发

评论

# re: 表单的设计浅谈 2008-09-17 10:24 HUNK

的确对程序员来说,table是是容易控制的方式,最近也在学习div+css,个人感觉程序员,应该要懂一些这些东西,不然,没有美工,我们怎么办  回复  更多评论   

# re: 表单的设计浅谈 2008-09-17 10:37 sitinspring

@HUNK

是啊,程序员多懂一些对自己很有益的,而且艺多不压身。
另外html,css,js也很有意思,不比java差,学好了对学习ext等也有不少益处。
  回复  更多评论   

# re: 表单的设计浅谈 2008-09-17 23:56 zbh

偶对这些东西,极度不感兴趣!!
但是有时间还是去学一下!!  回复  更多评论   

# re: 表单的设计浅谈 2008-09-28 10:53 sclsch

程序员也要学一点美工,有些公司美工很难请的。  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.