웹프로그래밍/HTML5
[HTML5] 의사클래스
by 폴더맨
2024. 6. 9.
<!Doctype html>
<html>
<head>
<title> 7장 의사클래스 </title>
<style>
form.form-example {
display: table;
}
div.form-example {
display: table-row;
}
label, input {
display: table-cell;
margin-bottom: 10px;
}
label {
padding-right: 10px;
}
input:focus { background-color: red; }
input:hover { background-color: orange; }
input:active { background-color:: blue; }
</style>
</head>
<body>
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>
</body>
</html>