三、表格布局与表单交互
3.1 表格概述
table把表格所有的标签包起来
3.1.1 表格的结构
结构：由行和列组成的二维表。如下图
3.1.2 表格的基本语法
| 标记形式 | 说明 |
| <table></table> | 表格标记 |
| <caption></caption> | 表格标题标记 |
| <th></th> | 表格表头标记 |
| <tr></tr> | 表格的行标记 |
| <td></td> | 表格的列标记 |
上面的 “ 常用表格标记 ”表格中的标记，都是成对标记。
语法：
<table>
<caption>表格标题</caption>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<tr>
</table>
(1)<table>表示表格开始，</table>表示表格结束。<table></table>中包含了一个表格的所有内容。
(2)<caption>表示标题开始，<capton>表示标题结束。使用caption 标记可以给表格添加标题，该标题应位于 table 标记与 tr 标记之间的位置。
(3)<tr>表示行的开始，</>表示行结束。
(4)<th>表示表头开始，</th>表示表头结束。表头常常作为表格的第1行或者第1列，用来对表格单元格的内容的说明，表头的文字一般居中、加粗显示。
例题：设计名单表
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table>
<caption><h2>名单表</h2></caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</body>
</html>
3.2 表格属性的设置
3.2.1 表格边框属性
| 边框属性 | 说明 |
| borde | 表示表格边框粗细 |
| bordercolor | 表示表格边框颜色 |
| bordercolorlight | 表示表格亮边框颜色（左上边） |
| bordercolordark | 表示表格暗边框颜色（右下边） |
亮边框和暗边框的记忆方法：假设光源在左上方。如下图
- (1)border属性。用于设置边框的粗细，单位是像素。
- (2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
- (3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效
- (4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性
width：可以设置表格的宽度，其单位可以是长度也可以是百分比。
height：可以设置表格的高度，其单位可以是长度也可以是百分比。
设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。（即按比例缩放）
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor=" " background= " " >……</table>
- (1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色
- (2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
- (3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
例如：设置表格边框属性。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<h4 align="center">设置表格边框、背景</h4>
<table align=" center" width=" 700px" height=" 150px"
border= " 15" bordercolor=" black" bordercolorlight=" #f0000" bordercolordark = " #6600ff" bgcolor=" #99cccc" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在院系</th>
</tr>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
<hr>
<table align= " center" border=" 15px" bordercolor=" grey" width=" 700px" height=" 150px" background= " img/school.png" bgcolor= " #99cccc" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在院系</th>
</tr>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
</body>
</html>
运行效果
上图第二表格即设计了表格的背景颜色，又设计了背景图像，但背景图像覆盖了背景颜色。
3.2.4 表格边框样式属性
frame属性：可以改变表格边框的样式。
rules属性：可以改变表格内部边框的样式
语法:
<table frame=" " rules=" ">……内容</table>
说明:frame 和rules 属性值及说明如下表
例如：设置边框样式
运行效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table align = " center" border=" 2" bordercolor=" blue" width=" 400px" height=" 120px" frame=
"hsides" rules = " all" >
<caption><b>表格边框样式定义</b></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>所在院系</th>
</tr>
<tr>
<td>1616010218</td>
<td>李明</td>
<td>信息学院</td>
</tr>
<tr>
<td>1416020109</td>
<td>王丹</td>
<td>管理学院</td>
</tr>
</table>
</body>
</html>
3.2.5 表格单元格间距、单元格边距属性
- （1）cellspacing属性可以改变表格中单元格之间的间隔，使网页中的表格内容稍微松散一些。cellspacing值的单位为像素或百分比，默认值为2px。
- cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。cellpadding值的单位为像素或百分比。
语法
<table cellspacing=" " cellpadding=" " >
</table>
例如：设置单元格间距、边距。
第一个表格，cellspacing的值更大，单元格之间的距离更宽，单元格中的内容与内部边框之间的距离更窄。
第二个表格，cellpadding的值更大，单元格之间的距离更窄，单元格中的内容与内部边框之间的距离更宽。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="5px" cellspacing="5px" >
<caption>名单表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
</table>
<br />
cellspacing属性可以改变表格中单元格之间的间隔
<br />
<hr />
<table border="5px" cellpadding="5px" >
<caption>名单表</caption>
<tr align="center" > <!--cellpadding="10px" -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<th>1</th>
<th align="center" >张三</th>
<th>男</th>
</tr>
<tr >
<th>1</th>
<th>李四</th>
<th>男</th>
</tr>
</table>
<br/>
cellpadding属性可以增加表格单元格的内容与内部边框之间的距离
</body>
</html>3.2.6 表格水平对齐属性
可以通过设置表格标记的align属性，可以设定表格在水平向上的对齐方式。align属性默认为left。
语法：
<table align=" left | center | right ">……</table>
3.2.7 设置表格的（tr）标记行的属性
tr 标记的属性用于设置表格某一行的样式。通过<tr>标记的 align属性可以设置行内容的水平对齐方式。通过t标记的 valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:
<table align =" center" >
<tr align=" left | center | right" valign=" top l middle l bottom" >
<td>···</td>
</tr>
</table>
注意：对某个单元格单独使用，遵循就近原则。
例如：设置表格行内对齐属性，效果如下。第三个表格是设置的是对整个表格的对齐
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table border="5px" cellspacing="5px">
<caption>名单表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
</table>
<table border="5px" width="300px" height="150px">
<caption>名单表</caption>
<tr align="center" valign="top">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center" valign="middle">
<th>1</th>
<th align="center" valign="middle">张三</th>
<th>男</th>
</tr>
<tr align="left" valign="top"> <!-- 对某个单元格单独使用，遵循就近原则 -->
<th>1</th>
<th>李四</th>
<th>男</th>
</tr>
</table>
<table border="5px" align="center" >
<caption>名单表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</body>
</html>3.2.8 设置单元格的属性
td标记的属性用于设置表格单元格的显示风格
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格 td 标记的rowspan 属性可以设置单元格跨行合并（纵向合并）。
语法:
<td rowspan=" 行数 ">…</td>
说明：rowspan属性可以设置单元格跨行合并。通过rowspan="n"(n是正整数)，可以设置单元格跨n行合并。
3.2.9.2 单元格跨列
使用单元格d标记的colspan属性可以设置单元格跨列合并（横向合并）。
语法:
<td colspan="列数" >…</td>
说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列合并。
例题：设置单元格合并，效果如下图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置单元格跨列、跨行属性</title>
</head>
<body>
<h3 align="center">设置单元格跨列、跨行属性</h3>
<table border="1" width=" 500px" align="center" bordereolor= " #3366ff">
<caption>专业研讨会日程安排</caption>
<tr align=" center" >
<td colspan="2">上午</d>
<td colspan="2">下午</ud>
</tr>
<tr >
<td>8:00-10:00</td>
<td>10:10-12:00 </td>
<td>14:00-16:00</td>
<td>16: 10-18:00</td>
</tr>
<tr align = " cenler" >
<td rowspan="2">学校领导讲话 </td>
<td>大会主题报告</td>
<td>行业企业专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr align= " center" >
<td>专家报告</td>
<td>分组讨论</td>
</tr>
<tr align= " center" >
<td colspan="4">全天参观人工智能实训中心</td>
</tr>
</table>
</body>
</html>3.3 表格嵌套
表格嵌套可以设计比较复杂且美观的页面效果，但表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
语法:
<table>
<tr>
.....
</tr>
<tr>
<td> <!--单元格内嵌表格-->
<table> ..... </table>
</td>
</tr>
</table>
例题：利用表格布局页面，效果如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套表格布局页面</title>
<style>
body
{
font-size:36px;
}
</style>
</head>
<body>
<h4 align="center">嵌套表格布局页面</h4>
<table width=" 660px" border=" 1" align="center" bordercolor= " #3333ff" >
<tr>
<td height= " 100" >
<table width=" 100%" border=" ]" bordercolor= " red" ><tr height=" 50" align=" center" >
<td rowspan =" 2" width =" 100" >logo</td>
<td>广告条</td>
</tr>
<tr height=" 50" align=" center" >
<td>导航</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=" 300" >
<table width=" 100%" border=" 1" bordercolor=" #33ff99" >
<tr align= " center" >
<td height="300" widt="30%">左栏目</td>
<td height="300"width="70%">正文内容</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td height="100">版权信息</td>
</tr>
</table>
</body>
</html>3.4 表单
表单是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成：一个是客户端包含的表单页面，用于填写浏览者进行交互的信息;另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输人信息，然后将这些信息提交给服务器，服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。
3.4.1 表单标记
表单 form 标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
语法:
<form method="post" action="">
<input type="text" name=" "/>
<textarea name=" " rows=" " cols=" " >......</textarea>
<select name=" ">
<option value=" " selected></option>
<option value=" "></option>
</select>
</form>
说明：<form>和</form>之间可包含各种表单信息输入标记。
表单标记的主要属性如下表。
例如：表单的应用，效果图如下
解析：
该表单的名称为form1，提交方式为post，处理程序为form_ acton. jsp，编码方式为 form_action. jsp。另外还定义了单行文本输人框，用于输人学生的姓名和课程成绩，定义了一个提交按钮和一个重置按钮。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<form name ="form1" method="post" action=" form_action. jsp" enctype = "text/plain" >
<h3>输入课程成绩</h3>
姓名:<input type=" text"/><br/>
网页设计:<input type="text" size="15"/>
数据结构:<input type="text"size="15"/>
<br/><br/>
<input type="submit"value="成绩提交"/> <!--提交按钮-->
<input type="reset" value="成绩重置"/> <!--重置按钮-->
</form>
</body>
</html>3.4.2 定义域和域标题
利用 fieldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果或者可创建一个子表单来处理这些元素。
语法:
<form>
<fieldset>
<legend align=" left | center | right ">域标题内容</legend>
</fieldset>
</form>
其中<legend> 标签用于定义表格（<table>）中的一个字段集（fieldset），它通常与 <fieldset> 标签一起使用，用于提供表单控件的标题或描述。
说明：fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记；有一个对齐 align属性。
例题：域和域标题的标记的应用，运行效果如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义域和域标题示例</title>
</head>
<body>
<form>
<fieldset>
<legend align="center">基本信息</legend>
姓名：<input name="name" type="text"/>
性别：<input name="sex" type="text"/>
</fieldset>
<fieldset>
<legend align=" center ">其他信息</legend>
身高：<input name="height" type="text"/>
体重：<input name="weight" type="text"/>
</fieldset>
</form>
</body>
</html>3.4.3 表单信息输入
| 属性 | 取值 | 说明 |
| name | name | 定义 input 元素的名称 |
| type | text | password | checkbox | radio | image | submit | reset | button | file | hidden | 规定 input 元素的类型。text 为单行文本输人框，password 为密码输入框，checkbox为复选框，radio为单选按钮，image为图像，reset为重置按钮，button 为普通按钮，file 为文件选择框，hidden 为隐藏框 |
3.4.3.1 单行文本输入框
单行文本输入框的 input 标记的type 属性值为text，可以实现向表单中插人一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。
语法:
<input name=" " type=" text " maxlength=" " size=" " value=" " readonly/>
单行文本输人框的主要属性见下表。
| 属性 | 取值 | 说明 |
| name | name | 定义 input 元素的名称 |
| maxlength | number | 规定输入字段中的字符的最大长度 |
| size | number_of_char | 定义输入字段的宽度。其值小于或等于最大长度 |
| value | value | 规定 input 元素的默认值 |
| readonly | readonly | 规定文本框中内容只读，不能修改和编辑 |
3.4.3.2 密码输入框
密码输入框中 input 标记的 type 属性值为 password，可以实现向表单中插入一个密码输人框。密码输人框中可以输人任意类型的数据，与单行文本输人框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“ ● ”所取代，这样设计可以保障用户输入的密码不被泄露。
语法:
<input name=" " type= " password" maxlength=" " size= " " />
说明:
密码输人框的主要属性有name，maxlenth和size，取值及说明与单行文本输人框
相同。
例题：用户输入信息，效果如下图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入用户信息</title>
</head>
<body>
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain" >
用户名：<input name="user" type="text" value ="普通用户" maxlength="20" size="10" />
密码：<input name="password" type="password"> <br />
性别：<input type="radio" name="password" >男
<input type="radio" name="password">女
</form>
</body>
</html>- 在此题中，插入两个单行文本输入框和两个单选按钮（3.4.3.4中会详细讲解）
- 用户名中：
name属性指定了输入框的名称为 "user"。这个名称会在表单提交时作为键值对中的键发送到服务器。并定义最大长度为 20、显示宽度为10，若超出宽度时，输入内容向左移动，直到达到最大长度为止，此文本框的默认值为普通用户。
3.4.3.3 复选框
含义：顾名思义，复选框就是在网页上设置多项选择。
复选框中input 标记的 type 属性值为 checkbox，可以实现向表单中插人一个复选框。
语法：
<input name= " " type= " checkbox" value=" " checked/>
复选框的主要属性如下表
由于复选择框可以支持多选，每一个复选框都是不同的，一组复选框的所有name 属性应该不同，value 属性值也可以不同。
3.4.3.4 单选按钮
单选按钮中 input 标记的type 属性值为 radio，可以实现向表单中插入一个单选按钮。
语法:
<input name=" " type="radio" value="" checked/>
说明:单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值可以不同
例题：复选框与单选按钮的应用，效果如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入用户信息</title>
</head>
<body>
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain" >
用户名：<input name="user" type="text" value ="普通用户" maxlength="20" size="10" readonly/>
密码：<input name="password" type="password"> <br />
性别：<input type="radio" name="password" >男
<input type="radio" name="password">女 <br />
爱好：<input name="n1" type="checkbox" value="篮球" checked/>篮球
<input name="n1" type="checkbox" value="乒乓球" checked/>乒乓球
<input name="n1" type="checkbox" value="足球" />足球
</form>
</body>
</html>代码讲解
- readonly：此文本框里的值不能修改
- checked：预选项 （事先勾选）
- value：此题中设置了输入框的默认值为 "普通用户"
3.4.3.5 图像按钮
图像按钮中 input 标记的 type 属性值为 image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过 src 属性加载图像。在前面的《网页制作的基础习题》中讲解了插入图片的两种方法。
语法:
<input name=" " type="image" src=" " width="" height=" "/>
图像按钮主要属性如下图：
例题：在网页中使用图像按钮，效果如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" >
<title>图像按钮应用</title>
<style type = "text/css" >
body {
text-align:center;
}
input {
width:150px;
height:150px;
}
</style>
</head>
<body>
<form>
<h3>Play Game</h3>
<input type= "image" name="start" src ="img/start_game.png" align="center" />
<input type="submit" value=" 提交 "/>
</form>
</body>
</html>
素材：
3.4.3.6 提交按钮
可以实现向表单中插入一个提交按钮，提交按设置 input 标记的 type 属性值为 submit，钮用于将表单的信息提交至服务器进行处理，
语法:
<input name ="" type="submit" value="提交"/>
提交按钮的主要属性如下表
在表单中插入提交按钮时，如果不设置属性value的值，它的初始值是“ 提交查询按钮 ”。所以要给 value 属性赋值。
3.4.3.7 重置按钮
设置 input 标记的 type 属性值为 reset，可以实现向表单中插人一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
<input name=" " type= "reset" value=" "/>
说明: 重置按钮的属性主要有name和 value，其属性、取值及说明与提交按钮的相同。
3.4.3.8 普通按钮
普通按钮中的 input 标记的 type 属性值为 button，可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name="" type="button" value=" " οnclick=" "/>
普通按钮的属性如下表
例题：三种按钮的应用，效果如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" >
<title>三种按钮的应用</title>
<style type="text/css">
input{
width:100px ;
height:50px;
}
body { text-align:center; }
fieldset{
width:440px;
height:240px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>三种按钮的应用</legend>
<h3>请输入用户信息:</h3>
用户名:<input type="text" name="username" size="10"/>
密码:<input type="password" name="password" size ="10"/><br/><br>
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="重置"/>
<input type ="button" name="button" value=" 注册新用户" onclick="javascript:alert(
'注册新用户';"/>
</fieldset>
</form>
</body>
</html>
3.4.3.9 文件选择框
设置 input 标记的 type 属性值为 fle，可以实现向表单中插人一个文件选择框
语法:
<input name=" " type="file" value=""/>
说明:
name，定义input 标记的名称。页面上会自动添加一个文本输人框和一个“浏览······”按钮。单击“浏览···”按钮可以从“选择要加载的文件” 对话框选择某一个文件 “，然后自动将文件名称回填到文本输入框中。
3.4.3.10 隐藏框
设置 input 标记的 type 属性值为 hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的
语法:
<input name=" " type=" hidden" value=" "/>
隐藏框的属性如下表
3.4.4 多行文本输入框
textarea 标记可以向表单中插入多行文本输人框。多行文本输人框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
语法:
<textarea name="" rows="" cols="" wrap=""/>初始信息内容</textarea>
说明：多行文本输入框 textarea标记是成对标记，其主要属性如下表所示。默认情况下，当用户在文本区域中输人文本后，浏览器会将它们按照输入时的状态发送给服务器。只有在用户按下Enter键的地方生成换行。
例题：数据征求意见表，效果如下图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" >
<title>多行文本框的输入应用</title>
</head>
<body>
<form>
<h3>请填写您的表贵意见:</h3>
<textarea name="info" rows="4" cols="50" wrap="virtual"/>
</textarea>
</form>
</body>
</html>
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用select 和 option 标记来在表单中插入下拉菜单和列表项。
语法:
<select name=" " size="" multiple>
<option value="" selected>文字信息1</ option>
<option value="">文字信息 2</option>
······
</select>
说明:select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记与 option 标记必须配合使用。每一选项必须指定一个显示的文本和一个 value值，显示文本通常附在 option 标记后面。它们的属性、取值及说明如下表 。
例题：下拉列表框的应用，效果如下图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" >
<title>下拉文本框的应用</title>
</head>
<body>
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
<br/>
<h3>请选择工作:</h3>
<select name="job">
<option value="s1" >前端</option>
<option value="s2" selected>后端</option>
<option value="s3">运维</option>
<option value="s4">测试</option>
</select>
</form>
</body>
</html>
3.5 综合案例——表格与表单
案例1——达维工作室“ 联系我们 ”子页
页面效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室---联系我们</title>
<style type="text/css">
.chu{
font-weight:bold;
}
.zi1{
font-weight:微软雅黑;
font-size:20px;
font-weight:bold;
color:#ED630A;
}
.zi2{
font-family:微软雅黑;
font-weight:bold;
color:#F60;
text-decoration:underline;
}
.zibai{
font-family:微软雅黑;
color:#FFF;
}
body{
background-image:url(img/bj.jpg);
}
</style>
</head>
<body>
<table width="1190" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="1190" border="0" align="center" cellpadding="O" cellspacing="5">
<tr>
<td width="100" align="center" valign=" middle" bgcolor="#FFFFFF">
<img src="img/logo.jpg" alt="" width ="100" height="63"/></td>
<td width="100" align="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">网站首页</td>
<td width="100" align ="center"valign =" middle" bgcolor ="#FFFFFF" class="zi1">关于我们</td>
<td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
<td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
<td width="100" align=" center" valign =" middle" bgcolor =" #FFFFFF" class="zi1">设计理念</td>
<td width="100" align="center" valign =" middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
<td width="100" align ="center" valign =" middle" bgcolor ="#FFFFFF" class="zi1">联系我们</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width=" 100%"border="0" cellspacing="20" cellpadding="0">
<tr>
<td height="318"> </td>
<td widih="280" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="20">
<tr>
<td height="30" align="center" bgcolor="aaFFFFF" class="zi1">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#FFAF03">
<p class="zibai">地址：XX省XX市XXXXXXXX<br/>
电话：0750-XXXXXX<br/>
传真:0750-XXXXXX<br />
QQ:12345678<br />
电子邮箱：<br />
123@163.com<br/>
工作室网站：<br/>
www.XXXX.com</p >
</td>
</tr>
</table>
</td>
<td width="280" valign="top">
<table width="100%" border="0" cellspacing ="0" cellpadding="20">
<tr>
<td height="30" align="center" bgcolor="#66E000" class="zil">关于我们</td>
</tr>
<tr>
<td height="278" valign="top" bgcolor="#FC880D">
<p class="zibai">达维工作室是专业事互联网相关开发的公司。<br/>
专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程……</p>
<p class="zibai"> </p>
<p class="zibai chu">更多>></p>
</td>
</tr>
</table>
</td>
<td width="280"><!---->
<table width =" 100%" border="0" cellspacing ="0" cellpadding ="20">
<tr>
<td height="30" align="center" bgcolor="#0888FF" class="zil">团队合作</td>
</tr>
<tr>
<td height="332" valign="top" bgcolor="#66A00E">
<p class="zi2">我们的团队:</p>
<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需关设计师创意的思维模式，提供最适合的设计方案。</p>
<p class="zi2">我们的承诺：</p>
<p class=“zibai">本工作室设计与制作的网站均属原创、不套用网上的任何接版根据每个公司特点，设计出属于客户……</p >
<p class="zibai"> </p>
<p class ="zibai chu">更多 >></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>素材：
| ||||||||||
|
案例2——用户注册信息
页面效果：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册信息</title>
<style type="text/css">
fieldset{
width:700px;
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="forml" id="forml">
<fieldset>
<legend>用户注册信息</legend>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input type="text" name="textfield" id="textfield"/></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right">确认密码：</td>
<td><input type="password" name="textfield3" id="textfield3"/></td>
</tr>
<tr>
<td width="200" align="right">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked="checked"/>
男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/>
<input type="radio" name="radio" id="radio2" value="radio2"/>
女<img src="img/Female.gif" width="23" height="21" align="absmiddle"/></td>
</tr>
<tr>
<td width="200" align="right">出生年月：</td>
<td><input name="textfield4" type="text" id="textfield4" size="12"/>年
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
月</td>
</tr>
<tr>
<td width="200" align="right">业余爱好：</td>
<td><input type="checkbox" name="checkbox" id="checkbox"/>看书
<input type="checkbox" name="checkbox2" id="checkbox2"/>上网
<input type="checkbox" name="checkbox3" id="checkbox3"/>打球
</td>
</tr>
<tr>
<td width="200" align="right" >相片：</td>
<td height="25"><input type="file" name="fileField" id="fileField"/></td>
</tr>
<tr>
<td width="200" align="right">意见或建议；</td>
<td>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="button" id="button" value="提交"/>
<input type="reset" name="button2" id="button2" value="重置"/>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>