这个简历,我还没有完成接收图片的功能。还没有写js验证功能,我会慢慢的修改,添加验证功能上去
这是首页( test.jsp)的一部分,有些没有显示出来
结果图(success.jsp)
text.jsp的代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2 style="padding-left: 175px">简历</h2>
<hr>
<div id="body_box">
<h3 align="center">个人简介</h3>
<hr>
<form action="success.jsp">
<div id="photo">
<div style="width: inherit;height: inherit;background-color: #0000FF;">半身照</div>
</div>
<ul>
<li>姓名:<input placeholder="李华"type="text" name="name">
<span class="mustW">*</span>
</li>
<li class="secondLi">性别:
<select name="sex">
<option></option>
<option>男</option>
<option>女</option>
</select>
<span class="mustW">*</span>
</li>
</ul>
<br>
<ul>
<li>学校:<input placeholder="清华大学"type="text" name="school">
</li>
<li class="secondLi">学历:
<select name="degree">
<option></option>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>专科</option>
<option>专科以下</option>
</select>
<span class="mustW">*</span>
</li>
</ul>
<br>
<ul>
<li>专业:<input placeholder="人力资源"type="text" name="profession"></li>
<li class="secondLi">兴趣爱好:<input placeholder="旅游"type="text" name="hobby"></li>
</ul>
<br>
<ul>
<li>电话:<input placeholder="1xxxxxxxxxx"type="text" name="phone"> <span class="mustW">*</span></li>
<li class="secondLi">家庭住址:<input placeholder="xx省xx市xx区xx街B栋xx"type="text" name="address">
<span class="mustW">*</span>
</li>
</ul>
<br><br>
<ul>
<li>学校经历:</li>
</ul>
<br>
<ul style="margin-left: 45px">
<li style="width: auto">
<textarea cols="4" role="5" style="width: 560px;height: 105px" name="schoolText"></textarea>
</li>
</ul>
<br><br>
<ul>
<li>社会经历:</li>
</ul>
<br>
<ul style="margin-left: 45px">
<li style="width: auto">
<textarea cols="4" role="5" style="width: 560px;height: 105px" name="socialText"></textarea>
</li>
</ul>
<br><br>
<ul>
<li>个人评价:</li>
</ul>
<br>
<ul style="margin-left: 45px">
<li style="width: auto">
<span class="mustW">*</span>
<textarea cols="4" role="5" id="accessOneself" style="width: 560px;height: 105px" name="OneselfText"></textarea>
</li>
</ul>
<br>
<br>
<div id="stb" align="center">
<input type="submit" value="提交">
<input style="margin-left: 35px" type="reset" value="取消">
</div>
</form>
<br>
</div>
</body>
</html>
(总的来说,我没有完全实现css与html的分离)
提交表单后,跳转到success.jsp。
success.jsp的代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<%
String name=request.getParameter("name");
String sex=request.getParameter("sex");
String school=request.getParameter("school");
String profession=request.getParameter("profession");
String degree=request.getParameter("degree");
String hobby=request.getParameter("hobby");
String phone=request.getParameter("phone");
String address=request.getParameter("address");
String schoolText=request.getParameter("schoolText");
String socialText=request.getParameter("socialText");
String OneselfText=request.getParameter("OneselfText");
%>
<div id="body_box">
<h3 align="center">个人简介</h3>
<hr>
<div id="photo">
<div style="width: inherit;height: inherit;background-color: #0000FF;">半身照</div>
</div>
<table>
<tr>
<td><div class="inputText">姓名:<span><%= name%></span></div></td>
<td><div class="inputText">性别:<span><%= sex%></span></div></td>
</tr>
<tr>
<td><div class="inputText">学校:<span><%=school%></span></div></td>
<td><div class="inputText">学历:<span><%= profession%></span></div></td>
</tr>
<tr>
<td><div class="inputText">专业:<span><%= degree%></span></div></td>
<td><div class="inputText">兴趣爱好:<span ><%= hobby%></span></div> </td>
</tr>
<tr>
<td><div class="inputText">电话:<span><%= phone%></span></div></td>
<td><div class="inputText">家庭住址:<span><%= address%></span></div> </td>
</tr>
</table>
<br><br>
<ul>
<li>学校经历:</li>
</ul>
<ul style="margin-left: 45px">
<li style="width: auto">
<div class="showText">
<%= schoolText%>
</div>
</li>
</ul>
<br><br>
<ul>
<li>社会经历:</li>
</ul>
<ul style="margin-left: 45px">
<li style="width: auto">
<div class="showText"><%= socialText%></div>
</li>
</ul>
<br><br>
<ul>
<li>个人评价:</li>
</ul>
<ul style="margin-left: 45px">
<li style="width: auto">
<div class="showText">
<%= OneselfText%>
</div>
</li>
</ul>
<br>
<br>
<br>
</div>
</body>
</html>
在success.jsp页面,java代码与html相结合。获取request请求,得到简历的信息,输出在该页面
下面我给出我的css代码,两个jsp页面共用一个css文件
test.css
#body_box{
margin-left: 160px;width: 950px;border: black 1px solid;
}
#photo{
width: 106px;height: 125px;float: right;margin-right: 55px;border: black 1px solid;
}
#body_box ul{
display: inline;
}
div ul li{
display: inline;line-height: 55px;margin-left: 45px;width: 360px;
}
.secondLi{
margin-left: 125px;
padding-left: 25px;
}
input,select{
width: 175px;
height: 30px;
}
.inputText{
display: inline;
width: 175px;
height: auto;
}
.mustW{
color: red;
}
/*主要是success.jsp的样式*/
.showText{
width: 590px;
height: 105px;
border: grey 1px solid;
margin-left: 115px;
}
table{
margin-left: 75px;
}
table tr td{
width: 275px;
height: 45px;
}
页面的美化特别重要。