学习前端的第二天，表格，表单的应用

最新推荐文章于 2024-07-15 13:17:25 发布

Super@.烨

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量106

点赞数

文章标签： html

本文链接：https://blog.csdn.net/sunliye145/article/details/118366031

版权

表格

table=> tr =>td

<!DOCTYPE html>
<html>
      <head>
            <title>表格</title>
            <meta charset="utf-8">
      </head>
      <body>
         <table>
               <tr>
                    <td></td>
               </tr>
         </table>
      </body>
</html>

table--调用表格

tr--表示行

td--表示单元格

实操

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<style type="text/css">
			caption{
				font-size: 24px;
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="20px">
			<thead>
			<caption>个人简历</caption>
			</thead>
			<tbody>
				<tr align="center">
					<td>姓名</td>
					<td>zhangsan</td>
					<td>性别</td>
					<td>男</td>
					<td>出身年月</td>
					<td>2021年4月15日</td>
					<td rowspan="3"><img src="https://img0.baidu.com/it/u=2697604709,1767016655&fm=26&fmt=auto&gp=0.jpg"  width="100px"></td>
				</tr>
				<tr align="center">
					<td>籍贯</td>
					<td></td>
					<td>民族</td>
					<td></td>
					<td>身体状况</td>
					<td></td>
				</tr>
				<tr align="center">
					<td>政治面貌</td>
					<td></td>
					<td>身高</td>
					<td></td>
					<td>外语程度</td>
					<td></td>
				</tr>
				<tr align="center">
					<td>毕业时间</td>
					<td colspan="2"></td>
					<td colspan="2">联系电话</td>
					<td colspan="2"></td>
				</tr>
				<tr align="center">
					<td rowspan="2">家庭住址</td>
					<td colspan="2" rowspan="2"></td>
					<td colspan="2">邮政编码</td>
					<td colspan="2"></td>
				</tr>
				<tr align="center">
					<td colspan="2">邮箱地址</td>
					<td colspan="2"></td>
				</tr>
				<tr align="center">
					<td>主修课程</td>
					<td colspan="6"></td>
				</tr>
				<tr align="center">
					<td>个人简历</td>
					<td colspan="6"></td>
				</tr>
				<tr align="center">
					<td>熟悉软件</td>
					<td colspan="6"></td>
				</tr>
				<tr align="center">
					<td>个人特长</td>
					<td colspan="6"></td>
				</tr>
				<tr align="center">
					<td>个人特长</td>
					<td colspan="6"></td>
				</tr>
			    <tr align="center">
			    	<td rowspan="2">个人特长</td>
			    	<td colspan="6" rowspan="2"></td>
			    </tr>
				</tbody>
				<tfoot>
					<tr align="left">
						<td colspan="7">备注：</td>
					</tr>
				</tfoot>
		</table>
	</body>
</html>

完整的表格 thead tbody tfoot

table属性：border"1"定义表格边框宽度

cellspacing"0"定义边框之间的缝隙

cellpadding"20px"设置行高

tr属性：align"center"表格内文字居中，除此之外还有left、right。

单元格之间的合并

colspan"2"行之间的合并

rowspan"2"列之间的合并

表单

表单控件要写在from里

from里·action"目标地址"

method"数据提交方式"有get,post,post更安全，get会把提交的数据以明文方式显示在浏览器，浏览器会限制get数据大小。

enctype"数据类型"默认application/x-www-form-urlencoded

常用的表单元素有输入框（text），单选框(radio)，复选框(checkbox),普通按钮(button),提交按钮（submit）,重置(reset)

表单元素属性，name""给提交的数据命名

value""默认值

下拉菜单

</select>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
			<p>账号：<input type="text" name="username" value="admin" /></p>
			<p>密码：<input type="password" name="password" value="123456"></p>
			<p>男<input type="radio" name="sex" value="男"  checked/>
			   女<input type="radio"  name="sex" value="女" />
			   </p>
			<p>
				你的爱好：
				<input type="checkbox" name="hobby" value="吃饭" />吃饭
				<input type="checkbox" name="hobby" value="睡觉" />睡觉
				<input type="checkbox" name="hobby" value="写代码" />写代码 
			</p>
			<p>
				出生地：
				<select name="address">
					<option value="上海">上海</option>
					<option value="北京">北京</option>
					<option value="南京">南京</option>
				</select>
			</p>
			<p>
				<input type="submit" value="提交" />
				<input type="reset" value="重置" />
			</p>
		</form>
	</body>
</html>

简单登录界面实战

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单登录注册</title>
	</head>
	<body>
		<form action="http//:www.baidu.com" method="post">
			<p>账号<input type="text" name="username" value=""></p>
			<p>密码<input type="password" name="password" value=""></p>
			<p>
				<input type="checkbox" name="" value="" />记住密码
				<input type="checkbox" name="" value="" />同意《xxx协议》
			</p>
			<p>
				<input type="submit" name="" value="登录">
			</p>
		</form>
	</body>
</html>

前端完结！！！！

Super@.烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端的第二天，表格，表单的应用

表格table=> tr =>td<!DOCTYPE html><html> <head> <title>表格</title> <meta charset="utf-8"> </head> <body> <table> <tr>
复制链接

扫一扫