具体要求：
- 设置页面标题为“新员工入职报到”；
- 使用表格布局，令页面内容居中显示；
- 使用h3标签居中显示“新员工注册信息”，并设置一个页面顶部锚点；
- 在注册信息填写区域前后设置水平分隔线；
- 显式地声明表单使用get方式提交，表单中所有输入域必须设置name属性，设置表单的自动完成功能；
- 设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，姓名输入框和学号输入框中设置提示信息；密码输入框中提示用户“请输入8位数字密码”，并设置为自动数字校验；
- 除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；
- 右侧图像域请使用学生本人的半身像；
- 性别默认选择“男”，借助label标签使得用户可以通过单选按钮后的文本进行勾选；
- 身高最大、最小、步长和默认值分别为210、150、5、175厘米；体重最大、最小、步长和默认值分别为90、40、2、55千克；
-
电话号码输入框中提示“请输入11位数字号码”，并设置pattern属性进行数字校验；
-
家庭住址下拉列表中依此设置“北京、上海、广州、深圳和成都”5个选项，默认选择“成都”。
- 复选框中默认选择运动和电影；
- 使用datalist标签为“常用网址”输入框提供可选网址列表，如图2所示；
- 文件域上传2份简历文件；
- 个人评价文本区设置行数为4行，最宽字符为40，默认显示文本“本人性格热情开朗，待人友好，为人诚实谦虚...”
- 插入一个隐藏域，设置value值为你的幸运数字；
- 设置“注册”和“重置”两个按钮，居中显示；
- 在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。
源代码：
<html>
<head>
<meta charset="utf-8">
<title>新员工入职报道</title>
<style type="text/css">
h3{
color:red;
}
a:link{color:blue}
a:visited{color:#484747}
a:hover{color:red}
a:active{color:yellow}
b{
color: #0C8DEF;
}
c{
color: red;
}
</style>
</head>
<body>
<h3 align="center" a name="dingbu">新员工注册信息</h3>
<hr width="100%" size="1" color="#170F0F">
<hr width="100%" size="1" color="#170F0F">
<form action="" name="yuangong" method="get">
<table align="center">
<tr><td><b>姓 名：</b></td><td><input type="text" name="ygName" placeholder="请输入姓名" required="required"><c>*</c></td><td rowspan="6"><img src="C9Y955{]~[Q1B32UE3]T[EC.jpg" height="150" alt="半身像"></td></tr>
<tr><td><b>工 号：</b></td><td><input type="text" name="yggonghao" placeholder="请输入学号" required="required"><c>*</c></td></tr>
<tr><td><b>密 码：</b></td><td><input type="password" name="psw" placeholder="请输入8位数字密码" required="required"><c>*</c></td></tr>
<tr><td><b>性 别：</b></td><td><input type="radio" name="ygSex" checked="checked"><span>男</span>
<input type="radio" name="ygSex"><span>女</span></td></tr>
<tr><td><b>身 高：</b></td><td><input type="text" value="175" name="ygsg" max="210" min="150" step="5">厘米</td></tr>
<tr><td><b>体 重：</b></td><td>40<input type="range" min="40" max="90" value="55" step="2">90千克</td></tr>
<tr><td><b>生日日期：</b></td><td><input type="date" name="ygBrithday"></td></tr>
<tr><td><b>电话号码：</b></td><td><input type="tel" name="ygtel" pattern="\d{11}" placeholder="请输入11位数字号码"></td></tr>
<tr><td><b>个人邮箱：</b></td><td><input type="email" name="ygemail"></td></tr>
<tr><td><b>个人主页：</b></td><td><input type="text" name="ygzhuye"></td></tr>
<tr><td><b>家庭住址：</b></td><td><select name="ygzhuzhi">
<option value="chengdu">成都</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option></select>
</td></tr>
<tr><td><b>我的颜色：</b></td><td><input type="color" name="color1"></td></tr>
<tr><td><b>我的爱好：</b></td><td><input type="checkbox" name="ygCheck">唱歌<input type="checkbox" name="ygCheck" checked="checked">运动<input type="checkbox" name="ygCheck">旅游<input type="checkbox" name="ygCheck" checked="checked">电影</td></tr>
<tr><td><b>常用网址：</b></td><td><input type="url" name="yg_url" value="http://..."></td></tr>
<tr><td><b>简历两份：</b></td><td><input type="file" name="ygjianli" multiple></td></tr>
<tr><td><b>个人评价：</b></td><td colspan="2"><textarea name="Letter" rows="4" cols="40" wrap="virtual">本人性格热情开朗，待人友好，为人诚实谦虚...</textarea>
</td></tr>
<tr><td><input type="submit" value="注册"><input type="reset" value="重置"></td></tr>
</table>
<input type="hidden" name="hiddenField2" id="hiddenField2" value="1">
</form>
<hr width="100%" size="1" color="#170F0F">
<table align="center">
<tr><td><a href="tel:19838098981">电话联系我们</a>
<a href="sms:19838098981">短信联系我们</a>
<a href="mailto:abc@163.com">E-mail联系我们</a>
<a href="#dingbu">返回顶部</a></td></tr>
</table>
</body>
</html>
3455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
