你的位置：HBcms宏博内容管理系统→ HBcms使用帮助→ 自定义表单→ 正文
HBcms使用帮助
  1. 如何安装
  2. 快速入门
  3. 自定义表单
内容搜索
热门内容
  1. • 美化前台表单的外观（..
  2. • 下拉菜单（单选框，多..
  3. • 输入框的式样和预设值
  4. • 基本属性的用途
  5. • 表单模型应用范例：投..
  6. • 表单模型属性含义
  7. • 后台属性的含义
  8. • 数据库字段优化
  9. • 填写规则和提示文字
  10. • 高级属性和模板缓存
推荐内容
  1. • 输入框的式样和预设值
  2. • 基本属性的用途
  3. • 表单模型应用范例：投..
  4. • 表单模型属性含义
  5. • 添加字段的时候，提示..
  6. • 数据库字段优化
  7. • 美化前台表单的外观（..
  8. • 高级属性和模板缓存
  9. • 填写规则和提示文字
  10. • 后台属性的含义
美化前台表单的外观（表单模板）
  •  添加时间：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使用帮助→ 自定义表单