表单实例（判断两次密码是否一致）
一、实例描述：
本例是一个综合性的练习，除了们正在学习的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相结合。
2026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
