本例代码下载：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">
<font face=webdings color=#ff8c00>8</font><b> 请填入雇员信息</b>
</td>
</tr>
其中,通过colspan的设置让标题横跨多列,达成一个整体性效果.另外,为了和边框拉开一定举例,在标题文字前加入一个空格( ),最后,通过一定的字体设置,在标题前加上了一个右箭头的效果,这样比嵌入一个图片的方案要简单快捷些.具体效果如下:
在标题和字段间留出一个空行(反馈信息行)
留出空行是以如下代码实现的.
<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> (必填)</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);
这样,出现的乱码就没有了