HTML 체크박스 (`<input type="checkbox">`)와 라디오 버튼 (`<input type="radio">`)

HTML 체크박스 (<input type="checkbox">)와 라디오 버튼 (<input type="radio">)

HTML <input> 요소를 사용하여 체크박스와 라디오 버튼을 생성할 수 있습니다. 이번 글에서는 <input type="checkbox">와 <input type="radio">를 사용한 체크박스와 라디오 버튼에 대해 자세히 알아보겠습니다.

체크박스 (<input type="checkbox">)

체크박스는 여러 개의 선택 사항 중 하나 이상을 선택할 수 있는 입력 필드입니다. 각 체크박스는 독립적으로 선택될 수 있으며, 선택된 항목들은 동시에 제출될 수 있습니다.

아래는 <input type="checkbox">를 사용하여 체크박스를 생성하는 예시입니다:

<input type="checkbox" name="hobby" value="reading" id="cb-reading" />
<label for="cb-reading">독서</label>

<input type="checkbox" name="hobby" value="music" id="cb-music" />
<label for="cb-music">음악 감상</label>

위의 예시에서는 두 개의 체크박스를 생성하고, name 속성을 통해 그룹화하였습니다. value 속성을 통해 체크박스의 값(선택 사항)을 지정하였으며, id 속성을 통해 체크박스와 라벨을 연결하였습니다. 라벨(<label>)을 사용하여 체크박스에 연결하면, 사용자가 라벨을 클릭하여 체크박스를 선택할 수 있습니다.

라디오 버튼 (<input type="radio">)

라디오 버튼은 여러 개의 선택 사항 중 하나만 선택할 수 있는 입력 필드입니다. 라디오 버튼은 같은 name 속성 값을 가지는 그룹으로 묶여 있으며, 그룹 내에서는 하나의 항목만 선택할 수 있습니다.

아래는 <input type="radio">를 사용하여 라디오 버튼을 생성하는 예시입니다:

<input type="radio" name="gender" value="male" id="rb-male" />
<label for="rb-male">남성</label>

<input type="radio" name="gender" value="female" id="rb-female" />
<label for="rb-female">여성</label>

위의 예시에서는 두 개의 라디오 버튼을 생성하고, name 속성을 통해 그룹화하였습니다. 각 라디오 버튼은 동일한 name 속성 값을 가져야 하며, value 속성을 통해 선택된 항목의 값(선택 사항)을 지정할 수 있습니다.

마무리

HTML의 <input> 요소와 type="checkbox"를 사용하여 체크박스를 생성할 수 있으며, type="radio"를 사용하여 라디오 버튼을 생성할 수 있습니다. 체크박스는 여러 개의 선택 사항 중 하나 이상을 선택할 수 있고, 라디오 버튼은 여러 개의 선택 사항 중 하나만 선택할 수 있습니다. 적절히 활용하여 사용자로부터 다양한 선택을 받을 수 있으며, 이를 서버로 전송하여 원하는 동작을 수행할 수 있습니다. 다음 글에서는 HTML의 다른 유용한 폼 요소들에 대해 다루어보겠습니다. 기대해주세요!