初學html-資訊蒐集
阿新 • • 發佈：2018-12-12
題目描述：
製作簡單的收集資訊的網頁，使用10種以上標記收集20項以上的學生個人資訊。
程式碼如下：
<!doctype html> <html> <head> <title><form>的應用</title> <meta charset="utf-8"/> </head> <body> <form action="" method="get"> <table width="800" border="1" cellspacing="0" align="center" background="background.jpg"> <caption>大學生資訊登記表</caption> <tr> <td>姓名：</td> <td><input id="stuName" type="text"/></td> <td>性別：</td> <td><input id="boy" checked="checked" name="sex" type="radio"/>男 <input id="girl" checked="checked" name="sex" type="radio"/>女</td> <td>出生日期：</td> <td><input id="date" type="date"/></td> </tr> <tr> <td>身份證號碼：</td> <td><input id="identity" type="text" pattern="([0-9]{18})|(^[0-9]{17}[A-Z]{1}$)"/> <br/><font color="FF0000">注：只允許填入18位數字或者17位數字加一個大寫字母</font></td> <td>學校：</td> <td><input id="school" type="text"/></td> <td>專業：</td> <td><input id="major" type="text"/></td> </tr> <tr> <td>學號：</td> <td><input id="stuNumber" type="text" pattern="[0-9]{12}"/><br/><font color="FF0000">注：填入12位數字</font></td> <td>入學時間：</td> <td><input id="Date" type="date"/></td> <td>家庭住址：</td> <td><input id="address" type="text"/></td> <tr> <td>民族：</td> <td><input id="nation" type="text"/></td> <td>籍貫：</td> <td><select id="province"> <option>山西</option> <option>陝西</option> <option>甘肅</option> <option>天津</option> <option>北京</option> <option>山東</option> <option>上海</option> <option>香港</option> <option>澳門</option> <option>貴州</option> </select> </td> <td>小學學校</td> <td><input id="junior" type="text"/></td> </tr> <tr> <td>初中學校</td> <td><input id="middle" type="text"/></td> <td>高中學校</td> <td><input id="high" type="text"/></td> <td>家庭人口數：</td> <td><input id="familyNum" type="number" min="1" max="10"/></td> </tr> <tr> <td>愛好：</td> <td colspan="5"><input id="swimming" type="checkbox"/>游泳 <input id="chess" type="checkbox"/>下棋 <input id="kungfu" type="checkbox"/>武術 <input id="music" type="checkbox"/>音樂 <input id="basketball" type="checkbox"/>籃球 <input id="football" type="checkbox"/>足球 </td> </tr> <tr> <td>年級：</td> <td><select id="grade" name="grade"> <option>2016</option> <option>2017</option> <option>2018</option> <option>2019</option> </select> </td> <td>班級：</td> <td><input id="class" type="text"/></td> <td>行動電話號碼：</td> <td><input id="telNUm" type="text" pattern="^[1][3,4,5,,7,8][0-9]{9}$"/> <br/><font color="FF0000">注：填入11位數字,第一位必須為1，第二位可為3，4，5，7，9</font></td> </tr> <tr> <td>個人獲獎情況說明</td> <td colspan="5"><textarea id="Resume" cols="100" name="Resume" rows="3"></textarea> </td> </tr> <tr><td> </td> <td colspan="5"> <input id="submit1" type="submit" value="提交"/> <input id="reset1" type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html>
效果截圖如下：
心得體會：
使用了一些正則表示式限制了某些項的輸入值，當輸入錯誤時會有相應的錯誤提示。