web表格表单基本练习

最新推荐文章于 2024-03-22 23:53:43 发布

qalx9

最新推荐文章于 2024-03-22 23:53:43 发布

阅读量254

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/qalx9/article/details/127733504

版权

题目

在这里插入图片描述
完成以上图片的展示内容

html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		input[type="textarea"]{
			height: 100px;
		}
		.duiqi{
			text-align: right;
		}
		.duiqi2{
			text-align: center;
			background-color: gray;
		}
		td{
			background-color: #DDDDDD;
		}
		
		table{
			border: 1px solid white;
			
		}
	</style>
</head>
<body>
<form action="woskunzongdad" method="get">
	<table>
		<tr>
			<td class="duiqi2" colspan="2" >用户注册</td>
		</tr>
		<tr>
			<td class="duiqi">用户名：</td>
			<td><input type="text" name="user"></td>
		</tr>
		<tr>
			<td class="duiqi">密码：</td>
			<td><input type="passwd" name="passwd"></td>
		</tr>
		<tr>
			<td class="duiqi">性别：</td>
			<td><input type="radio" name="man">男<input type="radio" name="women">女</td>
			
		</tr>
		<tr>
			<td class="duiqi">爱好：</td>
			<td><input type="checkbox" name="wirte">写作<input type="checkbox" name="music">听音乐<input type="checkbox" name="sports">体育</td>
		
		</tr>
		<tr>
			<td class="duiqi">省份：</td>
			<td><select>
				<option>陕西省</option>
				<option>四川省</option>
			</select>
				
			</td>
		</tr>
		<tr>
			<td class="duiqi">自我介绍</td>
			<td><input type="textarea" name="produce"></td>
		</tr>
		<tr>
			<td colspan="2" class="duiqi2"><input type="submit" name="give" ><input type="reset" name="reset"></td
		</tr>
		
	</table>
	

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

以上代码实现的效果图，如下：
在这里插入图片描述
练习完成