实验一：ＨＴＭＬ应用
HTML学习网站推荐：https://www.w3school.com.cn/html/index.asp
实验内容：
请用HTML标签，表单做出以下效果
实现代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>新用户注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<datalist id="学历">
<option value="小学">
<option value="初中">
<option value="高中">
<option value="本科">
<option value="硕士">
<option value="博士">
</datalist>
<style type="text/css">
.a {
font-family: "microsoft sans serif";
}
.b{
font-family: "microsoft yahei";
}
.c{
font-family: "SimSun";
}
.d{
font-family: "SimHei";
}
.e{
font-family: "\5FAE\8F6F\96C5\9ED1";
}
</style>
</head>
<body class="b">
<h1 class ="a"><center><font color="red">新用户注册</font></center></h1>
<h2 class="c"><center><font color = "blue">请准确填写个人信息，以使我们更好的为你服务</font></center></h2>
<center>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
<form id="form1" name="forme1" method = "post" action = "">
<table border="1" bordercolor="#FF">
<tr><td colspan="2">注册信息()</td></tr>
<tr><td>用户名</td><td><input type="text" name="user name" id="user name"></td></tr>
<tr><td>密码</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td>密码确认</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td>性别</td><td><input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female" > 女 </td></tr>
<tr><td>个人爱好</td><td>
<input type="checkbox" name="hobby" value="movie"> 电影
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="coding"> 编程 <br>
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="other"> 其他 </td></tr>
<tr><td>学历</td><td><input list="学历" name="学历"></td></tr>
<tr><td>备注</td><td><textarea name="message" rows="3" cols="30"></textarea></td></tr>
<tr><td colspan="2"><center><input type="submit" value="提交"> <input type="reset" value="重置">
</center></td></tr>
</table>
</form>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
</center>
</body>
</html>
|
初步实现效果：
第一次优化后代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>新用户注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<datalist id="学历">
<option value="小学">
<option value="初中">
<option value="高中">
<option value="本科">
<option value="硕士">
<option value="博士">
</datalist>
<style type="text/css">
.a {
font-family: "microsoft sans serif";
}
.b{
font-family: "microsoft yahei";
}
.c{
font-family: "SimSun";
}
.d{
font-family: "SimHei";
}
.e{
font-family: "\5FAE\8F6F\96C5\9ED1";
}
</style>
</head>
<body class="b">
<h1 class ="a" style="text-align:center">新用户注册</h1>
<h2 class="c" style="text-align:center">请准确填写个人信息，以使我们更好的为你服务</h2>
<center>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
<form id="form1" name="forme1" method = "post" action = "">
<table border="1" bordercolor="#FF">
<tr><td colspan="2">注册信息()</td></tr>
<tr><td>用户名</td><td><input type="text" name="user name" id="user name"></td></tr>
<tr><td>密码</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td>密码确认</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td>性别</td><td><input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female" > 女 </td></tr>
<tr><td>个人爱好</td><td>
<input type="checkbox" name="hobby" value="movie"> 电影
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="coding"> 编程 <br>
<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="other"> 其他 </td></tr>
<tr><td>学历</td><td><input list="学历" name="学历"></td></tr>
<tr><td>备注</td><td><textarea name="message" rows="3" cols="30"></textarea></td></tr>
<tr><td colspan="2"><center><input type="submit" value="提交"> <input type="reset" value="重置">
</center></td></tr>
</table>
</form>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
</center>
</body>
</html>
|
第二次优化后代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新用户注册</title>
<style type="text/css">
.a {
font-family: "microsoft sans serif";
}
.b{
font-family: "microsoft yahei";
}
.c{
font-family: "SimSun";
}
.d{
font-family: "SimHei";
}
.e{
font-family: "\5FAE\8F6F\96C5\9ED1";
}
</style>
</head>
<body class="b">
<center>
<form id="form1" name="forme1" method = "post" action = "Register.jsp">
<h1 class ="a" style="text-align:center"><font color = "red">新用户注册</font></h1>
<h2 class="c" style="text-align:center"><font color = "blue">请准确填写个人信息，以使我们更好的为你服务</font></h2>
<span style="width:1050px;border-bottom:1px red dashed;"></span>
<table border="1" bordercolor="#FF" align = "center">
<tr>
<td colspan="2" align = "left">注册信息()</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user name" id="user name">
</td>
</tr>
<tr>
<td>密 码</td>
<td>
<input type="password" name="password1">
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input type="password" name="password2">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female" > 女
</td>
</tr>
<tr>
<td>个人爱好</td>
<td>
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="coding">编程<br>
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="other">其他
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="xueli">
<option value ="XX">小学</option>
<option value ="CZ">初中</option>
<option value="GZ">高中</option>
<option value="BK" selected>本科</option>
<option value ="SS">硕士</option>
<option value ="BS">博士</option>
</select>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<textarea name="message" rows="3" cols="30">请输入详细说明...</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
<span style="width:1050px;border-top:1px red dashed;"></span>
</form>
</center>
</body>
</html>
|
第三次优化，加入提交反馈页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新用户注册</title>
<style type="text/css">
.a {
font-family: "microsoft sans serif";
}
.b{
font-family: "microsoft yahei";
}
.c{
font-family: "SimSun";
}
.d{
font-family: "SimHei";
}
.e{
font-family: "\5FAE\8F6F\96C5\9ED1";
}
</style>
</head>
<body class="b">
<center>
<form id="form1" name="forme1" method = "post" action = "Register.jsp">
<h1 class ="a" style="text-align:center"><font color = "red">新用户注册</font></h1>
<h2 class="c" style="text-align:center"><font color = "blue">请准确填写个人信息，以使我们更好的为你服务</font></h2>
<span style="width:1050px;border-bottom:1px red dashed;"></span>
<table border="1" bordercolor="#FF" align = "center">
<tr>
<td colspan="2" align = "left">注册信息()</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user name" id="user name">
</td>
</tr>
<tr>
<td>密 码</td>
<td>
<input type="password" name="password1">
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input type="password" name="password2">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女" > 女
</td>
</tr>
<tr>
<td>个人爱好</td>
<td>
<input type="checkbox" name="hobby" value="电影">电影
<input type="checkbox" name="hobby" value="音乐">音乐
<input type="checkbox" name="hobby" value="编程">编程<br>
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="其他">其他
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="xueli">
<option value ="小学">小学</option>
<option value ="初中">初中</option>
<option value="高中">高中</option>
<option value="本科" selected>本科</option>
<option value ="硕士">硕士</option>
<option value ="博士">博士</option>
</select>
</td>
</tr>
<tr>
<td>备注</td>
<td>
<textarea name="message" rows="3" cols="30">请输入详细说明...</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
<span style="width:1050px;border-top:1px red dashed;"></span>
</form>
</center>
</body>
</html>
|
反馈页：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>提交</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String password1 = request.getParameter("password1");
String password2 = request.getParameter("password2");
if(password1.equals(password2)){
;//out.println("<script language=\"JavaScript\" >alert(\"密码输入正确 \")</script>");
}else{
out.println("<script language=\"JavaScript\" >alert(\"密码输入错误!请重新输入\")</script>");
out.println("<script language=\"JavaScript\" >location.href = 'MyJsp.jsp';</script>");
}
out. println("您的个人信息是:<br>");
out. println("姓名:"+request.getParameter("user name")+"<br>");
String sex = request.getParameter("sex");
String H[] = request.getParameterValues("hobby");
String xueli = request.getParameter("xueli");
out.println("性别:" + sex+"<br>");
for (int i=0; i<H.length; i++)
out.println("爱好:"+ H[i]+"<br>");
out.println("学历:"+xueli+"<br>");
%>
</body>
</html>
|
实验总结：
表单和表格嵌套使用，如果<form>写到<table>里边会出现增加行宽的结果，<form>标签需写到<table>标签外边。字体设置不推荐使用<font>、<center>标签，这种写法已被淘汰，建议使用CSS。
CSDN博文地址：https://blog.csdn.net/ChaoYang_183/article/details/104637628
