0702【任务7-2】创建用户注册的表单网页0702.html
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
表7-3
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
网页0702.html的主体布局的HTML代码
HTML代码 <section class="ec-s-reg"> <h2>用户注册</h2> <div class="w-m"> <ul> <li> </li> <li class="userInfo"> </li> <li> </li> <li class="" id="mobileCode"> </li> <li> </li> <li> </li> <li class="submit"> </li> <li class="submit"> </li> </ul> </div> </section>
“images”等子文件夹，且将所需的素材（包括
base.css））拷贝到对应的子文件夹中。
5
《网页设计与制作任务驱动教程（第3版）》
（2）定义网页主体布局结构与美化表单的CSS
代码
在文件夹“CSS”中创建样式文件main.css，在该 样式文件中编写样式代码，网页0702.html主体布局结 构的CSS代码如表7-1所示。
网页设计与制作任务驱动教程 （第3版）
《网页设计与制作任务驱动教程（第3版）》
单元6
制作包含超级链接和 导航栏的网页
【任务7-2】创建用户注册的表单网页0702.html
2
《网页设计与制作任务驱动教程（第3版）》
【任务7-2】创建用户注册的表单网页 0702.html
【任务描述】
（1）创建样式文件base.css和main.css，在该
表7-1 网页0702.html主体 布局结构的CSS代码定义
6
《网页设计与制作任务驱动教程（第3版）》
网页0702.html中美化表单及表单控件的CSS代码 如表7-2所示。
表7-2
序号 01 02 03 04 05 06 07 08 09 10 11 12 13
网页0702.html中美化表单及表单控件的CSS代码定义
<link type="text/css" rel="stylesheet" href="css/main.css"/>
8
《网页设计与制作任务驱动教程（第3版）》
（4）在网页0702.html中添加必要的HTML标 签与输入文本内容
在网页文档0702.html中添加必要的HTML标签，
主体布局的HTML代码如表7-3所示。
9
《网页设计与制作任务驱动教程（第3版）》
在网页文档0702.html中插入表单及表单控件，添 加必要的HTML标签，并设置表单和表单控件的属性， 完整的HTML代码如表7-4所示。
序号 HTML代码 01 <section class="ec-s-reg"> 02 <h2>用户注册</h2> 03 <div class="w-m"> 04 <form id="regForm" name="regForm" onsubmit="return Validator.Validate(this,2)" 05 action="" method="post" class="form-m"> 06 <ul> 07 <li> 08 <label> </label> 09 <i class="radiolabel"> 10 <input type="radio" name="radioButton" id="regForm_radioButton0" 11 checked="checked" value="0"/> 12 <label for="regForm_radioButton0">手机号注册</label> 13 <input type="radio" name="radioButton" id="regForm_radioButton1" value="1"/> 14 <label for="regForm_radioButton1">邮箱注册</label> 15 </i> 16 </li> 17 <li class="userInfo"> 18 <label id="userTitle">手机号：</label> 19 <input type="text" name="custom.username" size="40" maxlength="50" 20 value="" id="user" class="input" /> 21 <i id="errorusername" class="inputMsg" msg="请使用大陆手机号注册"> 22 请使用大陆手机号注册，系统严格保密</i> 23 </li>
序号 14 15 16 17 18 19 20 21 22 23 24 25 26 CSS代码 .form-m li.submit { padding-left: 110px; } .form-m li.submit { padding: 5px 0 5px 107px; clear: both; text-align: left; } .inputMsg { color: #999; }
11
《网页设计与制作任务驱动教程（第3版）》
表7-4
序号 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 <li>
网页0702.html完整的HTML代码（续表）
HTML代码
<label>确认密码：</label> <input type="password" name="custom.password2" size="40" maxlength="15" id="regForm_custom_password2" class="input" msg="请正确输入确认密码" dataType="Repeat" to="custom.password"/> <i class="inputMsg" msg=""></i> </li> <li class="submit"> <input name="protocol" id="customProtocol" type="checkbox" checked="checked" dataType="Group" min="1" max="2" msg="请确认您已阅读用户注册协议 "> <i class="radiolabel"> <label for="customProtocol">我已阅读阿坝旅游网<a href="" target="_blank" class="blue link_line">用户注册协议</a></label></i> <i class="inputMsg" msg=""></i> </li> <li class="submit"> <i><button type="submit">注册</button></i> </li> </ul> </form> </div> </section>
表7-4 网页0702.html 完整的HTML代码
10
《网页设计与制作任务驱动教程（第3版）》
表7-4
序号 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
网页0702.html完整的HTML代码（续表）
HTML代码
<li> <label>验证码：</label> <input type="text" name="randomcode" size="17" maxlength="4" value="" id="regForm_randomcode" class="input input_login input_randomcode" msg="请正确输入验证码" max="4" dataType="Code" min="4"/> <span id="codeinfo"><img src='createimage' title='验证码看不清楚？ 请点击更新为新的验证码！' style='cursor : pointer;' align='absmiddle' id='codeImg' onclick="$(this).attr('src','createimage;"/></span> <i id="errorrandomcode" class="inputMsg" msg=""></i> </li> <li class="" id="mobileCode"> <label>激活码：</label> <input type="text" name="vertifycode" size="17" maxlength="4" value="" id="vertifycode" class="input input_login input_code" msg="请正确输入手机激活码" dataType="Code"/> <button type="button" class="buttonG min" id="codeB">免费获取手机激活码</button> <i class="inputMsg" msg=""></i> </li> <li> <label>登录密码：</label> <input type="password" name="custom.password" size="40" maxlength="15" id="pwd" class="input" title="8-15位字符，可使用字母、数字或符号的组合" msg="请输入登录密码，8-15位字符" require="true" dataType="Require"/> <i class="inputMsg" msg="密码只能由8到15位非空白字符组成"> 密码只能由8到15位非空白字符组成</i> </li>
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 CSS代码 .ec-s-reg { margin-left: 20px; } .ec-s-reg > h2 { padding: 10px 20px; font-size: 16px; font-family: "微软雅黑"; padding-left: 300px; } .ec-s-reg > .w-m { box-shadow: 0 0 5px #EEE; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #EEE; padding: 5px; width: 660px; } 序号 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 CSS代码 section { display: block; position: relative; margin: auto; } .form-m li { padding-top: 5px; padding-bottom: 5px; margin: 0 auto; line-height: 40px; position: relative; *zoom: 1; color: #666; clear: both; } .form-m li.userInfo { z-index: 10; }
CSS代码 .form-m li label { margin-right: 5px; font-size: 14px; display: inline-block; width: 100px; text-align: right; white-space: nowrap; color: #333; } .form-m li i.radiolabel label { width: auto; font-weight: normal }
该网页包含表单以及多个表单控件，用于实现用户
注册功能。
图7-38 网页0702.html的浏览效果
4
《网页设计与制作任务驱动教程（第3版）》
【任务实施】
（1）创建所需的文件夹与拷贝所需的资源
文件夹“Unit07”中创建子文件夹“task07-2”，
再在该子文件夹“task07-2”中创建“css”、
7
《网页设计与制作任务驱动教程（第3版）》
（3）创建网页文档0702.html与链接外部 样式表
在文件夹“6-4”中创建网页文档0702.html， 切换到网页文档0702.html的【代码视图Hale Waihona Puke Baidu，在标 签“</head>”的前面输入链接外部样式表的代码， 如下所示：
<link type="text/css" rel="stylesheet" href="css/base.css"/>
样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0702.html，且链接外部
样式文件base.css和main.css。
3
《网页设计与制作任务驱动教程（第3版）》
（3）在网页0702.html中添加必要的HTML标签
和插入表单及表单控件。
（4）浏览网页0702.html的效果，如图7-38所示，
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
网页0702.html的主体布局的HTML代码
HTML代码 <section class="ec-s-reg"> <h2>用户注册</h2> <div class="w-m"> <ul> <li> </li> <li class="userInfo"> </li> <li> </li> <li class="" id="mobileCode"> </li> <li> </li> <li> </li> <li class="submit"> </li> <li class="submit"> </li> </ul> </div> </section>
“images”等子文件夹，且将所需的素材（包括
base.css））拷贝到对应的子文件夹中。
5
《网页设计与制作任务驱动教程（第3版）》
（2）定义网页主体布局结构与美化表单的CSS
代码
在文件夹“CSS”中创建样式文件main.css，在该 样式文件中编写样式代码，网页0702.html主体布局结 构的CSS代码如表7-1所示。
网页设计与制作任务驱动教程 （第3版）
《网页设计与制作任务驱动教程（第3版）》
单元6
制作包含超级链接和 导航栏的网页
【任务7-2】创建用户注册的表单网页0702.html
2
《网页设计与制作任务驱动教程（第3版）》
【任务7-2】创建用户注册的表单网页 0702.html
【任务描述】
（1）创建样式文件base.css和main.css，在该
表7-1 网页0702.html主体 布局结构的CSS代码定义
6
《网页设计与制作任务驱动教程（第3版）》
网页0702.html中美化表单及表单控件的CSS代码 如表7-2所示。
表7-2
序号 01 02 03 04 05 06 07 08 09 10 11 12 13
网页0702.html中美化表单及表单控件的CSS代码定义
<link type="text/css" rel="stylesheet" href="css/main.css"/>
8
《网页设计与制作任务驱动教程（第3版）》
（4）在网页0702.html中添加必要的HTML标 签与输入文本内容
在网页文档0702.html中添加必要的HTML标签，
主体布局的HTML代码如表7-3所示。
9
《网页设计与制作任务驱动教程（第3版）》
在网页文档0702.html中插入表单及表单控件，添 加必要的HTML标签，并设置表单和表单控件的属性， 完整的HTML代码如表7-4所示。
序号 HTML代码 01 <section class="ec-s-reg"> 02 <h2>用户注册</h2> 03 <div class="w-m"> 04 <form id="regForm" name="regForm" onsubmit="return Validator.Validate(this,2)" 05 action="" method="post" class="form-m"> 06 <ul> 07 <li> 08 <label> </label> 09 <i class="radiolabel"> 10 <input type="radio" name="radioButton" id="regForm_radioButton0" 11 checked="checked" value="0"/> 12 <label for="regForm_radioButton0">手机号注册</label> 13 <input type="radio" name="radioButton" id="regForm_radioButton1" value="1"/> 14 <label for="regForm_radioButton1">邮箱注册</label> 15 </i> 16 </li> 17 <li class="userInfo"> 18 <label id="userTitle">手机号：</label> 19 <input type="text" name="custom.username" size="40" maxlength="50" 20 value="" id="user" class="input" /> 21 <i id="errorusername" class="inputMsg" msg="请使用大陆手机号注册"> 22 请使用大陆手机号注册，系统严格保密</i> 23 </li>
序号 14 15 16 17 18 19 20 21 22 23 24 25 26 CSS代码 .form-m li.submit { padding-left: 110px; } .form-m li.submit { padding: 5px 0 5px 107px; clear: both; text-align: left; } .inputMsg { color: #999; }
11
《网页设计与制作任务驱动教程（第3版）》
表7-4
序号 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 <li>
网页0702.html完整的HTML代码（续表）
HTML代码
<label>确认密码：</label> <input type="password" name="custom.password2" size="40" maxlength="15" id="regForm_custom_password2" class="input" msg="请正确输入确认密码" dataType="Repeat" to="custom.password"/> <i class="inputMsg" msg=""></i> </li> <li class="submit"> <input name="protocol" id="customProtocol" type="checkbox" checked="checked" dataType="Group" min="1" max="2" msg="请确认您已阅读用户注册协议 "> <i class="radiolabel"> <label for="customProtocol">我已阅读阿坝旅游网<a href="" target="_blank" class="blue link_line">用户注册协议</a></label></i> <i class="inputMsg" msg=""></i> </li> <li class="submit"> <i><button type="submit">注册</button></i> </li> </ul> </form> </div> </section>
表7-4 网页0702.html 完整的HTML代码
10
《网页设计与制作任务驱动教程（第3版）》
表7-4
序号 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
网页0702.html完整的HTML代码（续表）
HTML代码
<li> <label>验证码：</label> <input type="text" name="randomcode" size="17" maxlength="4" value="" id="regForm_randomcode" class="input input_login input_randomcode" msg="请正确输入验证码" max="4" dataType="Code" min="4"/> <span id="codeinfo"><img src='createimage' title='验证码看不清楚？ 请点击更新为新的验证码！' style='cursor : pointer;' align='absmiddle' id='codeImg' onclick="$(this).attr('src','createimage;"/></span> <i id="errorrandomcode" class="inputMsg" msg=""></i> </li> <li class="" id="mobileCode"> <label>激活码：</label> <input type="text" name="vertifycode" size="17" maxlength="4" value="" id="vertifycode" class="input input_login input_code" msg="请正确输入手机激活码" dataType="Code"/> <button type="button" class="buttonG min" id="codeB">免费获取手机激活码</button> <i class="inputMsg" msg=""></i> </li> <li> <label>登录密码：</label> <input type="password" name="custom.password" size="40" maxlength="15" id="pwd" class="input" title="8-15位字符，可使用字母、数字或符号的组合" msg="请输入登录密码，8-15位字符" require="true" dataType="Require"/> <i class="inputMsg" msg="密码只能由8到15位非空白字符组成"> 密码只能由8到15位非空白字符组成</i> </li>
序号 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 CSS代码 .ec-s-reg { margin-left: 20px; } .ec-s-reg > h2 { padding: 10px 20px; font-size: 16px; font-family: "微软雅黑"; padding-left: 300px; } .ec-s-reg > .w-m { box-shadow: 0 0 5px #EEE; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #EEE; padding: 5px; width: 660px; } 序号 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 CSS代码 section { display: block; position: relative; margin: auto; } .form-m li { padding-top: 5px; padding-bottom: 5px; margin: 0 auto; line-height: 40px; position: relative; *zoom: 1; color: #666; clear: both; } .form-m li.userInfo { z-index: 10; }
CSS代码 .form-m li label { margin-right: 5px; font-size: 14px; display: inline-block; width: 100px; text-align: right; white-space: nowrap; color: #333; } .form-m li i.radiolabel label { width: auto; font-weight: normal }
该网页包含表单以及多个表单控件，用于实现用户
注册功能。
图7-38 网页0702.html的浏览效果
4
《网页设计与制作任务驱动教程（第3版）》
【任务实施】
（1）创建所需的文件夹与拷贝所需的资源
文件夹“Unit07”中创建子文件夹“task07-2”，
再在该子文件夹“task07-2”中创建“css”、
7
《网页设计与制作任务驱动教程（第3版）》
（3）创建网页文档0702.html与链接外部 样式表
在文件夹“6-4”中创建网页文档0702.html， 切换到网页文档0702.html的【代码视图Hale Waihona Puke Baidu，在标 签“</head>”的前面输入链接外部样式表的代码， 如下所示：
<link type="text/css" rel="stylesheet" href="css/base.css"/>
样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0702.html，且链接外部
样式文件base.css和main.css。
3
《网页设计与制作任务驱动教程（第3版）》
（3）在网页0702.html中添加必要的HTML标签
和插入表单及表单控件。
（4）浏览网页0702.html的效果，如图7-38所示，