网页设计（修订）继上一篇
程序员文章站
2023-08-18 19:43:57
使用eclipse打开，若用浏览器，且出现乱码，将格式改为规格显示 博客.html（增加了即使验证的功能） 1 2 3 4
博客
调查问卷
反馈
使用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>
上一篇： 从ASP.NET Core2.2到3.0你可能会遇到这些问题
下一篇： 前端基础