[form] HTML - <input type="radio"> 태그 - 오직 1개의 요소만 선택 (= 인풋라디오타입/라디오타입인풋/라디오인풋 요소)

1. <input type="radio"> 예제 - 오직 1개만 선택
2. <input type="radio"> 정의
3. <input type="radio"> 구문

<input type="radio"> 예제 - 오직 1개만 선택

※ 선택군의 name 속성값이 같아야 함.

 

<form action="/action_page.php">

  <p>가장 좋아하는 코딩언어 선택</p>

  <input type="radio" id="html" name="mylang" value="html">

  <label for="html">HTML</label><br>

  <input type="radio" id="css" name="mylang" value="css">

  <label for="css">CSS</label><br>

  <input type="radio" id="js" name="mylang" value="javascript">

  <label for="javascript">JavaScript</label>

  <br> 

  <p>연령선택:</p>

  <input type="radio" id="age1" name="age" value="30">

  <label for="age1">0 - 30세</label><br>

  <input type="radio" id="age2" name="age" value="60">

  <label for="age2">31 - 60세</label><br>  

  <input type="radio" id="age3" name="age" value="100">

  <label for="age3">61 - 100세</label><br><br>

  <input type="submit" value="확인">

</form>

 

결과보기

<input type="radio"> 정의

 

오직 1개의 값만 선택 가능한 INPUT 요소.

 

---

 

1.

• 보통, 동그라미로 표시됨.
• 선택군의 name 속성의 값들은 동일해야 하며, 다른 거 선택 시 기존 선택값이 자동으로 해제됨.
• 선택군의 value 속성의 값들은 고유해야 하며, 사용자에게 표시 안 되지만 서버 전송에 사용됨.
• <label> 태그 사용 시, 웹접근성 향상됨.
• 라디오 안 배경색 변경 안 되므로, <label> 요소 이용해 변경.

 

2. cf.

<input type="checkbox"> 태그 - 1개 이상의 값을 선택 가능.

 

3.

주요 브라우저 모두 지원.

 

4. MDN <input type="radio"> 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

 

<input type="radio"> 구문

 

<input type="radio">