申请表单

直接使用代码

图片素材

css代码

<style>
.com-top-arctype {padding:30px ;text-align:center;color:#6ac3ba}
.com-top-arctype h1{font-size:50px;font-weight:500;font-family: Arial, Helvetica, sans-serif}
.com-top-arctype h4{font-size:20px;font-weight:bold;background:url(/img/2021/0414/bg_arctype.png) no-repeat center top;height:60px; }

.org_add .arctype-title{text-align:center;line-height:120px;}
.org_add .description{text-indent: 2em;color:#555;line-height:30px;font-size:18px;}
.org_add .text-tiaojian{text-align:center;font-size:18px;}
.org_add .form-body{background:#fafafa;border-radius: 6px;padding:120px 120px;margin:100px 0}
.org_add .form-body .form-item{margin:20px 0;clear:both;font-size:18px;}
.org_add .form-body input[type=text]{width:600px;height:35px;line-height: 35px;padding-left:10px;border:1px solid #81d8cf}
.org_add .form-body .join-img{display:inline-block;margin:30px 60px;cursor:pointer;border-radius:6px;border:1px solid #81d8cf}
</style>

HTML+JS代码

  
<!--申请入会-->
<div class="container org_add">
  <div class="com-top-arctype">
      <h1>JOIN THE ASSOCIATION</h1>
      <h4>加入协会</h4>
  </div>


  <h2 class="arctype-title blue2">申请条件</h2>
  <img src="http://www.bootfastui.cn/img/2021/0414/join.png" width="100%" />
  <div class="col-md-4  text-tiaojian">
    ①正常办学
  </div>
  <div class="col-md-4  text-tiaojian">
    ②所在区域方圆3公里内办学规模前两名<br />（相同专业）
  </div>
  <div class="col-md-4  text-tiaojian">
    ③装修环境有特色的
  </div>

  <form action="/index.php/Home/Index/org_sq_save" enctype="multipart/form-data" method="POST" class="org_sq_form">
    <div class="form-body">
      <!-- 加入表单 -->

      <input type="hidden" name="pubdate" value="2021-04-14 20:35:46" />
      <div class="form-item">
        <div class="col-md-3">
          <span class="blue2 inline w130">机构名称：</span>
          <span class="red">*</span>
        </div>
        <div class="col-md-9">
          <input type="text" name="org_name" required />
        </div>
        <div class="clear"></div>
      </div>

      <div class="form-item">
        <div class="col-md-3">
          <span class="blue2  inline w130">机构地址：</span>
          <span class="red">*</span>
        </div>
        <div class="col-md-9">
          <input type="text" name="org_address" required />
        </div>
        <div class="clear"></div>
      </div>
      <div class="col-md-6">
        <div class="form-item">
          <div class="col-md-5 pm">
            <span class="blue2  inline w130"> 负责人姓名：</span>
            <span class="red">*</span>
          </div>
          <div class="col-md-7">
            <input type="text" name="org_person" required style="width:180px;margin-left:35px;" />
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-item">
          <div class="col-md-5 pm">
            <span class="blue2">负责人电话：</span>
            <span class="red">*</span>
          </div>
          <div class="col-md-7">
            <input type="text" name="org_phone" class='check-tel' required style="width:160px;margin-left:15px;" />
          </div>
          <div class="clear"></div>
        </div>
      </div>

      <div class="form-item">
        <div class="col-md-3">
          <span class="blue2  inline w130">开设专业：</span>
          <span class="red">*</span>
        </div>
        <div class="col-md-9">

          <input type="checkbox" value="声乐" name="zhuanye[]"> 声乐&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="美术" name="zhuanye[]"> 美术&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="舞蹈" name="zhuanye[]"> 舞蹈&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="器乐" name="zhuanye[]"> 器乐&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="书法" name="zhuanye[]"> 书法&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="语言" name="zhuanye[]"> 语言&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="模特" name="zhuanye[]"> 模特&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="空乘" name="zhuanye[]"> 空乘&nbsp;&nbsp;&nbsp;<br />

          <input type="checkbox" value="表演" name="zhuanye[]"> 表演&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="编导" name="zhuanye[]"> 编导&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="播音" name="zhuanye[]"> 播音&nbsp;&nbsp;&nbsp;

          <input type="checkbox" value="戏曲" name="zhuanye[]"> 戏曲&nbsp;&nbsp;&nbsp;
        </div>
        <div class="clear"></div>
      </div>






      <!-- 上传图片组 -->
      <img src="http://www.bootfastui.cn/img/2021/0414/join1.jpg" class="join-img" onClick="getIframeValue(iframe='frame1')" id="litpic11"
        width="300" height="194" />
      <input name="litpic1" type="hidden" id="litpic1" />
      <iframe src="/index.php/Home/Index/imageUpload/action/litpic1" name="frame1" id="frame1" width="0" height="0"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display:none"></iframe>

      <img src="http://www.bootfastui.cn/img/2021/0414/join2.jpg" class="join-img" onClick="getIframeValue(iframe='frame2')" id="litpic21"
        width="300" height="194" />
      <input name="litpic2" type="hidden" id="litpic2" />
      <iframe src="/index.php/Home/Index/imageUpload/action/litpic2" name="frame2" id="frame2" width="0" height="0"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display:none"></iframe>

      <img src="http://www.bootfastui.cn/img/2021/0414/join3.jpg" class="join-img" onClick="getIframeValue(iframe='frame3')" id="litpic31"
        width="300" height="194" />
      <input name="litpic3" type="hidden" id="litpic3" />
      <iframe src="/index.php/Home/Index/imageUpload/action/litpic3" name="frame3" id="frame3" width="0" height="0"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display:none"></iframe>

      <img src="http://www.bootfastui.cn/img/2021/0414/join4.jpg" class="join-img" onClick="getIframeValue(iframe='frame4')" id="litpic41"
        width="300" height="194" />
      <input name="litpic4" type="hidden" id="litpic4" />
      <iframe src="/index.php/Home/Index/imageUpload/action/litpic4" name="frame4" id="frame4" width="0" height="0"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="display:none"></iframe>
      <div class="text-center">【 图片说明：jpg，png格式，大小5M以下 】</div>
      <img src="http://www.bootfastui.cn/img/2021/0414/tijiao.png" width="300" class="center-block mar-top50 tijiao" />


    </div>
  </form>
  <script>
    $(function () {
      $('.tijiao').click(function () {

        $val = $('.check-tel').val();
        isMobile($val)

      })
    })

    //验证手机号码是否正确
    function isMobile(s) {
      var patrn = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!patrn.exec(s)) {
        alert('手机号码格式错误');
        return false;
      } else {
        $('form').submit();
      }

    }
  </script>
  

</div>