表单的设计浅谈

来源：百度文库编辑：神马文学网时间：2024/04/29 16:47:05

本例代码下载：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控制的单元格不会串行.
表单设计效果

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

8 请填入雇员信息

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

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

String msg=(String)request.getAttribute("msg");

if(msg!=null){

out.print(msg);

}

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

姓名

name="name"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

(必填)

姓名必须输入两到四位汉字

由于在反馈信息行中已经设置了第一列的宽度为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);
这样,出现的乱码就没有了

表单的设计浅谈网页设计之表单的美化社区登录表单的情感化设计网页设计之表单的美化表单设计参考浅议Web 表单设计 web表单设计 Web注册表单设计样式的研究（第一部分） Web注册表单设计样式的研究（第二部分）谈谈网页中的表单设计 | 互联网的那点事浅谈交互设计的方法浅谈期货交易系统的设计第八章表单设计1 VFP 主程序设计表单窗口浅谈摄影构图的巧妙设计浅谈Firefox与Chrome的设计理念浅谈制度的合理设计与严格执行浅谈制度的合理设计与严格执行浅谈机械产品的造型设计浅谈网络课程的页面设计浅谈公司形象网站的设计流程浅谈网络课程的设计与开发浅谈交易系统设计的原则与流程浅谈初中英语作业的优化设计