使用eclipse打开，若用浏览器，且出现乱码，将格式<meta charset="UTF-8">改为<meta charset="GB2316">规格显示
博客.html（增加了即使验证的功能）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>博客</title> 6 <style type="text/css"> 7 body{ 8 font-family:黑体，隶书; 9 font-size:18px; 10 margin:auto; 11 } 12 .top{ 13 margin:auto; 14 width:100%; 15 float:left; 16 } 17 .left{ 18 width:5%; 19 float:left; 20 height:auto; 21 } 22 .right{ 23 width:6.3%; 24 height:auto; 25 float:right; 26 } 27 .left1{ 28 width:24%; 29 float:left; /*文本的浮动*/ 30 padding:0 5px; /*设置边线据内容的距离*/ 31 height:auto; 32 } 33 .line{ 34 border:1px green; 35 cellspacing:0; 36 cellpadding:0; 37 height:400px; 38 border-right-style:solid; 39 border-left-style:none; 40 border-bottom-style:none; 41 border-top-style:none; 42 } 43 div{ 44 box-sizing:border-box; 45 width:600px; 46 line-height:1.5; 47 } 48 49 </style> 50 <script language="JavaScript"> 51 var flag = true; 52 var flag1 = true; 53 var flag2 = true; 54 function checkType(){ 55 var nm = document.getElementById("dr").value; 56 if(nm.length<3 && nm.length>0){ 57 update("至少输入3个字符"); 58 flag = false; 59 }else if(nm.length>20){ 60 update("不能超过20个字符"); 61 nm =nm.substring(0,20); 62 document.getElementById("dr").value = nm.substring(0,20); 63 flag = false; 64 }else{ 65 update(""); 66 flag = true; 67 } 68 } 69 //输出提示内容 70 function update(word){ 71 document.getElementById("back").innerHTML=word; 72 } 73 74 //验证密码格式 75 function checkPassword(){ 76 var pw = document.getElementById("dr1").value; 77 if(pw.length<6 && pw.length>0){ 78 document.getElementById("back1").innerHTML = "至少输入6个字符！"; 79 flag1 = false; 80 }else if(pw.length>20){ 81 document.getElementById("back1").innerHTML = "不能超过20个字符！"; 82 flag1 = false; 83 }else{ 84 document.getElementById("back1").innerHTML = ""; 85 flag1 = true; 86 } 87 } 88 89 //验证密码 90 function checkPwC(){ 91 var pw1 = document.getElementById("dr1").value; 92 var pw2 =document.getElementById("dr2").value; 93 if(pw2!==pw1){ 94 document.getElementById("back2").innerHTML = "密码不一致！"; 95 flag2 = false; 96 }else if(pw2==pw1){ 97 document.getElementById("back2").innerHTML = "设置成功！"; 98 flag2 = true; 99 } 100 } 101 //验证条件满足 102 function check(){ 103 if(!flag){ 104 return false; 105 }else if(!flag1){ 106 return false; 107 }else if(!flag2){ 108 return false; 109 }else{} 110 } 111 </script> 112 </head> 113 <body> 114 <img src="image/01.gif" class="top"/> 115 <img src="image/02.gif" class="left"/> 116 <div class="left1"> 117 <img src="image/reg.gif"/> 118 <b>注册帮助</b><br/> 119 <ul> 120 <li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li> 121 <br/> 122 <li>密码：请设定在6-20位之间。</li> 123 <br/> 124 <li>确认密码：确认密码必须与密码一致。</li> 125 <br/> 126 <li>Email：请填写有效的Email地址，以便于与您联系。</li> 127 </ul> 128 </div> 129 <div class="left1" style="width:100px"><table class="line"></table></div> 130 <form name="form1" action="调查问卷.html" onSubmit="return check()"> 131 <div class="left1"> 132 <div style="height:80px"></div> 133 <table border=0> 134 <tr></tr> 135 <tr> 136 <td>用 户 名： </td> 137 <td><input id="dr" type="text" name="Dengru" placeholder="长度控制在3-20个字符之内" size=31 oninput="checkType()"></td> 138 </tr> 139 <tr><td></td><td><span id="back" style="color:red"></span></td></tr> 140 <tr></tr> 141 <tr> 142 <td>密 码：</td> 143 <td><input id="dr1" type="password" name="Dengru1" placeholder="请设定在6-20位之间" size=32 oninput="checkPassword()" required></td> 144 </tr> 145 <tr><td></td><td><span id="back1" style="color:red"></span></td></tr> 146 <tr></tr> 147 <tr> 148 <td>确认密码：</td> 149 <td><input id="dr2" type="password" name="Dengru2" size=32 oninput="checkPwC()" required></td> 150 </tr> 151 <tr><td></td><td><span id="back2" style="color:red"></span></td></tr> 152 <tr></tr> 153 <tr> 154 <td>性 别：</td> 155 <td><input type="radio" name="De2" value="Male">男 <input type="radio" name="De2" value="Female">女</td> 156 </tr> 157 <tr></tr> 158 <tr> 159 <td>E-mail：</td> 160 <td><input id="email" type="email" name="Dengru3"size=40></td> 161 </tr> 162 </table> 163 <br/> 164 <input type="submit" name="Submit" value="提交"> 165 <input type="reset" name="Reset" value="重置"> 166 </div> 167 </form> 168 <img src="image/04.gif" class="right"/> 169 <img src="image/03.jpg" class="top"/> 170 </body> 171 </html>
调查问卷.html（增加了选四项，清除第五项的功能）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <style type="text/css"> 6 body{ 7 background-color:#DEDEDE; 8 width:640px; 9 margin:auto; /*设置页面边距*/ 10 } 11 .headline{ 12 font-size:22px; 13 font-family:宋体; 14 text-align:center; /*设置居中*/ 15 font-weight:bold; /*设置为粗体*/ 16 } 17 .top{ 18 font-size:10。5px; /*字体大小*/ 19 font-family:楷体; 20 line-height:2; /*设置行高为1.5*/ 21 } 22 .right{ 23 text-align:right; 24 line-height:2; 25 } 26 .left{ 27 text-align:left; 28 } 29 .down{ 30 font-size:14px; 31 font-family:宋体; 32 line-height:2; 33 text-align:left; 34 } 35 .headline1{ 36 font-size:16px; 37 font-family:黑体; 38 text-align:left; /*设置左对齐*/ 39 font-weight:bold; /*粗体*/ 40 } 41 .line{ 42 border:1px solid #DEDEDE; 43 border-bottom:1px solid #000000; 44 background-color:#DEDEDE; 45 46 47 } 48 div{ 49 box-sizing:border-box; /*设置显示盒子模式*/ 50 line-height:1.5; 51 border-size:100; 52 } 53 </style> 54 <script language="JavaScript"> 55 function checkCount(){ 56 var q9box = document.getElementsByName("q9"); 57 var count = 0; 58 for(i = 0; i< q9box.length;i++){ 59 if(q9box[i].checked){ 60 count += 1; 61 if(count > 4){ 62 alert("最多只能选4个"); 63 q9box[i].checked=false; 64 return false; 65 } 66 } 67 } 68 69 } 70 </script> 71 <title>调查问卷</title> 72 </head> 73 <body> 74 <div class="top"> 75 <div class="headline"> 76 <h2>企业电商务调查问卷</h2> 77 </div> 78 <div>尊敬的先生/女士：<br/></div> 79 <div style="text-indent:3em">您好！为了了解目前企业开展电子商务的状况和问题，我们课题组希望您能协助填写<br/> 80 这份调查表。在此，我们郑重承诺，调查结果仅供研究使用。如果您有兴趣和需要，我们可<br/>以将最终的统计和分析结果通过电子邮件的方式反馈给您。<br/> 81 </div> 82 <div style="text-indent:3em">本次调查对于电子商务的界定是：通过计算机网络完成的购买和销售货物以及服务的<br/> 83 行为，这些货物或服务的订单是通过相关网络下达的，但是支付和物流可以是网下进行的。<br/>通过传真、电话和电子邮件达成的交易不算在内。<br/> 84 </div> 85 <div style="text-indent:3em">非常感谢您的大力支持！<br/><br/></div> 86 <div class="right" >广东省电子商务发展规划前期研究课题组</div> 87 <div style="border:1px solid #000000"></div> 88 </div> 89 90 <form name="form2" action="反馈.html" onSubmit="return check()" > 91 <div class="down"> 92 <div class="headline1"> 93 <h3>一、企业基本简况</h3> 94 </div> 95 <table style="width:500px;height:150px" border=0> 96 <tr> 97 <td>1.企业名称： <input type="text" name="u" class="line" size=25> 注册地：</td> 98 <td><input type="text" name="u" class="line" size=18></td> 99 </tr> 100 <tr> 101 <td>2.您在所在企业的职务（职位）： <input type="text" name="u" class="line" size=15></td> 102 </tr> 103 <tr> 104 <td>3. 企业成立时间： <input type="text" name="u" class="line" size=30></td> 105 </tr> 106 <tr> 107 <td>4. 企业所在行业： <input type="text" name="u" class="line" size=30></td> 108 </tr> 109 </table> 110 <u><b style="font-size:17px">以下选择题，若无特别声明，皆为多项选择题</b></u><br/> 111 <p>5.您所在企业的所有制形式为：（单选）<br/> 112 <input type="radio" name="a">国有 113 <input type="radio" name="a">集体 114 <input type="radio" name="a">民营 115 <input type="radio" name="a">外资 116 <input type="radio" name="a">合资 117 <input type="radio" name="a">股份制 118 <input type="radio" name="a">其他<input type="text" name="u" class="line" size=10> 119 </p>6.2005年，您所在企业的销售收入为（单位：人民币）： <input type="text" name="u" class="line" size=10>万元，比上年增<br/> 120 长 <input type="text" name="u" class="line" size=10> ％。 121 <p>7. 您所在企业应用到哪些物流服务？<br/> 122 <input type="checkbox" name="b">网络型邮政物流企业（具体为: 123 <input type="radio" name="b1">广东邮政 124 <input type="radio" name="b1">EMS 125 <input type="radio" name="b1">UPS 126 <input type="radio" name="b1">其他<input type="text" name="u" class="line" size=10>）<br/> 127 <input type="checkbox" name="c">运输仓储公司（ 128 <input type="radio" name="c1">本市企业 129 <input type="radio" name="c1">异地企业）<br/> 130 <input type="checkbox" name="d">第三方物流企业（ 131 <input type="radio" name="d1">本市企业 132 <input type="radio" name="d1">异地企业）<br/> 133 <input type="checkbox" name="e">企业自行解决<br/> 134 <input type="checkbox" name="f">其他<input type="text" name="u" class="line" size=10> 135 </p> 136 8.请列出贵企业所在行业的主要企业情况<br/> 137 <table border=1 cellspacing="0" cellpadding="0" style="width:400px;height:150px;text-align:center"> 138 <tr> 139 <td>企业名称</td> 140 <td>该企业的竞争优势</td> 141 <td>是否已开展电子商务</td> 142 </tr> 143 <tr> 144 <td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td> 145 <td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td> 146 <td><input type="radio" name="g">是 <input type="radio" name="g">否</td> 147 </tr> 148 <tr> 149 <td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td> 150 <td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td> 151 <td><input type="radio" name="g1">是 <input type="radio" name="g1">否</td> 152 </tr> 153 <tr> 154 <td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td> 155 <td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td> 156 <td><input type="radio" name="g2">是 <input type="radio" name="g2">否</td> 157 </tr> 158 </table> 159 <div class="headline1"> 160 <h3>二、企业信息化总体状况</h3> 161 </div> 162 <p>9.您所在企业网站的更新周期是多长时间？（单选） 163 <select> 164 <option value ="0">单选，请下拉</option> 165 <option value="1">每天</option> 166 <option value="2">每周</option> 167 <option value="3">每月</option> 168 <option value="4">每季度</option> 169 <option value="5">半年</option> 170 <option value="6">半年以上</option> 171 </select> 172 </p> 173 10.您所在企业最需要的信息包括（选择其中最重要的4项信息）：<br/> 174 <table> 175 <tr> 176 <td><input type="checkbox" name="q9" onclick="checkCount()">产品开发 </td> 177 <td><input type="checkbox" name="q9" onclick="checkCount()">生产技术 </td> 178 <td><input type="checkbox" name="q9" onclick="checkCount()">技术引进 </td> 179 <td><input type="checkbox" name="q9" onclick="checkCount()">市场行情</td> 180 </tr> 181 <tr> 182 <td><input type="checkbox" name="q9" onclick="checkCount()">竞争对手 </td> 183 <td><input type="checkbox" name="q9" onclick="checkCount()">政策法规 </td> 184 <td><input type="checkbox" name="q9" onclick="checkCount()">薪酬水平 </td> 185 <td><input type="checkbox" name="q9" onclick="checkCount()">人才信息 </td> 186 </tr> 187 <tr> 188 <td><input type="checkbox" name="q9" onclick="checkCount()">社交活动 </td> 189 <td><input type="checkbox" name="q9" onclick="checkCount()">合作伙伴信息 </td> 190 <td><input type="checkbox" name="q9" onclick="checkCount()">企业绩效</td> 191 <td><input type="checkbox" name="q9" onclick="checkCount()">行业动态 </td> 192 </tr> 193 <tr> 194 <td><input type="checkbox" name="q9" onclick="checkCount()">客户信息</td> 195 <td><input type="checkbox" name="q9" onclick="checkCount()">供应商信息 </td> 196 <td><input type="checkbox" name="q9" onclick="checkCount()">产品价格</td> 197 <td><input type="checkbox" name="q9" onclick="checkCount()">质量管理 </td> 198 </tr> 199 <tr> 200 <td><input type="checkbox" name="q9" onclick="checkCount()">财务状况 </td> 201 <td><input type="checkbox" name="q9" onclick="checkCount()">投资融资 </td> 202 <td><input type="checkbox" name="q9" onclick="checkCount()">市场预测</td> 203 <td><input type="checkbox" name="q9" onclick="checkCount()">员工关系 </td> 204 </tr> 205 <tr> 206 <td><input type="checkbox" name="q9" onclick="checkCount()">其他 <input type="text" name="u" class="line" size=10> </td> 207 </tr> 208 </table> 209 <br/> 210 <p>11.您所在企业是否建立了以下电子商务系统，各个系统的作用如何？<br/> 211 <table border=0 style="width:500px;height:150px;text-align:center"> 212 <tr><th></th><th>非常重要</th><th>重要</th><th>一般</th><th>不重要</th><th>不存在</th></tr> 213 <tr> 214 <td style="text-align:left"><input type="checkbox" name="w10">没有重视电子商务规划</td> 215 <td><input type="radio" name="l">5</td> 216 <td><input type="radio" name="l">4</td> 217 <td><input type="radio" name="l">3</td> 218 <td><input type="radio" name="l">2</td> 219 <td><input type="radio" name="l">1</td> 220 </tr> 221 <tr> 222 <td style="text-align:left"><input type="checkbox" name="w10">企业之间存在利益冲突</td> 223 <td><input type="radio" name="l1">5</td> 224 <td><input type="radio" name="l1">4</td> 225 <td><input type="radio" name="l1">3</td> 226 <td><input type="radio" name="l1">2</td> 227 <td><input type="radio" name="l1">1</td> 228 </tr> 229 <tr> 230 <td style="text-align:left"><input type="checkbox" name="w10">管理理念与技术冲突</td> 231 <td><input type="radio" name="l2">5</td> 232 <td><input type="radio" name="l2">4</td> 233 <td><input type="radio" name="l2">3</td> 234 <td><input type="radio" name="l2">2</td> 235 <td><input type="radio" name="l2">1</td> 236 </tr> 237 <tr> 238 <td style="text-align:left"><input type="checkbox" name="w10">外部环境与技术冲突</td> 239 <td><input type="radio" name="l3">5</td> 240 <td><input type="radio" name="l3">4</td> 241 <td><input type="radio" name="l3">3</td> 242 <td><input type="radio" name="l3">2</td> 243 <td><input type="radio" name="l3">1</td> 244 </tr> 245 <tr> 246 <td style="text-align:left"><input type="checkbox" name="w10">企业文化保守</td> 247 <td><input type="radio" name="l4">5</td> 248 <td><input type="radio" name="l4">4</td> 249 <td><input type="radio" name="l4">3</td> 250 <td><input type="radio" name="l4">2</td> 251 <td><input type="radio" name="l4">1</td> 252 </tr> 253 <tr> 254 <td style="text-align:left"><input type="checkbox" name="w10">其他<input type="text" name="u" class="line" size=20></td> 255 </tr> 256 </table> 257 </p> 258 <p>12.您认为企业要进一步发展电子商务，需要所在地方政府哪些支持？<br/> 259 <input type="text" name="u" class="line" size=70><br/> 260 <input type="text" name="u" class="line" size=70><br/> 261 <input type="text" name="u" class="line" size=70><br/> 262 </p> 263 <b>问卷填写人签名：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=20> 264 <b>单位负责人签名：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=20><br/> 265 <b>问卷填写人联系电话：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=15> 266 <b>单位盖章：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=25><br/> 267 <b>问卷填写日期：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=40><br/><br/> 268 <pre><input type="submit" name="Submit" value="提交"> <input type="reset" name="Reset" value="重置"></pre> 269 </div> 270 </form> 271 272 </body> 273 </html>
反馈.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>反馈</title> 6 <script language="JavaScript"> 7 alert("感谢您的参与！"); 8 </script> 9 </head> 10 <body> 11 </body> 12 </html>