| 实 验 目 的 | 掌握HTML表单作用，以及action和method属性； 掌握HTML输入域作用、类型、标签，以及name和value属性； 掌握$_REQUEST变量的作用、语法和使用； 掌握注释，以及变量的作用、命名、赋值和输出； 掌握PHP+HTML混合编程。 |
- 使用HTML表单设计和实现下图简历；
- 使用PHP实现简历数据验证功能，包括输出简历信息，验证姓名（非空）、手机长度，验证年龄（18-60岁）范围等；
- 尝试用中文显示性别、学历、校名和专业，以及显示技能和爱好多选项。
效果图：
首页：
简历制作页面：
首页代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简历制作</title><link rel="stylesheet" href="index.css">
</head>
<body><div class="box"><h1>简历制作</h1><form action="page2.php">姓 名：<input type="text" name="username" class="common" placeholder="请输入姓名"><br><br>性 别：<label><input type="radio" name="sex" id="" value="male" checked>男</label><label><input type="radio" name="sex" id="gender" value="female">女</label><br><br>年 龄：<input type="number" name="age" id="" class="common" placeholder="请输入年龄(18-60)"><br><br>电 话: <input type="text" name="phonenum" class="common" placeholder="请输入电话"><br><br>邮 箱: <input type="email" name="email" class="common" placeholder="必须@"><br><br>联系地址: <input type="text" name="address" class="common" placeholder="请输入联系地址"><br><br>邮 编: <input type="text" name="postcode" class="common" placeholder="请输入邮编"><br><br>学 历：<label class="pl"><input type="radio" name="degree" id="" value="junior" checked>大专</label><label class="pl"><input type="radio" name="degree" id="" value="undergraduate">本科</label><label class="pl"><input type="radio" name="degree" id="" value="master">硕士</label><label class="pl"><input type="radio" name="degree" id="" value="doctor">博士</label><br><br>毕业院校: <select name="school"><option value="hncst">海软</option><option value="hnrd">海热</option><option value="bd">北京大学</option><option value="qh">清华大学</option><option value="zkd">中国科学技术大学</option><option value="hd">海南大学</option></select><br><br>专 业: <select name="profession"><option value="software">软件</option><option value="kj">会计</option><option value="dm">动漫</option><option value="wd">舞蹈</option><option value="jd">机电</option></select><br><br>技 能:<label id="jn"><input type="checkbox" name="skill[]" value="driver" checked id="">开车</label><label id="jn"><input type="checkbox" name="skill[]" value="cook" id="">做菜</label><label id="jn"><input type="checkbox" name="skill[]" value="pinao" id="">弹琴</label><br><br>爱 好:<label id="jn"><input type="checkbox" name="love[]" value="dance" checked id="">跳舞</label><label id="jn"><input type="checkbox" name="love[]" value="sing" id="">唱歌</label><label id="jn"><input type="checkbox" name="love[]" value="chess" id="">下棋</label><label id="jn"><input type="checkbox" name="love[]" value="ball" id="">踢球</label><br><br>自我介绍：<br><textarea name="introduce" cols="55" rows="8" placeholder="请在此输入工作经历等内容...."></textarea><br><input type="reset" value="清空" class="btn1"><input type="submit" value="下一步" class="btn2"></form></div>
</body>
</html>首页CSS
*{margin: 0;overflow: 0;box-sizing: border-box;
}body {background-color: #252525;background: url(./images/OIP-C.jpg) no-repeat;background-size: cover;background-attachment: fixed;
}.box {width: 500px;/* height: 600px; */margin: 50px auto;border-radius: 15px;background-color: rgba(179, 197, 197,0.7);box-shadow: 5px 5px 1px 1px rgb(178, 226, 244);
}.box h1 {padding-top: 5px;font-weight: 400;text-align: center;
}.box form {padding-top: 20px;padding-left: 25px;
}.common {width: 300px;height: 30px;border-radius: 5px;border: #333;padding-left: 10px;
}#gender , #jn{margin-left: 15px;
}.pl {padding-left: 20px;
}
select {width: 200px;height: 25px;border-radius: 5px;font-size: 15px;background-color: #ececec;
}textarea {margin-top: 10px;
}.btn1,.btn2 {width: 200px;height: 40px;border-radius: 9px;border:0 solid #000;margin-top: 5px;margin-bottom: 15px;
}.btn2 {margin-left: 15px;
}
.btn1:hover,.btn2:hover{font-size: 20px;cursor: pointer;background-color: antiquewhite;
}简历制作页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css"><title>Document</title><style>body{background-color: slategray;}/* 表格 字体颜色 */table{color: rgb(226, 222, 222);}.coverage{width: 80%;margin: 0 auto;/* border: 5px solid white; */height: 700px;}/* 插入的图片 */.head img{width: 300px;margin: 0 10px;}/* 头部左边 照片浮动*/.head_left{float: left;/* margin-top: -12px; */}/* 头部右边 基本资料 */.head_right{/* float: right; */margin-left: 350px;}/* 标题 */h3{width: 136px;background-color: rgb(235, 226, 226);padding: 0 10px;font-size: 25px;border-radius: 10px;margin: 20px 0px;}/* 表格中的单元格 */table td{font-size: 18px;/* border: 1px solid white; */padding: 6px 0;}/* 将基本资料中的单元格分为左右两部分 *//* 左部分单元格 即姓名性别之类*/.tr_left{width: 100px;text-align: center;}/* 右部分单元格 即年龄的输出内容*/.tr_right{width: 280px;padding-left: 20px;}/* 中间盒子*/.main{padding: 0 10px;}/* 中间盒子输出内容 */.cover{/* background-color: white; */width: 96%;height:50px;border-radius: 10px;margin-left: 4%;font-size: 18px;color: rgb(226, 222, 222);}/* 自我评价输出内容 主要是自我评价内容多,高度多调了一下 */.cover_bottom{/* background-color: white; */width: 96%;height:80px;border-radius: 10px;margin-left: 4%;font-size: 18px;color: rgb(226, 222, 222);}/* 底部内容 */.bottom{margin-top: 3px;text-align: center;color: rgb(226, 222, 222);background-color: #7b8195;}</style>
</head>
<body>
<?php//获取姓名$username=$_REQUEST["username"];//获取性别$sex=$_REQUEST["sex"];//获取年龄$age=$_REQUEST["age"];//获取手机号$tel=$_REQUEST["phonenum"];//获取邮箱$email=$_REQUEST["email"];//获取邮编 $postcode=$_REQUEST["postcode"];//获取地址$address=$_REQUEST["address"];//获取学校$school = $_REQUEST['school'];//获取专业$profession=$_REQUEST['profession'];//获取学历$degree=$_REQUEST['degree'];//获取技能$skill=$_REQUEST['skill'];//获取爱好$love = $_REQUEST['love'];//获取自我介绍$introduce = $_REQUEST['introduce'];?><div class="coverage"><div class="head"><div class="head_left"><img src="./images/1.jpg" alt=""></div><div class="head_right"><h3><i class="fa fa-hand-o-right" style="font-size:36px"></i>基本资料</h3><table><tr><td class="tr_left">姓 名：</td><td class="tr_right"><?php//判空if (isset($username)) {echo $username;} else {echo '未输入姓名';}?></td><td class="tr_left">专 业：</td><td class="tr_right"><?phpswitch($profession){case "software":echo "软件";break;case "kj":echo "会计";break;case "dm":echo "动漫";break;case "wd":echo "舞蹈";break;case "jd":echo "机电";break;}?></td></tr><tr><td class="tr_left">性 别：</td><td class="tr_right"><?phpif($sex=='male'){echo "男";}else {echo '女';}?></td><td class="tr_left">学 历：</td><td class="tr_right"><?phpswitch($degree){case "junior":echo "大专";break;case "undergraduate":echo "本科";break;case "master":echo "硕士";break;case "doctor":echo "博士";break;}?></td></tr><tr><td class="tr_left">年 龄：</td><td class="tr_right"><?phpfunction val_age($input,$min,$max){$age=(int)$input;return $age>=$min && $age<=$max;}$min=18;$max=60;if(val_age($age,$min,$max)){echo $age;}else{echo "超出范围";}?></td><td class="tr_left">邮 编：</td><td class="tr_right"><?phpfunction val_post($postcode){return preg_match('/^\d{6}$/', $postcode);}if(val_post($postcode)){echo $postcode;}else{echo"无效邮编";} ?></td></tr><tr><td class="tr_left">邮 箱：</td><td class="tr_right"><?phpecho $email;?></td><td class="tr_left">联 系 电 话：</td><td class="tr_right"><?phpfunction val_tel($number){return preg_match('/^\d{11}$/', $number);}if(val_tel($tel)){echo $tel;}else{echo"无效手机号";}?></td></tr><tr><td class="tr_left">学 校：</td><td class="tr_right" colspan="3"><?phpswitch($school){case "hncst":echo "海软";break;case "hnrd":echo "海热";break;case "bd":echo "北京大学";break;case "qh":echo "清华大学";break;case "zkd":echo "中国科学技术大学";break;case "hd":echo "海南大学";break;}?></td></tr><tr><td class="tr_left">现居住地：</td><td class="tr_right" colspan="3"><?phpecho $address;?></td></tr></table></div></div><div class="main"><div class="main_1"><h3><i class="fa fa-hand-o-right" style="font-size:36px"></i>培训技能</h3><div class="cover"><?phpfor($i=0;$i<count($skill);$i++){switch($skill[$i]){case "driver":echo "开车"." " ;break;case "cook":echo "做菜"." ";break;case "pinao":echo "弹琴"." ";break;}}?> </div></div><div class="main_2"><h3><i class="fa fa-hand-o-right" style="font-size:36px"></i>兴趣爱好</h3><div class="cover"><?phpfor($i=0;$i<count($love);$i++){switch($love[$i]){case "dance":echo "跳舞"." " ;break;case "sing":echo "唱歌"." ";break;case "chess":echo "下棋"." ";break;case "ball":echo "踢球"." ";break;}}?></div></div><div class="main_3"><h3><i class="fa fa-hand-o-right" style="font-size:36px"></i>自我评价</h3><div class="cover_bottom"><?phpecho $introduce;?></div></div><div class="bottom">该简历由"敲会代码"小组万某人，孙某人，🐏某人制作完成</div></div></div>
</body>
</html>说明：此项目是笔者在学校的小项目，因为笔者的能力有限，可能会出现很多没有想到的问题，如果您在浏览或者运行代码的时候出现了问题，请您在评论区留言，笔者在看到后会在第一时间处理，谢谢。
