机票、车票、酒店预订表单【原创】

查看演示 下载资源 下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，设置好表单的各种元素和内容，代码如下：

<h1 class="logo">畅游世界</h1>
<br>
<!-- Book Flight Button -->
<input id="flight" type="checkbox" />
<label for="flight">机票
<svg   xmlns="http://www.w3.org/2000/svg" 
       viewbox="0 0 10 10">
       <path 
       d="M4.2 7.1C2.14 9.5 4.23 9.92 6 
       7m.17-3.2C5 2.3 2.76 2.31 4.5 
       3.7m2.84.37c-1 1-.54 1.98 
       1.46.93M6 5v.6M4 5v.6m1 0V5M.8
       3v3C3.3 8 9 6.9 9 5.56 9 3.4 
       3.2 3.4 2.12 4.21 1.96 3.5 
       1.37 3 .799 2.6z"/></svg>
</label>

<!-- Book Car Button -->
<input id="car" type="checkbox" />
<label for="car">车票
<svg xmlns="http://www.w3.org/2000/svg" 
     viewbox="0 0 10 10">
     <path 
     d="M3 4h4c2 0 2 3 0 3H3C1 7 1 4 3 
        4zm0 0C2 4 2 3 3 3m4 0c1 0 1 1
        0 1m-.5 3c-.3 1.4 1.3 1.4 1 
        0m0-1.75c0-.7-1-.7-1 0s1 .7 1
        0zm-4 0c0-.7-1-.7-1 0s1 .7 1
        0zM6 6H4m2-1H4M3 4c-.75-3 
        4.75-3 4 0M2.5 7c-.3 1.4 
        1.3 1.4 1 0"/>
  </svg>
</label>

<!-- Book Hotel Button -->
<input id="hotel" type="checkbox" />
<label for="hotel">酒店
<svg 
     xmlns="http://www.w3.org/2000/svg" 
     viewbox="0 0 10 10">
     <path 
     d="M7.25 4.5c0-.7-1-.7-1 0s1 .7 1 
       0zm-1.75 0c0-.7-1-.7-1 0s1 .7 1 
       0zm-1.75 0c0-.7-1-.7-1 0s1 .7 1 
         0zm3.5-2c0-.7-1-.7-1 0s1 .7 1 
       0zm-1.75 0c0-.7-1-.7-1 0s1 .7 1 
     0zM2 9V1h6v8m1.25 
     0H1m2.75-6.5c0-.7-1-.7-1 0s1 .7 1 
        0zM6.25 9V7.5h-2.5V9M5 9V7.5"/>
  </svg>
</label>

<p class="notify">请选择您的预订选项</p>

<div class="counter select">
  <select id="from">
    <option value="上海" selected>
    上海</option>
    <option value="新加坡">
    新加坡</option>
    <option value="雅加达" >
    雅加达</option>
  <option value="吉隆坡" >
    吉隆坡</option>
    <option value="曼谷" >
    曼谷</option>
  <option value="北京" >
    北京</option>
    <option value="东京" >
    东京</option>
    <option value="香港" >
    香港</option>
    <option value="悉尼" >
    悉尼</option>
    <option value="深圳" >
    深圳</option>
    <option value="首尔" >
    首尔</option>
    <option value="台北" >
    台北</option>
 </select>
  <label> 从哪儿出发：</label>
</div>

<div class="counter select">
  <select id="to">
    <option value="上海" >
    上海</option>
    <option value="新加坡" >
    新加坡</option>
    <option value="雅加达" >
    雅加达</option>
  <option value="吉隆坡" >
    吉隆坡</option>
    <option value="曼谷" >
    曼谷</option>
  <option value="北京" >
    北京</option>
    <option value="东京" >
    东京</option>
    <option value="香港" >
    香港</option>
    <option value="悉尼" selected>
    悉尼</option>
    <option value="深圳" >
    深圳</option>
    <option value="首尔" >
    首尔</option>
    <option value="台北" >
    台北</option>
 </select>
  <label> 去哪儿玩啊：</label>
</div>

<!-- First Name Field -->

<input id="first-name" type="text" autocomplete="given-name" required />
<label for="first-name">您的姓名</label>
<span></span>

<br>

<input id="last-name" type="text" autocomplete="family-name" required>
<label for="last-name">手机号码</label>
<span></span>

<br><br>

<div class="counter date">
  <input id="date" type="date" autocomplete="todays-date" required>
  <label for="date">您的出发日期</label>
  <span></span>
</div>

<div class="counter quantity-container">
  <input id="people" type="number" max="99" min="0" step="1" class="quantity-amount" name="" value="1" maxlength="2" />
  <label for="people">人数</label>
  <button class="gdown decrease" type="button">-</button>
  <button class="gup increase" type="button ">+</button>
  <span></span>
</div>

<div class="counter quantity-container">
  <input id="days" type="number" class="quantity-amount" name="" value="5" min="0" max="365" step="1" />
  <label for="days">天数</label>
  <button class="gdown decrease" type="button">-</button>
  <button class="gup increase" type="button">+</button>
  <span></span>
</div>

<input type="submit" value="立即预订" />

页面的底部，需引入一个必要的JS文件，代码如下：

<script type="text/javascript" src="js/index.js"></script>