在 web 开发时 , 表单作为用户交互的主题是不可缺少的部分,而这部分我认为又是设计影响最少的部分,工程般得构造一个通用模版 是很方便也是很实用的。而难点恰恰在于 如何在符合现代web标准下实现一个功能完备,代码简洁,结构表现行为分离,富含语义,具备可访问性的表单。
演示页面: 这里
效果图:
1.2
1.5
2.4(结合TipLite)
当css javascript 禁用
效果表单的实现要点:
1.表单的分块管理,对于一个复杂的表单进行区域划分
2.表单域提示标签和输入标签的整洁对齐
3.出错提醒文字的排版与检查
4.如何用xhtml语义标签,css,javascript 将上面的描述分离实现
5.当用户端 css javascript 禁用时 是否具备可访问性
6.加入悬停提示,用户点击后消失,实现为绝对定位的label覆盖在 输入框上
我这里采用了简化的提示标签生成,更好的符合渐进增强理念应该是 提示标签事先现在html中,在其后的javascript中将其隐藏并绝对定位到input上面。
7.当提交失败,用信息层遮罩提交按钮一会再渐隐消失。
以下 将各个要点的关键实现简要描述:
1.区域划分
在form中 用 标签 fieldset 花费出 各个 子表单。
2.表单域布局
将每一组表单域提示标签和输入标签,出错提醒文字看做一个整体块,在该块内对三者布局。
xhtml:
<fieldset>
<legend><span>公司登陆信息</span></legend>
<div class="fields">
<p>
<label class='input_label' for="employerId">用户名 :<em class='required'>(必填)</em></label> <input type="text" class='input_margin' name="employerId" id="employerId" /><span class='feedback'>用户名无效</span>
</p>
<p>
<label class='input_label' for="loginPassword">密码 :<em class='required'>(必填)</em></label> <input class='input_margin' name="loginPassword" id="loginPassword" type='password' /><span class='feedback'>密码无效</span>
</p>
<p>
<label class='input_label' for="loginPassword2">确认密码 :<em class='required'>(必填)</em></label> <input class='input_margin' name="loginPassword2" id="loginPassword2" type='password' /><span class='feedback'>确认密码不相等</span>
</p>
</div>
</fieldset>
css:
form p {
margin:5px;
}
.input_margin {
background-color:#FFFFFF;
border:1px solid #B9B9B9;
width:250px;
}
/*表单域文字标签向左对齐,并占据相同的宽度(根据用户端字体大小)*/
.input_label {
float:left;
width:12em;
color:#6E6E6E;
font-size:12px;
}
/*对于 高级浏览器提供选中高亮*/
input:focus,textarea:focus {
background:#ffc;
}
input[type="text"],textarea {
border-top:2px solid #999;
border-left:2px solid #999;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
/*出错提醒紧跟表单输入域后,并设置一定间隔,初始隐藏*/
.feedback {
visibility:hidden;
font-weight:bold;
color:red;
padding-left:30px;
width:10em;
}
/*必选按钮着中显示*/
.required {
font-size:0.85em;
color:#760000;
}
3.javascript 粘合剂
js 对 css 和 xhtml 增加交互验证功能,目前演示单单验证非空,进一步可以自定义规则验证,规则可以是正则表达式等。提前配置即可。
当用户离开一个表单域或者提交表单时,需要进行必要的验证。
4.Form 2.0 封装模块Ext.ux.FormLite , 代码使用:
//所有需要验证的表单域 //fieldId:表单域id //regs:每个表单域必须符合的规则集合 //validator 验证函数,返回出错值 //tip : 空文本框时一点提示悬挂 var checkFields= [ {fieldId:'employerDesc',tip:'一点悬浮提醒,没有填写时出现'}, {fieldId:'employerName',regs:[{reg:/.+/,info:'必填哦'},{reg:/[^\d]+/,info:'不能有数字哦'}]}, {fieldId:'employerRegion2',regs:[{reg:/.+/,info:'必填哦'}]}, {fieldId:'contactName',regs:[{reg:/.+/,info:'必填哦'}]}, {fieldId:'contactPhone',regs:[{reg:/.+/,info:'必填哦'}]}, {fieldId:'contactEmail',regs:[{reg:/.+/,info:'必填哦'}]}, {fieldId:'employerId',regs:[{reg:/.+/,info:'必填哦'}]}, {fieldId:'loginPassword',regs:[{reg:/.+/,info:'必填哦'}]}, {fieldId:'loginPassword2',validator:function(){ return this.dom.value!= Ext.get('loginPassword').getValue() ?'密码不一致':''; } } ]; var formValidator = new Ext.ux.FormLite( { //所需验证的表单id formId:'compnay_register_form', //现在为 tip 报错,默认为side ,旁边错误信息显示 //msgType:'tip', //所有需要检测的表单字段配置 checkFields:checkFields } ); //当验证失败时,触发invalid,参数 失败的表单字段 formValidator.on('invalid',function(errorFields) { for(var i=0;i<errorFields.length;i++) { //alert('出错表单 id :'+errorFields[i].id); } });
/* Form 1.2(200904221754) 加入对不同规则显示不同的出错串,优化出错视觉提醒 Form 1.5(200905062249) 加入输入框悬停提示,没有填写时出现,必须有定位的div父元素包含 Form 2.0(200905121707) 封装模块 Ext.ux.FormLite ,增加配置项 Form 2.2(200905191625) 加入验证失败覆盖层遮盖提交按钮,修改tip提醒设置方法 Form 2.3(200906021755) 错误提示修正,表单状态查询,validField增加 Form 2.4(20090803) 增加msgType 配置,结合TipLite 实现错误信息 tip显示 Form 2.4.5(20090930) 示例代码整理,使用 fieldset 分块 */