web注册表单设计

最新推荐文章于 2024-03-15 16:57:46 发布

友人C君~

最新推荐文章于 2024-03-15 16:57:46 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/CWH0908/article/details/82813589

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单设计</title>
		<style type="text/css">
			.BodyDiv{
				width: 500px;
				height: 400px;
				margin: 0px auto;
				/*background: aqua;*/
				padding-top: 20px;
				line-height: 20px;
				border-style: solid;
				border-width: 1px;
			}
			.ColorYellow{
				background-color:yellow;
				font-size: 10px;
				width: 120px;
				height: 40px;
				display: inline-block;
				padding-top: 0px;
			}
			.ColorRed{
				color: red;
			}
			.ColorGray{
				color: gray;
				font-size: 10px;
				line-height: 30px;
			}
			.BodyFont{
				font-family: "宋体";
			}
			.LeftLayout{
				text-align: right;
				float: left;
				width: 120px;
				font-size: 14px;
				padding-top: 3px;
				line-height: 20px;
			}
			.CheckNumber{
				font-family: "黑体";
				font-size: 10px;
			}
			.textHeight{
				line-height: 20px;
				font-size: 10px;
			}	
			.PassWordMargin{
				line-height: 20px;
				float: left;
				margin-right: 5px;
			}
			.Check{
				width: 50px;
				float: left;
			}
			
			.last{/*PhotoShop切图*/
				background-image:url(img/submit.png);
				background-repeat: no-repeat;
				background-position: -568px 0px;
				width: 149px;
				height: 48px;
				float: left;
				margin-top: 20px;
			}
			.last:hover{
				cursor: pointer;/*变成手势*/
				background-image:url(img/submit.png);
				background-repeat: no-repeat;
				background-position: -413px 0px;
				width: 149px;
				height: 48px;
			}
			/*焦点样式*/
			.textHeight:focus{/*根据绑定的样式，当获取焦点时改变背景颜色*/
				background: pink;
			}
			.PassWordMargin:focus{/*为何不能在同一个样式描述里*/
				background: pink;
			}
			.Check:focus{
				background: pink;
			}
			
		</style>
	</head>
	<body onLoad="document.注册表单.PhoneText.focus()"><!--载入网页自动聚焦-->
		<div class="BodyDiv">
			<form name="注册表单">
				
				<div><label>
					<div id="one">
						<div class="LeftLayout">
							<span class="ColorRed">*</span>我的手机号码：
						</div>
						<input id="PhoneText" class="textHeight" type="text" name="Phone" placeholder="输入手机" required="required" pattern="^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$"/>
						<input class="CheckNumber" type="button" name="验证码" value="免费获取验证码" />					
					</div>
				</label></div>
				
				<div>
					<div id="two">
						<div class="LeftLayout"></div>
						<div class="ColorGray">
							完成注册后，手机号码为你的微博登录号
						</div>
					</div>
				</div>
				
				<div><label>
					<div id="three" class="LeftLayout">
						<span class="ColorRed">*</span>创建密码：
					</div>
					<div>
						<input class="PassWordMargin" id="PassWordText" type="text"/>
						<div class="ColorYellow">为了你的账户安全，请使用与其他网络不同的密码</div>
					</div>
				</label></div>
				
				<div><label>
					<div id="four" class="LeftLayout">
						<span class="ColorRed">*</span>昵称：
					</div>
					<input id="NameText" class="textHeight" type="text" name="DearName" placeholder="输入昵称" required="required"/>			
				</label></div>
				
				<div>
					<div id="five" class="LeftLayout">
						<span class="ColorRed">*</span>性别：
					</div>
					<div style="margin-top: 12px;">
						<input type="radio" name="Sex" value="男" />男
						<input type="radio" name="Sex" value="女" />女
					</div>
				</div>
							
						<br />	
				<div>
					<div id="six" class="LeftLayout" style="clear:left;">
						<span class="ColorRed">*</span>所在地：
					</div>
					<div>
						<select name="shi">
							<option>北京市</option>
							<option>广州市</option>
							<option>上海市</option>
							<option>深圳市</option>
						</select>
						<select name="qu">
							<option>海淀区</option>
							<option>东城区</option>
							<option>海珠区</option>
							<option>越秀区</option>
							<option>福田区</option>
							<option>黄浦区</option>
						</select>					
					</div>					
				</div>
				
				<br />
				
				<div><label>
					<div id="seven" class="LeftLayout">
						<span class="ColorRed">*</span>手机验证码：
					</div>
					<input type="text" name="Check" class="Check"/>					
				</label></div>
				
				<div>
					<div id="eight" class="LeftLayout" style="clear: left;">
					</div>
					<input type="submit" class="last" value=""/>
				</div>
				
			</form>	
		</div>
	</body>
</html>