项目经验谈之三——通过操作提交按钮可见性提升用户体验

   在网站的设计中,增强用户体验是一个永恒的追求。《锦绣蓝图:怎样规划令人流连忘返的网站》一书作者提出了一个至关重要的问题:“哪里要留出窗户?”今天,我就要带大家去探求这一问题的一种“Visibility解答”。

   在项目经验谈一、二中,我们都在讨论表单的问题,今天依然如此。

   既然是表单提交,那么必然会有一个提交按钮。无论你是用函数实现,还是直接赋予submit属性,提交按钮是一个表单中必不可少的部分。那么今天我们就要通过它的可见性,来控制那扇“窗户”的打开与关闭。

   一个表单(尤其是用户注册时),往往会设计许多的验证函数,那么我们就让提交按钮在验证不通过时“消失”。

   首先,我们设计一个注册页面,表单中含有用户名和密码的输入框,在它们下部有两个按钮,一个是“检查信息”,一个叫做“提交”,body部分代码如下:

 

   然后,我们在head部分写入我们的script函数:

这样,我们就完成了提交按钮的呈现和隐藏。

   下面简述一下页面的工作原理。

   注意到我们在body标签中写入了onload="hideSubmit()"也就是说,当页面载入完成时,会调用hideSubmit()函数,使“提交”按钮隐藏。其中的style.visibility其实是一种CSS属性,我们的隐藏是通过动态调整CSS属性来实现的。函数check_name()和check_password()是验证表单内容的模块,其中的正则表达式大家可以自行学习。当我们点击“检查信息”按钮时,如果表单内容通过验证,那么会使“提交”按钮呈现。

   叙述完这些,我们还要追究一下细节问题。

   问题一:如果我的表单内容通过了验证,而后点击“检查信息”使“提交”按钮呈现,那么我再回去修改我的表单内容到不合法时,这时提交按钮依然是可见的,这种问题如何解决?

   解决方案:细心地读者会注意到,input标签中,我们加入了onfocus="hideSubmit()" 属性,也就是说,当我重新修改我的表单内容时,提交按钮又会隐藏起来。

  问题二:我听说直接敲击回车会自动提交表单,是这样吗,如何解决这个问题?

  解决方案:如果表单中含有一个(且仅有一个)type为submit的按钮,答案是肯定的。我们可以通过设置type为button,然后添加onclick()函数来实现表单的提交,这样就可以避免回车提交的问题。

  详细解决方案可以查看我的博文:项目经验谈之一——淘气的submit()

  地址:http://blog.csdn.net/bethebest/archive/2010/02/17/5310552.aspx

  问题三:如果浏览器运行不正常,或者浏览器不兼容,会不会造成“提交”按钮的隐藏失效,那样岂不会使“不干净”表单内容的提交呢?

  解决方案:这种情况是有的,如果onload()函数无法运行,那么可能造成“不干净”表单内容的提交。为了避免这种情况的发生,我们需要将表单的action属性也隐藏起来。

  具体方法可以查看我的博文:项目经验谈之二——隐藏表单action地址增强安全性

  地址:http://blog.csdn.net/bethebest/archive/2010/02/17/5310550.aspx

  结合这三种特技,我们就能设计出用户体验良好的、健壮的表单了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值