<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息</title>
<style>
.container{
max-width: 400px;
margin: 20px auto;
}
input,textarea{
width: 300px;
margin: 5px 0;
border: 1px solid #999;
padding: 0.5em 1em;
vertical-align: middle;
}
input[type="search"], select{
width: 330px;
margin: 5px 0;
border: 1px solid #999;
padding: 0.5em 1em;
vertical-align: middle;
}
/*必填*/
input:required,textarea:required{
border-right: 3px solid red;
}
input:required:valid,textarea:required:valid{
border-right: 3px solid green;
border-color: green;
}
input:required:focus:valid,textarea:required:focus:valid{
border-right: 3px solid green;
box-shadow: 0 0 5px green;
border-color: green;
}
/*选填*/
input:optional,select:optional{
border-right: 3px solid #999;
}
input:required::after{
content: '*';
}
input:optional::after {
content: '';
}
/*浏览器默认focus的时候没有边框*/
input:focus,select:focus,textarea:focus{
outline: 0;
}
/*focus的时候加自定义边框*/
input:required:focus,textarea:required:focus{
box-shadow: 0 0 3px 1px red;
}
input:optional:focus,textarea:optional:focus{
box-shadow: 0 0 3px 1px #999;
}
input[type="submit"]{
background-color: #F53044;
border: 2px solid red;
padding: 10px 0px;
color: #ffffff;
width: 380px;
}
input[type="submit"]:hover{
background-color: red;
}
.label-vertical {
writing-mode: vertical-lr;
margin-right: 18px;
letter-spacing: 5px;
/*text-decoration: underline;
transform: rotate(180deg);*/
}
</style>
</head>
<body>
<div class="container">
<center><h1>员工信息</h1></center>
<form action="#">
<label for="name">姓名 </label>
<input id="name" type="search" title="请输入姓名" placeholder="输入姓名" autofocus required pattern=".{2,5}" oninvalid="setCustomValidity('2至5位数')" οninput="setCustomValidity('')"><br>
<label for="age">年龄 </label><input id="age" type="text" title="请输入年龄" placeholder="输入年龄" pattern="\d{1,3}" required oninvalid="setCustomValidity('1至3位数')" οninput="setCustomValidity('')"><br>
<label for="birthday">生日 </label><input id="birthday" type="date" title="请输入出生日期" placeholder="输入出生日期" value="2017-03-01" required oninvalid="setCustomValidity('请输入出生日期')" οninput="setCustomValidity('')"><br>
<label for="email">邮箱 </label><input id="email" type="email" title="请输入邮箱" placeholder="输入邮箱" required oninvalid="setCustomValidity('请输入合法邮箱')" οninput="setCustomValidity('')"><br>
<label for="tel">手机 </label><input type="tel" id="tel" title="请输入手机" placeholder="输入手机号"><br>
<label for="tel">网址 </label><input type="url" id="url" title="请输入网址" placeholder="输入网址"><br>
<label for="tel">爱好 </label><select id="interesting">
<option value="1">足球</option>
<option value="2">篮球</option>
<option value="3">排球</option>
<option value="4">乒乓球</option>
</select><br>
<label for="self" class="label-vertical">自我评价 </label><textarea id="self" cols="30" rows="10" required title="请输入留言" placeholder="输入留言"></textarea><br/>
<input type="submit" value="提交表单"/>
</form>
</div>
</body>
</html>最终效果如下
