【前端开发】表格表单

最新推荐文章于 2024-07-30 11:48:07 发布

Q蕾

最新推荐文章于 2024-07-30 11:48:07 发布

阅读量3.9k

点赞数 8

分类专栏：前端开发 HTML 文章标签：前端开发 html

本文链接：https://blog.csdn.net/qq_37367702/article/details/102491350

版权

前端开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

一、表格

1.1表格结构

<table>
	<tbody>
		<tr>行
			<td>列</td>
		</tr>
	</tbody>
</table>

<tbody></tbody>标签没有加上时，浏览器会自动补上，但最好加上!显示

1.2 显示表格线条

border="1px"

1.3 去除空隙

cellspacing="0"

1.4 列宽

可通过设置width
每一列都要设置（依次顺序）<col width="200" />
一组表示6列 <colgroup span="6"width="100px">

1.5 行高

<tr height="10px"></tr>

1.6 居中

alight="center"

1.7 合并行单元格（设定几行为一行）

<td colspan=" "></td>

1.8 合并列单元格

<td rowspan=" "></td>
<th>加粗并水平居中的td</th>

1.9 一个实例（个人简历表格）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人简历</title>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<!--个人简历-->
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="200px" />
			<tr height="40px">
				<td colspan="8" align="center">个人简历</td>
			</tr>
			<tr height="40px" align="center">
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td rowspan="4">照片</td>
			</tr>
			<tr height="40px" align="center">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="center">
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="center">
				<td>毕业院校</td>
				<td colspan="5"></td>
			</tr>
			<tr height="40px" align="center">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>
	</body>
</html>

运行图片

二、表单

2.1 表单结构

<form action="" method="">
	
</form>

form必须有action属性，表示提交的地址
所有需要提交的数据，input必须有name属性
input按钮的文字，使用value属性表示
input标签需放在form标签内才能提交

2.2 表单控件

<input type=""/ value="">

常见type

text 文本框
password 密码框
button 按钮
radio 单选框
checkbox 复选框
submit 提交按钮
button普通按钮
reset 重置框
file 文件选择框

2.3 get请求&post请求 method

提交数据:post 隐密
获取数据:get
不建议混用！

两者区别：

get通常表示获取数据； post请求通常表示提交数据
get请求发送的数据都写在地址栏上，用户可见；post请求发送的数据用户不可见
get请求不能提交大量数据，但post可以。

2.4 一个实例（登录表单）

<form action="#" method="post">
			<table width="600px" border="1px" cellspacing="0">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
						<td align="right">用户名:</td>
						<td >
							<input type="text" name="username"/>
						</td>
					</tr>
					<tr height="40px">
						<td align="right">密码:</td>
						<td >
							<input type="password" name="password"/>
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" value="提交"/>
							<input type="reset" value="重置"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>

登录表单