master

分支 (2)

管理

管理

master

liuguanghtml

html
/
登记表.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>登记表</title>
</head>
<body>
<div class="bg">
	<form action="#" method="get" autocomplete="off">
	<h2>登记表</h2>
	<p><span>用户登录名：</span><input type="text" name="name" value="[email protected]" disabled readonly /> (不能修改，只能查看)</p>
	<p><span>真实姓名：</span><input type="text" name="real_name" pattern="^[\u4e00-\u9fa5]{0,}$" placeholder="例如：王明" required autofocus/>(必须填写，只能输入汉字)</p>
	<p><span>真实年龄：</span><input type="number" name="birthday" value="" min="15" max="120" required/>(必须填写)</p>
	<p><span>出生日期：</span><input type="date" name="birthday" value="1990-10-1" required/>(必须填写)</p>
	<p><span>电子邮箱：</span><input type="email" name="myemail" placeholder="" required multiple/>(必须填写)</p>
	<p><span>身份证号：</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}？$"/>(必须填写，能够以数字、字母x结尾的短身份证号)</p>
	<p><span>手机号码：</span><input type="tel" name="telphone" pattern="^\d {11}$" required/>(必须填写)</p>
	<p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"/>(请选择网址)
	<datalist id="urllist">
	<option>http://www.itcast.cn</option>
	<option>http://www.boxuegu.com</option>
	<option>http://www.w3school.com.cn</option>
	</datalist>
	</p>
	<p class="lucky"><span>幸运颜色：</span><input type="color" name="lovecolor" value="#fed000"/>（请选择你喜欢的颜色）</p>
	<p class="btn">
	<input type="submit" value="提交"/>
	<input type="reset" value="重置"/>
	<body{ font-size:12px; font-family:"微软雅黑"; body, form, input, h2, p{ padding:0; margin:0; border:0}}>
<style type="text/css">
 .bg{
	 width:1431px;
	height: 717px;
	background: url(images/form_QQ图片20171015211327)no-repeat;
	position: relative;
}
form{
	width: 600px;
	height: 400px;
	margin: 50px auto;
	padding-left: 30px;
	position: absolute;
	left: 48%;
	top: 10%;
}
h2{
	text-align: center;
	margin: 16px 0;
}
p{margin-top: 20px;}
p span{
	width: 75px;
	display: inline-block;
	text-align: right;
	padding-right: 10px;
}
p input{
	width: 200px;
	height: 18px;
	border: 1px solid #38a1bf;
	padding: 2px;
}
.lucky input{
	width: 100px;
	height: 24px;
}
.btn input{
	width: 100px;
	height: 30px;
	background: #93b518;
	margin-top: 20px;
	margin-left: 75px;
	border-radius: 3px;
	font-family: "微软雅黑"；
	color:#fff;
}
</style>
</body>
</html>

	</p>
	</form>
	</div>
</body>
</html>