实验一:HTML应用

HTML学习网站推荐:https://www.w3school.com.cn/html/index.asp
实验内容:
请用HTML标签,表单做出以下效果

1

实现代码如下:

<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<datalist id="学历"> <!-- 用datalist标签做一个学历下拉菜单选项 -->
<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"> <!-- 整体用字体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>

初步实现效果:

2

第一次优化后代码如下:

<%@ 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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<datalist id="学历"> <!-- 用datalist标签做一个学历下拉菜单选项 -->
<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"> <!-- 整体用字体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"> <!-- 整体用字体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> <!-- 二级标题居中显示 -->

<!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3> --><!-- 俩头渐变透明的分割线 -->
<!-- <HR style="border-bottom:2 dashed #987cb9" width="50%" color= red SIZE=2> -->
<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>&nbsp;&nbsp;</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">电影&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="hobby" value="music">音乐&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="hobby" value="coding">编程<br>
<input type="checkbox" name="hobby" value="basketball">篮球&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="hobby" value="football">足球&nbsp;&nbsp;&nbsp;&nbsp;
<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="提交">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="重置">
</td>
</tr>
</table>
<span style="width:1050px;border-top:1px red dashed;"></span>
<!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3>--> <!-- 俩头渐变透明的分割线 -->
</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"> <!-- 整体用字体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> <!-- 二级标题居中显示 -->

<!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3> --><!-- 俩头渐变透明的分割线 -->
<!-- <HR style="border-bottom:2 dashed #987cb9" width="50%" color= red SIZE=2> -->
<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>&nbsp;&nbsp;</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="电影">电影&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="hobby" value="音乐">音乐&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="hobby" value="编程">编程<br>
<input type="checkbox" name="hobby" value="篮球">篮球&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="hobby" value="足球">足球&nbsp;&nbsp;&nbsp;&nbsp;
<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="提交">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="重置">
</td>
</tr>
</table>
<span style="width:1050px;border-top:1px red dashed;"></span>
<!-- <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="50%" color=#987cb9 SIZE=3>--> <!-- 俩头渐变透明的分割线 -->
</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

</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