HTML下表单练习处理

最新推荐文章于 2023-10-17 14:42:06 发布

韶光不负

最新推荐文章于 2023-10-17 14:42:06 发布

阅读量667

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_47514459/article/details/117072665

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

因为小编最近真的是太忙了，有的作作业没有来的及更新，不过小编会补上去的，让csdn记录下我的it生涯。废话不多说开始开干。

第一题：模仿下图完成网页
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		<style >
			.clock{
				color: "beige";
				
				
				
				width:="100" ;
				height="100";
			}
		</style>
	</head>
	<body>
	<form action="#" method="get">
		<table class="clock" align="left" cellpadding="0" border="1" background-color= beige >
			<tr>
				<td>
					<h1 >用户注册</h1>
				</td>
			</tr>
			<tr>
				<td>
				用户名：
					<input type="text" placeholder="请输入姓名"  />
				</td>
			</tr>
			<tr>
				<td>
				密码：
					<input type="password" />
				</td>
			</tr>
			<tr>
				<td>
				用户性别 :
						<input type="radio" value="man" name="gender"/>男
							<!-- input type="radio"（显示的是选择） value="man（表示向服务器传输数据为） -->
						<input type="radio" value="woman" name="gender"/>女
				</td>
			</tr>
			<tr>
				<td>
				爱好：
				
				<input type="checkbox"  name="happy"/>写作
				<input type="checkbox"  name="happy"/>听音乐
				<input type="checkbox"  name="happy"/>体育
				
				</td>
			</tr>
			<tr>
				<td>
				省份
			<select name="address" id="address">
					<option value="-1">请选择您居住省份</option>
					<!-- <option value="-1">请选择您国家地址</option>给用户提供选择 -->
					<option value="陕西省" selected >陕西省</option>
					<option value="湖南省">湖南省</option>
								<!-- h5标准下也可以写成下面这样 -->
					<option>北京市</option>
					<option>贵州省</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
				<p>
					自我建议: <br>
					<textarea row="10" cols="20"></textarea>
					<!-- textarea 文本域 -->
					<!-- <textarea row="10"(设置行宽) cols="20"(设置列宽)></textarea> -->
				</p>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="提交" />
					<input type="reset"  value="重置"/>
					<!-- reset 清楚数据  不建议使用了-->
				</td>
			</tr>
		</table>
	</form>
		
	</body>
</html>

现象：
在这里插入图片描述
2，模拟qq注册与登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		<style >
			.clock{
				color: "beige";
			}
			img{
				width: 250px;
				height: 500px;
			}
		</style>
	</head>
	<body>
	<form action="#" method="get">
		<table class="clock" align="left" cellpadding="0"  background-color= beige >
			<tr >
				<td width="50" rowspan="100">
				<img src="C:\Users\Lenovo\Pictures\Saved Pictures\picture\李白.png" />
				</td>
			</tr>
			<tr>
				<tr>
				<td align="right">
					<p align="right"> <small>QQ登录 &nbsp &nbsp  简体中文  &nbsp &nbsp 意见反馈</small></p>
				</td>
				</tr>
				<tr>
				<td>
					<h1>欢迎注册QQ</h1>
				</td>
				</tr>
				<tr>
				<td>
					<p><h2>每一天,乐在沟通</h2> &nbsp &nbsp
					<a href="#" >免费靓号</a>
					</p>
					
				</td>
				</tr>
				<tr>
					<td>
					<input type="text"  placeholder="昵称"/>
				</td>
				</tr>
				<tr>
				<td>
					<input type="password" placeholder="密码" />
					
				</td>
				</tr>
				<tr>
				<td >
					<select name="address" id="address">
										<option value="+87" selected >+87</option>
										<option value="+86">+86</option>
										<input type="tel" />
										</td>
					</select>
				</td>
				
				</tr>
				</tr>
				<tr >
					<td  align="center" background-color="bule">
					<p>
					<input type="submit" value="立即注册"   />
					</p>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox"  />我以阅读并同意
					</td>
				</tr>
			</tr>
			
		</table>
	</form>
		
	</body>
</html>

在这里插入图片描述
二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		<style >
			.clock{
				color: "beige";
			}
			img{
				width: 250px;
				height: 500px;
			}
		</style>
	</head>
	<body>
	<form action="#" method="get">
		<table class="clock" align="center" cellpadding="0"  background-color= beige >
			<tr>
				<td>
					<h1>账号密码登录</h1>
				</td>
			</tr>
			<tr>
				<td>
				<h2>推荐使用<a href="#">快速登录</a>,防止盗号</h2>
				</td>
			</tr>
			<tr>
				<td>
					<input type="text" placeholder="支持QQ号/邮箱/手机号登录" />
				</td>
			</tr>
			<tr><td>
				<input type="password" placeholder="密码" />
				</td>
			</tr>
			<tr>
				<td>
					<input type="search" value="授权并登录" />
				</td>
			</tr>
			<tr>
				<td align="right">
					<td>
					<a href="#">忘记密码</a>
					</td>
					<td>
					<a href="#">注册新账号</a>
					</td>
					<td>
					<a href="#">问题反馈</a>
				</td>
			</tr>
		</table>
	</form>
		
	</body>
</html>

在这里插入图片描述

韶光不负

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML下表单练习处理

因为小编最近真的是太忙了，有的作作业没有来的及更新，不过小编会补上去的，让csdn记录下我的it生涯。废话不多说开始开干。第一题：模仿下图完成网页<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>网页</title> <style > .clock{ color: "beige"; .
复制链接

扫一扫