HTML简单表格表单设计实验（含代码）⽬录
⽬的和要求
掌握 HTML 语⾔的使⽤，例如：TABLE、FORM、FRAME、CSS 等。
必须使⽤到 CSS。
必须有 HTML5 元素。
电⼦邮件输⼊框必须有邮件格式输⼊验证，采⽤客户端验证⽅法。
内容和步骤
1、创建如下图所⽰的货品价格表：
2、创建如下图所⽰的⽤户留⾔表单：
代码
货品价格表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>货品价格表</title>
<style>
body {
background-color: azure;
}
h1 {
color: red;
font-family:"楷体";
font-weight:900;
}
table {
border:1px solid black;
}
th {
border:1px solid black;
background-color: aquamarine;
}
td {
border:1px solid black;
}
</style>
</head>
<body>
<h1>货品价格表</h1>
<table>
<tr>
<th>名称</th>
<th>编号</th>
<th>类别</th>
<th>单价</th>
<th>数量</th>
<th>备注</th>
<th>详情</th>
</tr>
<tr>
<td>电话机</td>
<td>1001</td>
<td>⼩家电</td>
<td>80</td>
<td>100</td>
<td>最低8折</td>
<td><a href="www.baidu">查看详情</a></td>
</tr>
<tr>
<td>MP3</td>
<td>1002</td>
<td>数码产品</td>
<td>480</td>
<td>20</td>
<td>最低8.5折</td>
<td><a href="www.baidu">查看详情</a></td>
<td><a href="www.baidu">查看详情</a></td>
</tr>
<tr>
<td>复读机</td>
<td>1003</td>
<td>⼩家电</td>
<td>198</td>
<td>10</td>
<td></td>
<td><a href="www.baidu">查看详情</a></td>
</tr>
html表格元素<tr>
<td>电⼦词典</td>
<td>1004</td>
<td>数码产品</td>
<td>196</td>
<td>10</td>
<td></td>
<td><a href="www.baidu">查看详情</a></td>
</tr>
</table>
</body>
</html>
⽤户留⾔表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>⽤户留⾔表单</title>
<style>
textarea {
border:1px solid black;
}
</style>
</head>
<body>
<h1>请填写留⾔</h1>
<form id="form" action="" method="post">
姓      ；名：
<input type="text" name="name"><br><br>
性      ；别：
<select form="form">
<option>男</option>
<option>⼥</option>
</select><br><br>
电      ；话：
<input type="tel" name="phone"><br><br>
电⼦邮件：
<input type="email" name="usremail"><br><br>
留      ⾔：<br>
<textarea rows="10" cols="30" form="form"></textarea>
<br><br>
<input type="submit">
<input type="reset" value="重写">
</form>
</body>
</html>
⼼得体会
本次实验我上⼿html编写了前端的⼀些基本功能页⾯，同时使⽤css层叠样式表进⾏了美化，前端语⾔和后端语⾔有很⼤的不同，但是都需要坚持不懈的努⼒。我相信⾃⼰⼀定会编写出出⾊的前端代码的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。