第三章表格布局与表单交互

laymo

已于 2024-09-27 21:18:12 修改

阅读量582

点赞数 18

文章标签：前端 html

于 2024-09-27 17:31:34 首次发布

本文链接：https://blog.csdn.net/dhy_04/article/details/142377507

版权

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又有一个或多个单元格组成，用于放置数据或其它内容。

3.1.2 表格的基本语法

1.标题

2.表头

3.行

4.列

5.表格标题

3.2 表格属性设置

3.2.1 表格边框属性

属性：border、bordercolor、bordercolorlight、bordercolordark

~~bordercolorlight属性：只对边框左上边框生效~~

~~bordercolordark属性：只对边框右下边框生效~~

注：这两个代码在HBuilderX里已失效

3.2.2 表格的宽度和高度属性

属性：width、beight

当单元格无法正常存储内容的时候，宽度会生效，高度会失效

3.2.3 表格背景颜色与背景图像属性

属性：bgcolor、background

3.2.4 表格边框样式属性

frame属性可以改变表格边框的样式，rule属性可以改表表格内部边框的样式

属性：above、below、hsides、vsides、lhs、rhs、void、all、nome、rows、cols、groups、border

注：上述为frame和rules常见属性值

3.2.5 表格单元格间距、单元格边距属性

cellspacing属性可以改变表格单元格之间的距离，cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。

属性：cellspacing、cellpadding

3.2.6 表格水平对齐属性

属性：left、center、right

注：默认居左

3.2.7 设置表格的标记行的属性

属性值	说明	属性	说明
align	行内容水平对齐	bordercolor	行的边框颜色
valign	行内容垂直对齐	bordercolorlight	行的亮边框颜色
bgcolor	行的背景颜色	bordercolordark	行的暗边框颜色

属性align：left、right、center

属性valign：top、middle、botton

3.2.8 设置单元格的属性

属性值	说明	属性值	说明
align	单元格内容水平对齐	bordercolorlight	单元格的亮边框颜色
valign	单元格内容垂直对齐	bordercolordrak	单元格的暗边框颜色
bgcolor	单元格的背景颜色	rowspan	单元格跨行
background	单元格背景图像	colspan	单元格跨列
bordercolor	单元格的边框颜色	width	单元格宽度
height	单元格高度

3.2.9 表格单元格跨行、跨列属性

3.2.9.1单元格跨行

使用单元格td标记的rowspan属性可以设置单元格跨行合并。

语法：

3.2.9.2单元格跨列

使用单元格td标记的colspan属性可以设置单元格跨列合并。

语法：

3.3 嵌套表单

嵌套表单是一种常见的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。

3.4 表单

3.4.1 表单标记

属性	取值	说明
name	name	规定表单的名称
action	url	规定当提表单时，向何处发送表单数据
method	get \| post	规定如何发送表单数据
enctype	type	规定表单数据在发送到服务器之前应该如何编码

3.4.2 定义域和域标题

利用fieldest标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldest标记将表单内容的一部分打包，生成一组相关表单的字段。

语法：

</fielfest>

3.4.3 表单信息输入

3.4.3.1单文本输入框

属性	取值	说明
name	name	定义input元素的名称
maxlength	number	规定输入字段中的字符的最大长度
size	number_of_char	定义输入字段的宽度。其值小于或等于最大长度
value	value	规定input元素的默认值
readonly	readonly	规定文本框中内容只读，不能修改和编辑

3.4.3.2密码输入框

设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。

属性：type，name，maxlength

3.4.3.3复选框

属性	取值	说明
name	name	定义input标记的名称
value	value	规定input标记的值
checked	checked	预先选定复选框

3.4.3.4单选按钮

设置input标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可以利用单选按钮在网页上为某一选择设置多个单选项。

属性：name，type，value

3.4.3.5图像按钮

属性	取值	说明
name	name	定义input标记的名称
src	URL	定义已提交按钮形式显示的图像的URL
width	width	规定图像的宽度、单位为像素
height	height	规定图像的高度、单位为像素

