這個簡歷,我還沒有完成接收圖片的功能。還沒有寫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;
}
頁面的美化特別重要。