任务要求如下：
设计学生信息注册网页，主要要求如下：
- 设置页面标题为“新生报到”；
- 使用表格布局，令页面内容居中显示；
- 使用h3标签居中显示“注册信息”，并设置一个页面顶部锚点；
- 在注册信息填写区域前后设置水平分隔线；
- 显式地声明表单使用get方式提交，表单中所有输入域必须设置name属性，设置表单的自动完成功能；
- 设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入8位数字密码”，并设置为自动数字校验；
- 除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；
- 右侧图像域请使用学生本人的半身像；
- 性别默认选择“女”，借助label标签使得用户可以通过单选按钮后的文本进行勾选；
- 身高最大、最小、步长和默认值分别为190、150、2、170厘米；体重最大、最小、步长和默认值分别为90、35、1、50千克；
- 电话号码输入框中提示“请输入11位数字号码”，并设置pattern属性进行数字校验；
- 家庭住址下拉列表中依此设置“北京、上海、广州和成都”4个选项，默认选择“成都”；
- 复选框中默认选择篮球和乒乓球；
- 使用datalist标签为“常用网址”输入框提供可选网址列表，如图2所示；
- 文件域上传2份简历文件；
- 个人自述文本区设置行数为4行，最宽字符为40，默认显示文本“我是一位特别热爱学习的好孩子。。。”
- 插入一个隐藏域，设置value值为你的幸运数字；
- 设置“注册”和“重置”两个按钮，居中显示；
- 在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>新生报到</title><style>a:link{color : blue}a:visited{color : grey}a:hover{color : red}a:active{color : yellow}</style></head><body><h3 align="center" name="head">注册信息</h3><hr width="200%" size="1" color="#CC0000" /><form action="" method="get" autocomplete="on"> <table align="center" cellspacing="2" cellpadding="2"> <tr> <td rowspan="7"><table align="center" cellspacing="2" cellpadding="2"> <tr> <td>姓名：</td> <td><input type="text" name="stuname" required autofocus="on"/> <font color="red">*</font></td> <td rowspan="7"><input type="image" src="../女孩儿.jpg" height="250" width="250"/></td> </tr> <tr> <td>学号：</td> <td><input type="text" name="stunumber" required/> <font color="red">*</font></td> </tr> <tr> <td>密码：</td> <td><input type="password" placeholder="请输入八位数字密码" pattern="\d{8}"required/> <font color="red">*</font></td> </tr> <tr> <td>性别：</td> <td><label> <input type="radio" name="stusex" value="0" /> 男</label> <label> <input type="radio" name="stusex" value="1" checked=“checked” /> 女</label></td> </tr> <tr> <td>身高：</td> <td><input type="number" name="stuhight" min="150" max="190" step="2" value="170"/> 厘米</td> </tr> <tr> <td>体重：</td> <td><input type="range" name="stuweight" max="90" min="35" step="1" value="50"/> 千克</td> </tr> <tr> <td>生日：</td> <td><input type="date" name="stubirthday" /></td> </tr> <tr> <td>电话号码</td> <td><input type="tel" name="stutel" placeholder="请输入十一位电话号码" pattern="\d{11}"/></td> </tr> <tr> <td>E-mail:</td> <td><input type="email" name="stuemail"/></td> </tr> <tr> <td>个人主页：</td> <td><textarea name="stutxt" cols="40" rows="1" size="40"></textarea></td> </tr> <tr> <td>家庭住址：</td> <td><select name="stucity" size="1" multiple > <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="chengdu" selected>成都</option> </select></td> </tr> <tr> <td>我的颜色：</td> <td><input type="color" /></td> </tr> <tr> <td><input type="hidden" name="stuluckynum" value="3" /></td> </tr> <tr> <td>我的运动：</td> <td><input type="checkbox" name="stusports" value="0" checked /> 篮球 <input type="checkbox" name="stusports" value="1" /> 足球 <input type="checkbox" name="stusports" value="2" /> 游泳 <input type="checkbox" name="stuports" value="3" checked /> 乒乓球</td> </tr> <tr> <td>常用网址：</td> <td><input type="url" name="stuurl" list="urllist"/> <datalist id="urllist"> <option label="百度" value="http://www.baidu.com"/> <option label="新浪" value="http://www.sina.com"/> <option label="谷歌" value="http://www.google.com"/> </datalist></td> </tr> <tr> <td>简历两份：</td> <td><input type="file" nmae="stufile" multiple /></td> </tr> <tr> <td>个人自述：</td> <td><textarea name="stuselftalk" clos="40" rows="4" placeholder="我是一位特别热爱学习的好孩子。。。"></textarea></td> </tr> <tr> <td><input type="submit" name="input" value="注册" /> <input type="reset" name="input" value="重置" /></td> </tr> </table></td> </tr> </table></form><hr width="200%" size="1" color="#CC0000" /><h4 align="center"><a href="tel:12345678900">电话</a> <a href="sms:12345678900">短信</a> <a href="mailto:[email protected]">E-mail</a> <a href="#head">返回顶部</a></h3></body></html>
测试结果截图：
本文转载自: https://blog.csdn.net/weixin_65997960/article/details/129644985
版权归原作者 vin77云虞 所有， 如有侵权，请联系我们删除。
版权归原作者 vin77云虞 所有， 如有侵权，请联系我们删除。