HTML下表单练习处理

因为小编最近真的是太忙了,有的作作业没有来的及更新,不过小编会补上去的,让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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

韶光不负

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值