HTML 선택형 <input> 태그 정리

이번 글은 Frontend / Markup structure 영역에서 사용자에게 선택을 받기 위해 사용하는 <input> 태그의 선택형 타입을 정리한다.

선택형 입력은 사용자가 값을 직접 타이핑하는 것이 아니라, 미리 준비된 항목 중에서 고르는 방식이다.

이번 편에서는 checkbox와 radio 타입을 다룬다.

check input

05_checkinputtag.html

체크 관련 인풋 타입

checkbox

유기농

<h2>radio</h2>
<input 
  type="radio"
  name="fruit"
  id="f_apple"
  value="apple"
  checked
>
<label for="f_apple">사과</label>

<input 
  type="radio"
  name="fruit"
  id="f_grape"
  value="grape"
>
<label for="f_grape">포도</label>

<input 
  type="radio"
  name="fruit"
  id="f_orange"
  value="orange"
>
<label for="f_orange">오렌지</label>

<br><br>

<input 
  type="radio"
  name="vege"
  id="v_carrot"
  value="carrot"
  checked
>
<label for="v_carrot">당근</label>

<input 
  type="radio"
  name="vege"
  id="v_tomato"
  value="tomato"
  checked
>
<label for="v_tomato">토마토</label>

<input 
  type="radio"
  name="vege"
  id="v_eggplant"
  value="eggplant"
  checked
>
<label for="v_eggplant">가지</label>

1. checkbox

checkbox는 체크 박스 형태로 사용자 입력을 받는다.

여러 항목을 동시에 선택할 수 있으며, 각 항목은 독립적으로 체크 상태를 가진다.

label 태그의 for 속성값과 input 태그의 id 속성값이 일치하면, label을 클릭했을 때 체크 상태가 변경된다.

checked 속성은 페이지에 처음 진입했을 때 미리 체크된 상태로 보여주기 위해 사용한다.

2. radio

radio는 흔히 라디오 버튼이라고 불리는 동그라미 형태의 선택 버튼이다.

같은 그룹 내에서는 하나의 항목만 선택할 수 있으며, 다른 항목을 선택하면 기존 선택은 자동으로 해제된다.

이 그룹을 구분하는 기준이 바로 name 속성이다.

동일한 name 값을 가진 radio 버튼들은 하나의 그룹으로 묶이며, 그 안에서 하나만 선택 가능하다.

value 속성은 서버로 전송되는 실제 데이터 값이다.

label에는 사용자에게 보여줄 한글 텍스트를 사용하고, value에는 프로그래밍에 적합한 영문 또는 코드 형태를 사용하는 것이 일반적이다.

---

정리

• checkbox는 다중 선택이 가능하다.
• radio는 같은 name 그룹에서 하나만 선택된다.
• label과 input을 연결하면 클릭 영역이 넓어져 UX가 좋아진다.
• checked는 초기 선택 상태를 설정한다.
• value는 서버로 전달되는 실제 값이라는 점이 중요하다.