预约订单开发主要分为两个部分，一是用户填写的表单，二是信息的确认页面。
用户填写表单的页面是第一个Web页面，在该Web页面上方可以放置公司的Logo或者宣传图片，相关代码实现如下。
1 <p>2 <p>3 <p >4 <ul><img src="img/logo.png" >5 </ul>6 </p>7 </p>8 <p></p>9 </p>
下方放置页面功能介绍及订单填写表单，其中页面介绍相关代码如下。
1 <ul>2 <li>3 <h2>预约口腔医生</h2>4 <p>5 长沙市XX口腔竭诚为您服务<br/>6 联系电话：0731-7654321</p>7 </li>8 </ul>
最后需要让用户填写表单，并将表单信息通过POST提交给submit.php文件。其相关代码实现如下。
1 <form method="post" action="submit.php" onsubmit="return tgSubmit"> 2 <ul> 3 <li><span>请填写以下信息</span></li> 4 <li> 5 <table border="0" cellspacing="0" cellpadding="0"> 6 <tbody> 7 <tr> 8 <th>姓名</th> 9 <td><input type="text" placeholder="请输入姓名" name="name" >10 </td>11 </tr>12 </tbody>13 </table>14 </li>15 <li>16 <table border="0" cellspacing="0" cellpadding="0">17 <tbody>18 <tr>19 <th>性别</th>20 <td><select name="sex" class= "dropdown-select"><option selected="">请选择性别</option> <option >男</option><option >女</option></select>21 </td>22 </tr>23 </tbody>24 </table>25 </li>26 <li>27 <table border="0" cellspacing="0" cellpadding="0">28 <tbody>29 <tr>30 <th>年龄</th>31 <td><input type="text" placeholder="请输入年龄" name="age" >32 </td>33 </tr>34 </tbody>35 </table>36 </li>37 <li>38 <table border="0" cellspacing="0" cellpadding="0">39 <tbody>40 <tr>41 <th>手机</th>42 <td><input type="text" placeholder="请输入手机" name="mobile" >43 </td>44 </tr>45 </tbody>46 </table>47 </li>48 <li>49 <table border="0" cellspacing="0" cellpadding="0">50 <tbody>51 <tr>52 <th>预约日期</th>53 <td>54 <select name="bookdate" >55 <option selected="">请选择预约日期</option>56 <?php57 for ($i = 1; $i <= 6; $i++) {58 $offset = strtotime("+".($i-1)." day");59 $bDate = date("m月d日",$offset);60 $optionString .= '<option >'.$bDate.'</option>';61 }62 echo $optionString;63 ?>64 </select>65 </td>66 </tr>67 </tbody>68 </table>69 </li>70 <li>71 <table border="0" cellspacing="0" cellpadding="0">72 <tbody>73 <tr>74 <th>预约专家</th>75 <td><select name="bookexpert" ><option selected="">请选择预约专家 </option><option >陈艳</option><option > 杨广胜</option><option >周平</option></select>76 </td>77 </tr>78 </tbody>79 </table>80 </li>81 </ul>82 83 <p >84 <input type="hidden" name="openid" >85 <input type="submit" >86 </p>87 </form> 在上述代码中，定义了一个form表单，设置了“姓名”“性别”“年龄”“手机”“预约日期”“预约专家”等选项。其中，“姓名”“年龄”“手机”由用户自己填写，“性别”“预约专家”由程序指定选择列表供用户选择，“预约日期”则由PHP程序生成未来6天的日期。在提交的表单信息中，还将用户的微信ID隐藏起来一起提交（第84行）。
对这些表单选项还需要使用JavaScript来校验用户是否正确输入，并在错误输入时显示提示语，其相关代码如下。
1 <script> 2 function showTip(tipTxt) { 3 var p = document.createElement('p'); 4 p.innerHTML = '<p><p>' + tipTxt + '</p></p>'; 5 var tipNode = p.firstChild; 6 $("#wrap").after(tipNode); 7 setTimeout(function { 8 $(tipNode).remove; 9 }, 1500);10 }11 function tgSubmit{12 var name=$("#name").val;13 if($.trim(name) == ""){14 showTip('请输入姓名')15 return false;16 }17 var sex=$("#sex").val;18 var age=$("#age").val;19 var patrn = /^[0-9]{1,2}$/;20 if (!patrn.exec($.trim(age))) {21 showTip('请输入年龄')22 return false;23 }24 var mobile=$("#mobile").val;25 if($.trim(mobile) == ""){26 showTip('请正确填写手机号码')27 return false;28 }29 var patrn = /^13[0-9]{9}$|^15[0-9]{9}$|^18[0-9]{9}$/;30 if (!patrn.exec($.trim(mobile))) {31 showTip('请正确填写手机号码')32 return false;33 }34 var bookdate=$("#bookdate").val;35 if($.trim(bookdate) == ""){36 showTip('请输入预约日期')37 return false;38 }39 var bookexpert=$("#bookexpert").val;40 if($.trim(bookexpert) == ""){41 showTip('请输入预约专家')42 return false;43 }44 return true;45 }46 </script> 上述页面的实现效果如图24-9所示。
图24-9 订单预约页面