Apply Online

直接使用代码

图片素材

css代码

 <style>
/*online 表单 内容*/
#from210525 {margin:0 auto; padding:0;}
#from210525  h2 { margin:0 auto; padding:0; text-align:center; font-size:40px; font-weight:400; margin-bottom:10px;}
#from210525 form { margin-top:20px; font-size:16px;}
#from210525 form .hang { margin-top:8px;}
#from210525 form .hang .kuang { width:300px; line-height:30px; border-radius:5px; border:1px solid #ccc; padding-left:10px}
#from210525 form .hang .zi { text-align:right; padding-right:30px;}
#from210525 form .hang select { width:100px; height:25px;}
#from210525 form .hang span { color:#F00; }
#from210525 form .hang span.zhu { font-size:14px;}
#from210525 form  .sub { width:150px; line-height:35px;   margin-top:20px; color:#fff; background-color:#096; border:none; border-radius:4px; }
#from210525 form  .sub:hover{ background:#063; cursor:pointer}
</style>

HTML+JS代码

 
<!--内容-->
<div id="from210525" class="container">
  <h1 class="com-h1 text-center">Apply Online </h1>
  <form name="" method="post" action="/index.php/Home/Index/saveMessage" enctype="multipart/form-data">
    <div class="row  hang">
      <div class="col-md-5">
        <div class="zi">Given Name:</div>
      </div>
      <div class="col-md-7"><input type="text" name="username" class="kuang" required />&nbsp;&nbsp;<span>*</span></div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang">
      <div class="col-md-5 ">
        <div class="zi">Family Name:</div>
      </div>
      <div class="col-md-7"><input type="text" name="family" class="kuang" /></div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang">
      <div class="col-md-5">
        <div class="zi">Date of Birth:</div>
      </div>
      <div class="col-md-7">
        <input name="shengri" class="kuang" onfocus="showCalendarControl(this);" />

        &nbsp;&nbsp;<span>*</span>
      </div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang">
      <div class="col-md-5 ">
        <div class="zi">Gender:</div>
      </div>
      <div class=" col-md-7">
        <input type="radio" value="male" name="Gender" required />Male &nbsp;&nbsp; &nbsp;&nbsp;
        <input type="radio" value="female" name="Gender" required />Female
        &nbsp;&nbsp;<span>*</span>
      </div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang ">
      <div class="col-md-5 ">
        <div class="zi">Country:</div>
      </div>
      <div class="col-md-7"> <input type="text" name="Country" required class="kuang" />&nbsp;&nbsp;<span>*</span></div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang  ">
      <div class="col-md-5 ">
        <div class="zi">English Proficiency:</div>
      </div>
      <div class="col-md-7">
        <input type="radio" value="fluent" name="level" />Fluent
        <input type="radio" value="medium" name="level" />Medium
        <input type="radio" value="beginner" name="level" />Beginner
        &nbsp;&nbsp;<span>*</span>
      </div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang">
      <div class="col-md-5 ">
        <div class="zi">Interested Program(s):</div>
      </div>
      <div class="col-md-7">
        <input type="checkbox" value="Volunteer in Australia" name="program" />Volunteer in Australia<br />
        <input type="checkbox" value="Study Tours Australia" name="program" />Study Tours Australia<br />
        <input type="checkbox" value="Hospitality Internship" name="program" />Hospitality Internship<br />
        <input type="checkbox" value="Work and Holiday & Working Holiday" name="program" />Work and Holiday & Working
        Holiday<br />
        <input type="checkbox" value="Teach Abroad&TESOL Training" name="program" />Teach Abroad&TESOL Training<br />
        <input type="checkbox" value="Education & Culture Exchange" name="program" />Education & Culture Exchange<Br />
        <input type="checkbox" value="Australian National Curriculum" name="program" />Australian National
        Curriculum<Br />

        &nbsp;&nbsp;<span class="zhu">(Multiple choices)</span>
      </div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang">
      <div class="col-md-5 ">
        <div class="zi">Email:</div>
      </div>
      <div class="col-md-7"><input type="text" name="email" required class="kuang" />&nbsp;&nbsp;<span>*</span></div>
    </div>
    <!--row end-->
    <div class="clear"></div>
    <div class="row  hang">
      <div class="col-md-5 ">
        <div class="zi">Contact No.:</div>
      </div>
      <div class="col-md-7"><input type="text" name="tel" required class="kuang" />&nbsp;&nbsp;<span>*</span></div>
    </div>
    <!--row end-->

    <div class="row  hang">
      <div class="col-md-5 ">
        <div class="zi">&nbsp;</div>
      </div>
      <div class="col-md-7">
        <div class="an"><input type="submit" value="submit" class="sub" /></div>
      </div>
    </div>
    <!--row end-->
    <div class="clear"></div>

  </form>
</div>