资源描述
淮海工学院计算工程学院
实验报告书
课程名： Web应用开发技术
题 目： HTML表格与HTML表单
班 级：
学 号：
姓 名：
评语：
成绩： 指导教师：
批阅时间： 年 月 日
HTML表格与HTML表单
一 实验目的
l 掌握网页中插入表格数据的标记的用法。
l 掌握不规则表格的创建方法
l 掌握表格外观控制属性的应用
l 掌握HTML表单的作用、HTML表单的两种提交方法及各自的使用场合；
掌握不同类型表单元素的使用方法；二 实验内容和规定
实验内容：
1.创建网页文献sales.html，网页的标题为“ACME公司2023年销售输入”，使用合适的表格标记及属性显示ACME公司2023的4种产品4个季度的销售额。显示效果如下（单元格数据为随机值，可以使用font等标记设立颜色等外观样式）：
产品/季度
一季度
二季度
三季度
四季度
Sass
1000
1200
8000
3000
LESS
5000
2500
4850
Stylus
3000
3650
4900
Myth
500
650
600
1200
SubTotal
6500
7350
12500
15950
Total
￥423，000.00
2. 创建如下图所示的表单：
实验规定：
1.所有参与实验同学独立完毕“实验内容”部分，并记录实验环节和结果填写在“实验环节”、“实验结果”相应部分；
2.所有参与实验同学均需参阅资料，完毕实验报告“思考题”部分内容。
特别提醒：若实验报告出现雷同情况，所涉及同学均无相应成绩；
三 实验环节
实验代码：
1.
<html>
<head>
<title>ACME公司2023年销售输入</title>
</head>
<body>
<table border="1" bordercolor="red" >
<tr>
<th>产品/季度</th>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
<tr>
<td>Sass</td>
<td>1000</td>
<td>1200</td>
<td rowspan="2">8000</td>
<td>3000</td>
</tr>
<tr>
<td>Less</td>
<td rowspan="2">5000</td>
<td>2500</td>
<td>4850</td>
</tr>
<tr>
<td>Stylus</td>
<td>3000</td>
<td>3650</td>
<td>4900</td>
</tr>
<tr>
<td>Myth</td>
<td>500</td>
<td>650</td>
<td>600</td>
<td>1200</td>
</tr>
<tr bgcolor="red">
<td>Subtotal</td>
<td>6500</td>
<td>7350</td>
<td>12500</td>
<td>15950</td>
</tr>
<tr bgcolor="blue">
<td>Total</td>
<td colspan="4">￥423，000.00</td>
</tr>
</table>
</body>
</html>
2.
<html>
<head>
<title>实验三表单</title>
</head>
<body>
<form>
<table border="1">
<tr>
<th>Name</th>
<th>Value</th>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="youername" size="20"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male">Male</br>
<input type="radio" name="sex" value="female" checked="checked">Female</td>
</tr>
<tr>
<td>Eye color</td>
<td><select name="eyecolor">
<option selected="selected">green</option>
<option>blue</option>
<option>yellow</option></td>
</tr>
<tr>
<td>Check all that apply</td>
<td><input type="checkbox" name="check" value="1">Over 5 feet tall</br>
<input type="checkbox" name="check" value="3">Over 200 pounds</td>
</tr>
<tr>
<td colspan="2">Describe your athletic ability:</br>
<textarea name="ability" rows="7" cols="47"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Enter my information"></td>
</tr>
</table>
</form>
</body>
</html>
四 实验结果
五 思考题
1.使用HTML表格标记创建个人课程表，如下图所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>课程表</title>
</head>
<body>
<table border="1">
<tr height="10" align="center">
<th width="175"></th>
<th width="175">周一</th>
<th width="175">周二</th>
<th width="175">周三</th>
<th width="175">周四</th>
<th width="175">周五</th>
<th width="175">周六</th>
<th width="175">周日</th>
</tr>
<tr align="center">
<td>7:45<br/>1</td>
<td></td>
<td rowspan="2">计算机组成原理@Ⅲ216</td>
<td></td>
<td></td>
<td rowspan="2">计算机组成原理@Ⅲ214</td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>8:35<br/>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>9:30<br/>3</td>
<td rowspan="3">web应用开发技术@计105</td>
<td></td>
<td rowspan="2">数据库原理及应用@Ⅲ204</td>
<td rowspan="2">网球俱乐部@主操场</td>
<td rowspan="2">数据库原理及应用@Ⅲ204</td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>10:25<br/>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>11:15<br/>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>14:00<br/>6</td>
<td rowspan="2">计算机网络@Ⅲ-204</td>
<td rowspan="3">马克思主义基本理论概论</td>
<td></td>
<td rowspan="2">计算机网络@Ⅲ-204</td>
<td rowspan="2">大学英语（四）@N103</td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>14:50<br/>7</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>15:45<br/>8</td>
<td></td>
<td></td>
<td></td>
<td rowspan="2">web应用开发技术@计105</td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>16:40<br/>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
2. 创建HTML表单时何时使用GET提交，何时使用POST提交？
答：大规模数据传输时使用post小数据时使用get
3. 使用input标记可以创建的表单元素有哪些？如何创建？
答：有单行文本框，单选，多选，下拉框等，在网页中运用<input type=””>即可创建，type的值代表创建的控件。
4. 在HTML表单中label标记的作用是什么？如何应用label标记？
答：创建文本标签，使用时添加<lable></lable>即可
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
