HTML 웹문서에서 체크박스는 사용자 입력을 받기 위한 유용한 폼입니다.
체크 박스를 만들기 위한 예제를 정리해 봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<fieldset>
<legend>좋아하는 과일 고르기</legend>
<label for="apple"><input type="checkbox" id="apple" value="apple">사과</label><br>
<label for="banana"><input type="checkbox" id="banana" value="banana">바나나</label><br>
<label for="watermelon"><input type="checkbox" id="watermelon" value="watermelon">수박</label><br>
<label for="mandarin"><input type="checkbox" id="mandarin" value="mandarin">귤</label><br>
</fieldset>
</form>
</body>
</html>해당 예제를 실행하면, 하기와 같은 체크박스 폼을 얻을 수 있습니다.
체크박스는 여러 개의 항목을 선택할 수 있다는 점에서 라디오 버튼과는 차이점을 가집니다.
체크박스를 만들기 위해서는
<input type="checkbox"> 속성이 가장 중요하며, value 속성이 꼭 들어가야 합니다.
value : 서버에 실제 전송되는 값을 나타냄.
추가로, checked라는 속성을 설정하면 기본적으로 체크하고 싶은 항목을 선택할 수 있습니다.
<label for="apple"><input type="checkbox" value="apple" id="apple" checked>사과</label><br>
<label for="banana"><input type="checkbox" value="banana" id="banana">바나나</label><br>
<label for="watermelon"><input type="checkbox" value="watermelon" id="watermelon" checked>수박</label><br>
<label for="apmandarinple"><input type="checkbox" value="mandarin" id="mandarin">귤</label><br>
웹문서에서 체크박스를 표기할 수 있는 태그를 확인해 보았습니다.
감사합니다.
반응형
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| div 태그 란? (6) | 2023.03.17 |
|---|---|
| 전송,리셋 버튼 만들기 (4) | 2023.03.16 |
| 라디오 버튼 예제 (2) | 2023.03.14 |
| <fieldset> 태그 예제 (1) | 2023.03.13 |
| <form> 태그 예제 (2) | 2023.03.12 |
댓글