* fieldset 태그 : HTML태그들을 하나로 그룹화 시키는 역할을 하는 태그.
* legend 태그 : fieldset 태그에 제목을 부여하는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>체크박스 예제</title>
</head>
<body>
<!-- fieldset 태그 : HTML태그들을 하나로 그룹화 시키는 역할을 하는 태그. -->
<fieldset>
<!-- legend 태그 : fieldset 태그에 제목을 부여하는 태그 -->
<legend>필수 입력 사항</legend>
<ul>
<li>이 름 : <input type="text"> </li>
<li>아이디 : <input type="text" size="20" placeholder="6자 이상 20자 미만 공백 없이"> </li>
<li>이메일 : <input type="email"> </li>
<li>연락처 : <input type="text"> </li>
<li>
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</li>
</ul>
</fieldset>
<fieldset>
<legend>선택 입력 사항</legend>
<ul>
<li>
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="여행">여행
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="잠자기">잠자기
<input type="checkbox" name="hobby" value="숨쉬기">숨쉬기
</li>
<li>
<input type="radio" name="gender" value="남자">남
<input type="radio" name="gender" value="여자">여
</li>
</ul>
</fieldset>
</body>
</html>
'Front > HTML' 카테고리의 다른 글
| [HTML5] semantic 태그 (0) | 2021.04.20 |
|---|---|
| [HTML5] form 태그 (0) | 2021.04.20 |
| [HTML5] HTML5 기본 개념 및 참고 사이트 (0) | 2021.04.20 |
| [HTML4] iframe, frameset, frame 태그 (0) | 2021.04.20 |
| [HTML4] table 태그 (0) | 2021.04.20 |
