HTML radio button 만들기에 도움되는 간단 예제

HTML radio button 요소는 단일 체크가 가능한 체크박스입니다. 그룹핑을 할 경우 name 속성, 클릭 영역을 넓힐 경우 label 태그를 섞어서 사용하면 됩니다.

HTML radio button

<input type = "radio"> 속성은 단일 선택만 가능한 체크 박스 기능입니다.

이름이 라디오인 이유는 라디오의 버튼과 비슷하게 생겼기 때문입니다.

<form>
  <input type="radio">
</form>

예제 ▷

radio에 이름 삽입

radio 속성값은 이름을 붙일 때 value가 아닌 label 태그를 사용합니다.

<label> 태그 사이에 원하는 문자와 <input type = "radio"> 태그를 삽입하면 됩니다.

<label>
  <input type="radio">딸기
</label>
  <br>
<label>
  <input type="radio">수박
</label>
  <br>
<label>
  <input type="radio">포도
</label>

예제 ▷

또는 <label> 태그 사이에 문자를 입력하되, <label for = " ">의 for 값과  <input type = "radio" id = " ">의 id 값을 일치시킵니다.

<input type="radio" id="str">
<label for="str">딸기</label>
  <br>
<input type="radio" id="wat">
<label for="wat">수박</label>
  <br>
<input type="radio" id="podo">
<label for="podo">포도</label>

예제 ▷

name : 그룹 지정, 단일 선택

<input> 태그에는 체크 박스 용도로 radio와 checkbox가 있습니다. radio는 단일 정답만 선택이 가능합니다. checkbox는 복수 정답 선택이 가능합니다. 대신 radio도 단일 선택이 가능하게 하려면 name 속성을 설정해줘야 합니다.

<form>
  <input type="radio" name="hello">
  <input type="radio" name="hello">
  <input type="radio" name="hello">
</form>

예제 ▷

아래 예시는 hello 속성과 world를 붙인 name 속성 그룹 간에 서로 버튼 선택이 중첩되지 않습니다.

<div>
  <input type="radio" name="hello">
  <input type="radio" name="hello">
  <input type="radio" name="hello">
</div>
<div>
  <input type="radio" name="world">
  <input type="radio" name="world">
  <input type="radio" name="world">
</div>

예제 ▷

id와 value를 모두 다르게 지정해도, name속성만 같으면 같은 그룹으로 인식될 수 있습니다. id는 us, kr, ch로 모두 다릅니다. 마찬가지로 value도 apple, samsung, huawei로 모두 다릅니다. 하지만 name은 smartphone으로 같은 그룹으로 인식되어 버튼은 하나만 선택될 수 있습니다.

<div>
  <input type="radio" name="smartphone" value="apple" id="us">
  <label>아이폰</label>
</div>
<div>
  <input type="radio" name="smartphone" value="samsung" id="kr">
  <label>갤럭시</label>
</div>
<div>
  <input type="radio" name="smartphone" value="huawei" id="ch">
  <label>화웨이</label>
</div>

예제 ▷

radio checked : 선택 초기 설정

checked 속성명과 속성값을 사용하면 버튼이 미리 선택되도록 설정할 수 있습니다. 미리 선택이 되도록 <input type = "radio" checked = "checked">  속성을 삽입하면 됩니다.

<input type="radio" name="chemistry">
<label>수소</label>
  <br>
<input type="radio" name="chemistry" checked="checked">
<label>아연</label>
  <br>
<input type="radio" name="chemistry">
<label>크롬</label>
  <br>

예제 ▷