<!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>
最終效果如下
