<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
body {
background-color: #EBEBEB;
}
.content {
background: url("images/form_bg.jpg");
width: 1430px;
height: 717px;
margin: 0 auto;
position: relative;
}
.frombox {
width: 700px;
height: 540px;
position: absolute;
top: 160px;
left: 700px;
}
.title {
text-align: center;
font-size: 24px;
}
.line {
padding: 7px 0;
font-size: 15px;
}
.line input {
height: 26px;
width: 220px;
}
.line .tip {
text-align: right;
display: inline-block;
width: 90px;
}
.line.color input {
width: 120px;
}
.line.btn input {
background-color: #93B518;
color: #fff;
width: 120px;
height: 36px;
border: 0;
margin: 15px 28px;
}
</style>
</head>
<body>
<div class="content">
<div class="frombox">
<h1 class="title">传智学员信息登记表</h1>
<form action="" method="GET">
<div class="line">
<label class="tip">用户登录名：</label>
<input type="text" name="username" value="mymail@163.com" readonly="readonly" disabled="disabled">
<label>(不能修改，只能查看)</label>
</div>
<div class="line">
<label class="tip">真实姓名：</label>
<input type="text" name="name" placeholder="例如：王鹏" required pattern="^[\u4e00-\u9fa5]+$">
<label>(必须填写，只能输入汉字)</label>
</div>
<div class="line">
<label class="tip">真实年龄：</label>
<input type="number" name="age" min="0" max="100" value="24" required placeholder="16-100">
<label>(必须填写)</label>
</div>
<div class="line">
<label class="tip">出生日期：</label>
<input type="date" name="date" required>
<label>(必须填写)</label>
</div>
<div class="line">
<label class="tip">电子邮箱：</label>
<input type="email" name="email" placeholder="123456@qq.com" required>
<label>(必须填写)</label>
</div>
<div class="line">
<label class="tip">身份证号：</label>
<input type="text" name="idcard" required pattern="^[0-9]{17}[0-9Xx]$">
<label>(必须填写，能够以数字，字母x结尾的短身份证号)</label>
</div>
<div class="line">
<label class="tip">手机号码：</label>
<input type="tel" name="tel" required>
<label>(必须填写)</label>
</div>
<div class="line">
<label class="tip">个人主页：</label>
<input type="url" name="myurl" placeholder="http://bk.notei.cn">
<label>(请选择网址)</label>
</div>
<div class="line color">
<label class="tip">幸运颜色：</label>
<input type="color" name="luckcolor" value="#E2D546">
<label>(请选择你喜欢的颜色)</label>
</div>
<div class="line btn">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
</div>
</div>
</body>
</html>