表单作业

最新推荐文章于 2023-12-16 15:15:48 发布

「已注销」

最新推荐文章于 2023-12-16 15:15:48 发布

阅读量183

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_43340941/article/details/110891497

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表单作业


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.content{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				
			}
			table{
				width: 100%;
				border-collapse:collapse ;
			}
			th,td{
				border: 1px solid black;
			}
			span{
				margin: 0 5px 0 10px;
				display: inline-block;
				width: 10px;
				height: 10px;
				background: #fff; 
			}
			.content-th{
				text-align: left;
				height: 50px;
				background: #000;
				color: #FFF;
			}
			.content-td1{
				width: 210px;
				padding: 8px;
				border-bottom:2px dashed gray;
				border-right:2px dashed gray;
			}
			.content-td2
			{
				width: 388px;
				padding: 8px;
				border-bottom:2px dashed gray;
			}
			.content-td2 input,select{
				margin-left: 5px;
			}
			textarea{
				resize: none;
				width: 300px;
				height: 200px;
				margin-left: 5px;
				margin-top: 5px;
			}
			.content-lastTd{
				text-align: center;
				padding: 5px 0 5px 0;
				
			}
			.content-lastTd input{
				width: 50px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<form>
					<table>
						<tr class="content-th" >
							<th colspan="2"><span></span>同城网在线调查</th>
						</tr>
						<tr>
							<td class="content-td1">你从哪里知道同城的</td>
							<td class="content-td2">
								<select name="">
									<option>网上搜索</option>
									<option>朋友介绍</option>
									<option>传单</option>
									<option>报纸</option>
								</select>
							</td>
						</tr>
						<tr>
							<td class="content-td1">你正在使用的同城网服务</td>
							<td class="content-td2">
								<input type="checkbox" name="type" id="type-a" />
								<label for="type-a">原创社区</label>
								<input type="checkbox" name="type" id="type-b" />
								<label for="type-b">免费留言簿</label>
								<input type="checkbox" name="type" id="type-c" />
								<label for="type-c">免费投票</label>
							</td>
						</tr>
						<tr>
							<td class="content-td1">你希望我们提供哪些新服务</td>
							<td class="content-td2">
								<input type="checkbox" name="type" id="type-d" />
								<label for="type-d">聊天室</label>
								<input type="checkbox" name="type" id="type-e" />
								<label for="type-e">博客</label>
								<input type="checkbox" name="type" id="type-f" />
								<label for="type-f">游戏系统</label>
							</td>
						</tr>
						<tr>
							<td class="content-td1">你是同城的会员吗</td>
							<td class="content-td2">
								<input type="radio" name="type" id="type-h" />
								<label for="type-h">是</label>
								<input type="radio" name="type" id="type-i"/>
								<label for="type-i">不是</label>
							</td>
						</tr>
						<tr>
							<td class="content-td1">你对同城网的其他意见</td>
							<td class="content-td2"><textarea name="txt2" rows="" cols=""></textarea></td>
						</tr>
						<tr >
							<td colspan="2" class="content-lastTd">
								<input type="submit" name="" id="" value="提交" />
							</td>
						</tr>
					</table>	
			</form>
		</div>
	</body>
</html>

在这里插入图片描述

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单作业

表单作业<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .content{ position: absolute; left: 50%; top: 50%;
复制链接

扫一扫

专栏目录