체크박스
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 42번째.
HTML에서 체크박스는 사용자가 그룹에서 여러 옵션을 선택할 수 있는 옵션 세트를 만드는 데 사용됩니다. 체크박스는 type 속성이 "checkbox"로 설정된 <input> 태그를 사용하여 생성됩니다.
HTML에서 체크박스를 생성하는 기본 구문은 다음과 같습니다:
<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label><input>: 입력 필드를 정의하는 태그입니다.type="checkbox": 입력 유형을 체크박스로 지정하는 속성입니다.id: 체크박스에 고유한 식별자를 부여하는 속성입니다.
name: 체크박스들을 하나로 그룹화하는 속성입니다. 라디오 버튼과 달리, 동일한 이름을 가진 여러 체크박스를 동시에 선택할 수 있습니다.value: 체크박스와 연관된 값을 지정하는 속성입니다. 이 값은 폼이 제출될 때 서버로 전송됩니다.
<label>: 체크박스에 대해 클릭 가능한 레이블을 제공하는 태그입니다. 레이블의for속성은 체크박스의id속성과 일치해야 합니다.
다음은 체크박스 그룹을 만드는 방법의 예입니다:
<form>
<input type="checkbox" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label><br>
<input type="checkbox" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label><br>
</form>이 예제에서는 세 개의 체크박스가 있는 폼이 있으며, 이들은 모두 동일한 name 속성("mygroup")을 공유하므로 같은 그룹에 속합니다. 각 체크박스는 고유한 id와 value를 가지며, 그에 해당하는 레이블이 있습니다. 사용자가 이 옵션 중 하나 이상을 선택하고 폼을 제출하면, 선택된 체크박스의 값들이 서버로 전송됩니다.
챌린지
쉬움체크박스 그룹이 포함된 폼을 가진 HTML 문서를 작성하세요. 폼은 다음 요소들을 포함해야 합니다:
<form>태그.- 폼 내부에 name이 "toppings"인 세 개의 체크박스 그룹을 만듭니다.
- 첫 번째 체크박스는 id를 "cheese"로, value를 "cheese"로 설정하고, 텍스트가 "Cheese"인 레이블을 추가합니다.
- 두 번째 체크박스는 id를 "pepperoni"로, value를 "pepperoni"로 설정하고, 텍스트가 "Pepperoni"인 레이블을 추가합니다.
- 세 번째 체크박스는 id를 "mushrooms"로, value를 "mushrooms"로 설정하고, 텍스트가 "Mushrooms"인 레이블을 추가합니다.
- 각 레이블 뒤에 줄 바꿈을 위해
<br>태그를 추가합니다.
치트 시트
체크박스를 사용하면 사용자가 그룹에서 여러 옵션을 선택할 수 있습니다. 체크박스는 type="checkbox" 속성을 가진 <input> 태그를 사용하여 생성됩니다.
기본 체크박스 구문:
<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>주요 속성:
type="checkbox": 입력 타입을 체크박스로 지정합니다.id: 체크박스의 고유 식별자입니다.name: 체크박스들을 그룹화합니다 (여러 개를 선택할 수 있습니다).value: 폼이 제출될 때 서버로 전송되는 값입니다.<label for="">: 클릭 가능한 라벨을 제공합니다 (for 속성은 체크박스의 id와 일치해야 합니다).
여러 개의 체크박스 예시:
<form>
<input type="checkbox" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label><br>
<input type="checkbox" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label><br>
</form>직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
