<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户登陆</title>
<style>
*{padding: 0;margin: 0;}
form{
width: 700px;
height: 520px;
margin: 100px auto;
border: 2px solid rgb(79, 172, 203);
border-radius: 10px;
background-color:rgb(220, 245, 250);
}
h2{text-align: center;}
form ul{
width: 750px;
list-style: none;
}
form li{
padding: 12px;
}
form span{
width: 150px;
display: inline-block;
}
input:required:valid{
background: url("imag/right.png") right center no-repeat;
}
input:focus:invalid{
background: url("imag/warn.png") right center no-repeat;
}
.zi2{
}
.zi2:required{background: url("imag/3.png") left center no-repeat;background-color:rgb(85, 84, 84);}
.tijiao{border: 2px solid rgb(79, 172, 203);
border-radius: 20px;
width: 70px;height: 30px;
background-color:darkgrey;
margin-left: 150px;
margin-top: 10px;
}
</style>
</head>
<body>
<form>
<h2>学员登记表</h2>
<ul>
<li>
<span>用户登陆名：</span>
<input type="text" readonly placeholder="myemail@163.com">(不能修改，只能查看)
</li>
<li>
<span>真实姓名：</span>
<input type="text" class="zi2" pattern="^[\u4e00-\u9fa5]{0,}$" required placeholder=" 例如：王明">(必须填写，只能输入汉字)
</li>
<li>
<span>真实年龄：</span>
<input type="number" required>(必须填写)
</li>
<li>
<span>出生日期：</span>
<input type="date" required>(必须填写)
</li>
<li>
<span>电子邮箱：</span>
<input type="email" required >(必须填写)
</li>
<li>
<span>身份证号</span>
<input type="text" required pattern="^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$">(必须填写,能够以数字、字母x结尾的短身份证号)
</li>
<li>
<span>手机号码：</span>
<input type="tel" required pattern="^\d{11,}$">(必须填写,要求为11位数字)
</li>
<li>
<span>个人主页：</span>
<input id="address" list="addressList" />(请选择网址)
<datalist id="addressList">
<option value="https://www.baidu.com/"></option>
<option value="https://www.baidue.com/"></option>
<option value="https://www.baidus.com/"></option>
</datalist>
</li>
<li>
<span>幸运颜色：</span>
<input type="color">(请选择你喜欢的颜色)
</li>
</ul>
<input type="submit" class="tijiao" name="submit" value="提交">
<input type="submit" class="tijiao" name="submit" value="重置">
</form>
</body>
</html>
