fieldset태그는 요소들의 그룹을 설정할 때 사용하며 주로 form태그 안에서 사용된다.
<html>
<head>
<style>
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
label {
display: inline-block;
width: 65px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>개인정보</legend>
<div class="item">
<label for="username">이름:</label>
<input type="text" id="username" name="username">
</div>
<div class="item">
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
</div>
<div class="item">
<label for="birthday">생일:</label>
<input type="date" id="birthday" name="birthday">
</div>
<input type="submit" value="전 송">
</fieldset>
</form>
</body>
</html>
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | 그룹 내부의 input 요소들 전체 disabled 설정 |
| form | form_id | fieldset이 포함된 form |
| name | text | fieldset 이름 설정 |
See the Pen wvzLLYL by Yoo (@spiegel) on CodePen.
반응형
