表單實例（判斷兩次密碼是否一致）
一、實例描述：
本例是一個綜合性的練習，除了們正在學習的JS知識外，還用到了HTML的表格，表單等相關知識。
二、截圖
三、代碼
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>課堂演示</title> 6 <style type="text/css"> 7 table{ 8 margin: 20px auto; 9 border: 2px solid orange; 10 } 11 td{ 12 height: 40px; 13 line-height: 40px; 14 padding: 5px; 15 width: 200px; 16 background: rgba(100,50,10,0.3); 17 text-align: right; 18 font-size: 24px; 19 } 20 select,input{ 21 width: 200px; 22 height: 40px; 23 font-size: 18px; 24 } 25 [type=radio]{ 26 width: 30px;height: 30px; 27 } 28 [type=submit],[type=reset]{ 29 width: 150px; 30 border-radius: 25px; 31 font-size: 20px; 32 outline: none; 33 } 34 td:first-child{ 35 width: 150px 36 } 37 </style> 38 </head> 39 <body> 40 <table> 41 <tr> 42 <td>用戶名：</td> 43 <td><input type="text" id="st1"></td> 44 </tr> 45 <tr> 46 <td>聯系電話：</td> 47 <td><input type="text" id="st2"></td> 48 </tr> 49 <tr> 50 <td>密碼：</td> 51 <td><input type="password" id="st3"></td> 52 </tr> 53 <tr> 54 <td>確認密碼：</td> 55 <td><input type="password" id="st4" onblur="check()"></td> 56 </tr> 57 <tr> 58 <td>性別：</td> 59 <td style="text-align: left;"> 60 <!-- 這里name必須相同 --> 61 <input type="radio" name="sex" id="sex1">男 62 <input type="radio" name="sex" id="sex2"> 女 63 </td> 64 </tr> 65 <tr> 66 <td>學歷：</td> 67 <td> 68 <select id="select"> 69 <option value="高中">高中</option> 70 <option value="大專">大專</option> 71 <option value="本科">本科</option> 72 <option value="本科以上">本科以上</option> 73 </select> 74 </td> 75 </tr> 76 <tr> 77 <td colspan="2"> 78 <input type="submit" id="btn1" onclick="cs()"> 79 <input type="reset" id="btn2" value="重置"> 80 </td> 81 </tr> 82 </table> 83 <script type="text/javascript"> 84 //自定義通過ID獲取元素的函數 85 function $(id){ 86 return document.getElementById(id) 87 } 88 89 function check(){ 90 var boo=$('st3').value==$('st4').value; 91 if (boo) { 92 return true; 93 }else{ 94 alert('兩次密碼不一致') 95 } 96 97 } 98 99 function cs(){ 100 var str=''; 101 str+="\n用戶名："; 102 str+=$('st1').value 103 str+="\n聯系電話：" 104 str+=$('st2').value; 105 str+='\n性別：'; 106 str+=$('sex1').checked?'男':'女'; 107 str+='\n 學歷：'; 108 str+=$('select').value 109 alert('用戶信息：\n'+str) 110 } 111 </script> 112 </body> 113 </html>
css部分：
1、第七行，還是元素在style中定義格式的問題，比如table{}，直接就是元素加大括號，然后里面就是屬性
2、第八行，margin來實現表格在頁面中自動居中
3、第16行，backgound屬性
4、第25行，偽類選擇器，直接指定type為radio的格式，這樣直接指定type的話，是中括號包起來的[type=radio]
5、第28行，如果是多個，中間中逗號隔開
6、第34行，td的first-child，td的第一個孩子
7、第51行，元素的id屬性在js中非常有用
8、第55行，實現判斷兩次密碼是否一致，是調用了js函數的
9、第59行，調用了yext-align屬性的
10、第61行，單選框radio的name必須一致，當時id一般不同
11、第77行，合並列，是在td里面而不是tr，用的是colspan屬性
12、第55行，onblur屬性來判斷兩次密碼是否一致
js部分：
1、第85行，function $(id){} 自定義通過id獲取元素的函數
2、第86行，去弄清楚document有哪些屬性之后，學起來會事半功倍
3、第90行，密碼不一致的函數判斷，只用判斷兩個的值是否相等即可，注意用了剛剛獲取id的函數
4、第106行，checked屬性，
5、第108行，value屬性
四、總結
案例要點：
綜合運用學過的知識，將HTML於JS相結合。