web中表格table和表单form演示

Sept8Th

已于 2022-11-18 10:32:40 修改

阅读量169

点赞数

分类专栏： web前端文章标签： html css javascript

于 2022-11-07 16:37:29 首次发布

本文链接：https://blog.csdn.net/xt2106119337/article/details/127734123

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

预计效果和具体要求为：

请添加图片描述

实现代码为

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.lable{
			text-align: right;
		}
		.topandfoot{
			text-align: center;
			background-color: gray;
		}
		td{
			background-color: #DDDDDD;
		}
		
		table{
			border: 1px solid white;
			margin:100px auto;
		}
	</style>
</head>
<body>
<form action="woskunzongdad" method="get">
	<table>
		<tr>
			<td class="topandfoot" colspan="2" >用户注册</td>
		</tr>
		<tr>
			<td class="lable">用户名：</td>
			<td><input type="text" name="UserName" size="15"></td>
		</tr>
		<tr>
			<td class="lable">密码：</td>
			<td><input type="passwd" name="Userpass" size="15"></td>
		</tr>
		<tr>
			<td class="lable">性别：</td>
			<td><input type="radio" name="sex" value="man" checked>男<input type="radio" name="sex" value="woman">女</td>
			
		</tr>
		<tr>
			<td class="lable">爱好：</td>
			<td><input type="checkbox" name="like" value="wirte">写作<input type="checkbox" name="like" value="music">听音乐<input type="checkbox" name="like" value="sports">体育</td>
		
		</tr>
		<tr>
			<td class="lable">省份：</td>
			<td><select name="province">
				<option value="shanxi">陕西市</option>
				<option value="sichuan">四川省</option>
				<option value="chongqin">重庆市</option>
				<option value="yunlan">云南省</option>
			</select>
				
			</td>
		</tr>
		<tr>
			<td class="lable">自我介绍</td>
			<td><textarea name="intro" cols="25" rows="5">这个家伙什么都没留下</textarea></td>
		</tr>
		<tr>
			<td colspan="2" class="topandfoot"><input type="submit" name="send" ><input type="reset" name="reset"></td
		</tr>
		
	</table>
	

</form>
</body>
</html>