< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns= "http://www.w3.org/1999/xhtml" >
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=utf-8" / >
< title> 用户注册< / title>
< style>
* : focus { outline: none; }
. a{
width: 70 % ;
position: absolute; /
top: 25 % ;
left: 15 % ;
background- color: pink;
font- family: Georgia；
}
. a h2 {
margin: 0 ;
}
. a span {
width: 150 px;
display: inline - block;
padding: 3 px;
}
. a li{
padding: 8 px;
border- bottom: 1 px solid #eee;
position: relative;
}
. a li: first- child,
. a li: last- child {
border- bottom: 1 px solid #777 ;
}
. a button{ margin- left: 180 px; }
ul{
width: 750 px;
list- style: none;
margin: 0 px;
padding: 0 px;
}
. usually input {
height: 15 px;
width: 220 px;
padding: 5 px 8 px;
}
. usually input,
. usually textarea {
background: #fff url ( 04 / 0402 / images/ attention. png) no- repeat 98 % center;
border: 1 px solid #aaa;
box- shadow: 0 px 0 px 3 px #ccc, 0 10 px 15 px #eee inset;
border- radius: 2 px;
transition: padding 0.25 s;
}
. usually input: focus,
. usually textarea: focus {
background: #fff;
border: 1 px solid #555 ;
box- shadow: 0 0 3 px #aaa;
padding- right: 70 px;
}
. usually input: focus: invalid,
. usually textarea: focus: invalid {
background: #fff url ( 04 / 0402 / images/ warn. png) no- repeat 98 % center;
box- shadow: 0 0 5 px #d45252;
border- color: #b03535
}
. usually input: required: valid,
. usually textarea: required: valid{
background: #fff url ( 04 / 0402 / images/ right. png) no- repeat 98 % center;
box- shadow: 0 0 5 px #5 cd053;
border- color: #28921f ;
}
< / style>
< / head>
< body>
< div>
< form class = "a" action= "#" method= "post" name= "a" >
< ul>
< li class = "usually" >
< h2> < center> 员工信息表< / center> < / h2>
< / li>
< li class = "usually" >
< span> 用户登录名: < / span>
< input type= "email" name= "email" placeholder= "javin@example.com" required / >
< / li>
< li class = "usually" >
< span> 真实姓名: < / span>
< input type= "text" id= "name" name= "name" onkeyup= "this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" required/ >
< / li>
< li class = "usually" >
< span> 真实年龄: < / span>
< input type= "number" name= "age" min= "0" max= "200" required/ >
< / li>
< li class = "usually" >
< span> 出生年月: < / span>
< input type= "var" name= "born" required/ >
< / li>
< li class = "usually" >
< span> 电子邮箱: < / span>
< input type= "email" name= "password" placeholder= "javin@example.com" required / >
< / li>
< li class = "usually" >
< span > 身份证号: < / span>
< input type= "number" nemr= "idname" required / >
< / li>
< li class = "special" >
< span > 幸运颜色: < / span>
< input type= "color" >
< / li>
< input type= submit value= 提交> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; < input type= reset value= 重置>
< / ul>
< / form>
< / div>
< / body>
< / html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
