PHPCMS自定义表单样式

简介: PHP自带的表单向导功能强大,但是他的样式是固定的。我们网站风格可能和PHPCMS给出的样式不搭,网上百度好多都是千篇一律的文章。下面的方法我认为是简单快捷的。

PHP自带的表单向导功能强大,但是他的样式是固定的。我们网站风格可能和PHPCMS给出的样式不搭,网上百度好多都是千篇一律的文章。下面的方法我认为是简单快捷的。

<section class="entered fix">
<div class="entered_bt fix">![](images/entered_bt1.png)</div>
  <div class="entered_cn fix">
  <form class="entered_form fix" method="post" method="#">
    <p><span>姓名:</span><input type="text" class="entered_text"/></p>
    <p><span>电话:</span><input type="text" class="entered_text"/></p>
    <p><span>学习班制:</span>
     <select class="entered_select">
       <option>=请选择学习班=</option>
       <option>=请选择学习班=</option>
       <option>=请选择学习班=</option>
       <option>=请选择学习班=</option>
     </select>
    </p>
    <em><input type="submit" class="entered_submit" value="点击提交"/></em>
  </form>
  </div>
</section>

以上是静态页源码。

下面的是修改过得

<section class="entered fix">
  <div class="entered_bt fix">![]({IMG_PATH}images/entered_bt1.png)</div>
  <div class="entered_cn fix">
    <form  action="{APP_PATH}index.php?m=formguide&c=index&a=show&formid=20&siteid={$siteid}" 
  class="entered_form fix" method="post" name="liuyan">
    <p><span>姓名:</span><input type="text" class="entered_text" name="info[name]"/></p>
    <p><span>电话:</span><input type="text" class="entered_text" name="info[mobile]"/></p>
    <p><span>学习班制:</span>
     <select class="entered_select" name="info[class]">
      <option value="">=请选择学习班=</option>
       <option value="1">初级班</option>
       <option value="2">中级班</option>
       <option value="3">高级班</option>
     </select>
    </p>
    <em><input type="submit" name="dosubmit" class="entered_submit" id="tijiao" value="点击提交"/></em>
  </form>
  </div>
</section>```

##接下来是步骤:

1 按照步骤创建一个表单向导。不会的百度。创建完成应该是下图:
![按步骤设置的表单.png](http://upload-images.jianshu.io/upload_images/4424012-8b4fdda90275a952.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

可以看到有个访问前台的链接。点击就可以访问前台了,但是出来的页面什么样子无所谓,肯定不是你想要的。例如
![出来的是PHPCMS自带的样式](http://upload-images.jianshu.io/upload_images/4424012-7170ac3c9337578f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个截图表单什么样子不重要,重要的是链接地址
######/index.php?m=formguide&c=index&a=show&formid=20&siteid=1&pc_hash=gvlGlx
接下来分析一下:
index.php==>这是index.php页面
(?代表第一个参数&代表后面get传过来的参数)
>参考:http://blog.sina.com.cn/s/blog_6d3a29310100w67y.html
             https://zhidao.baidu.com/question/562353706.html


m=formguide==>走的是formguide模块
c=index==>代表index内容
a=show==>代表动作
formid=20 ==》代表表单的ID
siteid=1 ==》siteid的ID
>参考:https://zhidao.baidu.com/question/2137844385485918268.html

接下来把form标签的action路经地址改成:{APP_PATH}index.php?m=formguide&c=index&a=show&formid=20&siteid={$siteid}。

还要改的还有name的值。这些值都是自己创建表单时候的字段。
![表单.png](http://upload-images.jianshu.io/upload_images/4424012-5addc0702f677aa3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![表单字段.png](http://upload-images.jianshu.io/upload_images/4424012-e5f74a82f06c8432.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这是我的字段。贴出来仅供参考。最后还有提交按钮的name加上="dosubmit"。
到此为止,自定义表单就已经做好了。
相关文章
|
24天前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
14 4
jQuery会员中心安全修改表单特效
|
28天前
|
前端开发
当当网新用户注册界面——CSS代码
当当网新用户注册界面——CSS代码
9 0
|
1月前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
4月前
|
小程序 JavaScript 容器
【微信小程序】WXML的模板语法与WXSS模板样式(一)
【微信小程序】WXML的模板语法与WXSS模板样式
36 0
|
4月前
|
JSON 小程序 前端开发
【微信小程序】WXML的模板语法与WXSS模板样式(二)
【微信小程序】WXML的模板语法与WXSS模板样式
59 0
|
12月前
|
JavaScript
Vue 修改网页标题和图标
Vue 修改网页标题和图标
290 0
|
JavaScript 前端开发 数据安全/隐私保护
CSS实现一个『简约高级』的输入框
一个商务简约的登陆界面 前几天在逛codepen的时候,发现了一个很有意思的登陆界面,于是就想着自己实现一下,于是就有了这个demo。 顺便将接下来网站的登陆界面也改成这个样式了。
|
前端开发 容器
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(1)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
163 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(1)
|
前端开发
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(2)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
190 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(2)
|
移动开发 前端开发 信息无障碍
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(3)
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
207 0
【BootStrap】栅格系统、表单样式与按钮样式-附有源码(3)