3.4.3.6提交按钮

属性	取值	说明
name	name	定义input标记的名称
value	value	规定input标记的值

3.4.3.7重置按钮

设置input标记的type属性值为reset，可以实现向表单中插入一个重置按钮。

属性：name，type，value

3.4.3.8普通按钮

属性	取值	说明
name	name	定义input标记的名称
value	value	规定input标记的值
onclick	事件代码	绑定事件代码、自定义函数或直接使用脚本代码

3.4.3.9文件选择框

设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框

属性：name，file

3.4.3.10隐藏框

属性	取值	说明
name	name	定义input标记的名称
value	value	规定input标记的值

3.4.4 多行文本输入框

属性	取值	说明
name	name	定义input标记的名称
rows	number	规定文本区内的可见行数
cols	number	规定文本区的可见宽度
wrap	wrap\|virtual\|physical\|off\|soft\|hard	wrap属性规定当在表单中提交时，文本区域中的文本如何换行

3.4.5 下拉列表框

标记名称	属性	取值	说明
select	name	name
	size	number
	multiple	multiple
option	value	value
option	selected	selected

3.5 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>达维工作室————联系我们</title>
		<style type="text/css">
			.chu{
				font-weight:bold;
			}
			.zi1{
				font-family:"微软雅黑";
				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="0" 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="zil">网站首页</td>
									<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
									<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zil">团队合作</td>
									<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
									<td width="100" align="center" valign="middle" bgcolor="#FFFFEF" 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="zil">联系我们</td>
								</tr>
							</table>
						</td>
					</tr>
				<tr>
					<td>
						<table width="100%" border="0" cellspacing="20" cellpadding="0">
							<tr>
								<td height="318">&nbsp;</td>
								<td width="280" valign="top">
								<table width="100%" border="0" cellspacing="0" cellpadding="20">
							<tr>
								<td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
							</tr>
								<tr>
									<td height="196" bgcolor="#FFAF03">
									<p class="zibai">地址:广东省江门市XXXXXXXXX<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="#FFFFFF" class="zi1">关于我们</td>
						</tr>
							<tr>
								<td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业从事互联网相关开发的公司。<br/>
									专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
									达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程···</p>
									<p class="zibai">&nbsp;</p >
									<p class="zibai chu"><a href="#">更多 &gt; &gt;</a ></p >
								</td>
							</tr>
						</table>
					</td>
					<td width="280">
						<table width="100%" border="0" cellspacing="0" cellpadding="20">
							<tr>
								<id height="30" align="center" bgoolor="#FFFFFF" class="zi1">团队合作</td>
							</tr>
							<tr>
							<td height="332" valign="top" bgcolor="#66A00E"><p class="zi2">我们的团队:</p >
							<p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。设计师创意的思维模式，提供最适合的设计方案。</p >
							<p class="zi2">我们的承诺:</p>
							<p cdass="zibai">本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司特点，设计出属于客户....</p>
							<p class="zibai">&nbsp;</p>
							<p class="zibai chu"><a href="#">更多 &gt;&gt;</a></p>
							</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</body>
</html>

<!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="multipar/form-data" name="form1" id="form1">
		<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" mame="textield2" id="texfield2"/></td>
		</tr>
		<tr>
			<td width="200" align="right">确认密码:</td>
			<td><input type="password" name="textield3" 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" widh="22" height="21" align="absmiddle"/>
			<input type="radio" name="radio" id="radio2" value="radio2"/>
			女<img src="img/Female.gif" width="23" heighr="21" align="absmiddle" /></td>
		<tr>
		<tr>
			<td width="200" align="right">出生年月:</td>
			<td><input name="textfield4" type="text" id="texfield4" 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="textarel" cols="45" rows="S"></textarea>
			</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
				<input type="submit" name="button" id= "button" value="提交">
				<input type="reset" name="button2" id= "buton2" value="重置">
			</td>
			</tr>
			</table>
			</fieldset>
			</form>
	</body>
</html>