在网站的设计中,增强用户体验是一个永恒的追求。《锦绣蓝图:怎样规划令人流连忘返的网站》一书作者提出了一个至关重要的问题:“哪里要留出窗户?”今天,我就要带大家去探求这一问题的一种“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.youkuaiyun.com/bethebest/archive/2010/02/17/5310552.aspx
问题三:如果浏览器运行不正常,或者浏览器不兼容,会不会造成“提交”按钮的隐藏失效,那样岂不会使“不干净”表单内容的提交呢?
解决方案:这种情况是有的,如果onload()函数无法运行,那么可能造成“不干净”表单内容的提交。为了避免这种情况的发生,我们需要将表单的action属性也隐藏起来。
具体方法可以查看我的博文:项目经验谈之二——隐藏表单action地址增强安全性
地址:http://blog.youkuaiyun.com/bethebest/archive/2010/02/17/5310550.aspx
结合这三种特技,我们就能设计出用户体验良好的、健壮的表单了。