摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>偽類表單控件</title> <link rel="stylesheet" href=&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類表單控件</title>
<link rel="stylesheet" href="static/CSS/style4.css">
</head>
<style>div {
width: 500px;
height: 400px;
border: 1px solid ;
/*background-color: lightgreen;*/
/*text-align: center;*/
margin-left: 20px;
padding-left: 20px;
}
#verdfiy {
width: 74px;
}
/*表單可用區(qū)域背景設置*/
form :enabled {
background-color: lightblue;
}
/*選中項目字體顏色設置*/
form :checked + label {
color: red;
}
/*表格內(nèi)填寫數(shù)據(jù)有效性，未測試*/
form :invalid {
color: red;
}
/*焦點區(qū)域格式*/
form :focus {
background-color: yellow;
}
/*使用屬性選擇器進行選擇對應按鈕再進行樣式選擇*/
button[name="sbm"]:hover {
width: 60px;
height: 25px;
background-color: black;
color: white;
}
</style>
<body>
<h1>注冊/登錄</h1>
<hr>
<div>
<form action="" method="post">
<p>
<label for="username">姓名：</label>
<input type="text" id="username" placeholder="手機號/郵箱">
</p>
<p>
<label for="username">密碼：</label>
<input type="password" id="password" placeholder="字母和數(shù)字不低于8位" autocomplete="new-password">
</p>
<p>
<label for="verdfiy">驗證碼：</label>
<input type="text" id="verdfiy"> <button type="button">點擊發(fā)送</button>
</p>
<p>
<label >保存時間</label>
<input type="radio" name="limit" value="week" id="week" ><label for="week" >一周</label>
<input type="radio" name="limit" value="month" id="month"><label for="month" >一個月</label>
</p>
<button type="submit" name="sbm">登錄</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>
批改老師：查無此人批改時間：2019-09-05 14:37:20
老師總結：完成的不錯。css樣式學好，做出來的頁面很絢麗。繼續(xù)加油。