美化前台表单的外观（表单模板） - 自定义表单

美化前台表单的外观（表单模板）

添加时间：2009-06-01 发表时间：2009-06-01 人气：4685
前台表单的地址是：

http://你的域名/hbcms/user/add_my_form.php?tb=表单模型变量名

默认的，本程序会自动检测您使用的模板目录里是否有 user_add_my_form_表单模型变量名.tpl.html 这个模板文件

如果有这个模板文件，那么程序就直接显示此模板文件的内容。如果这个模板文件不存在，那么程序会自动读取会员的默认模板 user_index.tpl.html

如何对自动生成的表单进行外观美化呢？比如修改颜色，修改录入框的布局和位置，增加javascript特效。

有办法！

上面我们提到前台的表单都会读取 user_add_my_form_表单模型变量名.tpl.html 这个模板文件，

所以，我们可以将默认产生的表单源代码，复制，粘贴到 user_add_my_form_表单模型变量名.tpl.html 这个模板文件里去，然后对源代码直接进行修改和美化。

实施步骤：
1. 先在后台制定好表单的所有字段，预览前台的录入表单页面看效果，直到基本满意为止
2. 查看前台的录入表单页面的源代码，将表单部分全部复制。
3. 在现有的模板目录，创建一个模板文件 user_add_my_form_表单模型变量名.tpl.html （建议将user_index.tpl.html 复制，重命名即可），将刚才复制的表单源代码粘贴到合适的位置。然后删除模板文件里的 <{$data_ary.user_panel.body}> 字符串（这是默认的表单输出）。
4. 对模板文件里的表单源代码进行修改和美化，如调整位置，布局，可以一行并列排放多个录入框、加入更多的css变量来控制外观、加入更多的javascript来控制表单验证和其他特效。
5. 完成了，预览看效果吧！
要注意的事情：
1. 对表单源代码进行美化的时候，不要修改录入框的name=变量名。
2. 通过上面步骤制作的表单模板，不能再自动根据后台的字段调整而变化了。后台的每次调整，你可能都需要对此表单模板进行手工调整。
3. 你可以先把表单源代码粘贴到dreamwaver等编辑软件里去排版，美化后，再放到模板文件里去。
4. 大致上来说，此表单模板相当于一个HTML静态页面了。所以，一定要先在后台全部设置好所有的字段后再来制作此模板文件。如果需要重新查看程序自动生成的表单源代码，请此模板改成其他的名称，这样再刷新前台表单页面就可以看到自动生成的表单源代码了。
点这里复制本页地址发送给您QQ/MSN上的好友
相关文章
- 上一篇：高级属性和模板缓存
- 下一篇：数据库字段优化
相关评论
本文章所属分类：首页→ HBcms使用帮助→ 自定义表单