《java web》实验报告
制作表单
一、实验目的
练习HTML的基本语句,设计简单的表单。
二、实验环境
Windows10操作系统,Microsoft记事本,谷歌浏览器。
三、实验内容与实验过程及分析(写出详细的实验步骤,并分析实验结果)
实验步骤:
实验十:制作表单
HTML页面代码:
<!DOCTYPE html>
<html>
<head>
<title>reg.html</title>
<meta name="content-type"charset=UTF-8>
<!--应用外部CSS文件 -->
<link rel="stylesheet"type="text/css"href="./test.css">
</head>
<body>
<div id="apDiv1"class="STYLE1"align="center"><font size="6">校园BBS系统</font></div>
<div id="apDiv2"class="STYLE3">
你尚未 <a href="login.html"target="_blank">登录
</a> |
<a href="reg.html"target="_blank">注册</a>
</div>
>><a href="index.html">论坛首页</a>
<form id="form1"name="form1"method="post"action="">
<table width="100%"
height="115"border="0"cellpadding="0"cellspacing="0">
<tr>
<td align="center"><span class="body">用户名:</span>
<label>
<input name="uname"type="text"id="textfield1"/>
</label></td>
</tr>
<tr>
<td align="center"><span class="body">密码:</span>
<label>
<input name="upass"type="password"id="textfield2"/>
</label></td>
</tr>
<tr>
<td align="center"><span class="body">重复密码:</span>
<label>
<input name="upass2"type="password"id="textfield3"/>
</label></td>
</tr>
<tr>
<td align="center">性别:<input type="radio"name="sex" value="nv">女 <input type="radio"name="sex"value="nan">男</td>
</tr>
<tr>
<td align="center">
<label>
<input type="submit"name="button"id="button"value="注册"/>
</lable></td>
</tr>
</table>
</form>
</body>
</html>
CSS文件:
@CHARSET"UTF-8";
<style type="text/css">
#apDiv1{
position: absolute;
left: 1px;
top:1px;
wodth: 800px;
height: 50px;
z-index: 1;
}
#apDiv2{
left: 1px;
top: 51px;
wodth: 800px;
height: 25px;
z-index: 2;
background-color: #e0f0f9;
}
.STYLE1{
font-family: "黑体";
font-weight: bold;;
font-size: 36px;
color: #3399cc;
}
.STYLE3{
color: #004c7d;
font-size: 12px;
}
<style/>
实验结果图为:
四、实验总结(每项不少于20字)
存在问题:不够熟练,关于页面布局的调整还有许多不足的地方。
解决方法:百度查询,解释及其定义,并从中进行学习。
仔细反思整个代码及书本的知识,查漏补缺
收获:在能力范围内进行适当的补充学习,并尝试自己创新书写程序设计。
教师批语。