Radio Attribute

<input>의 속성으로 하나의 항목만 선택이 가능한 버튼

Radio Attribute는 <input>의 요소로 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용한다.

임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있다.

라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 한다.

  <h1>나이가 20대입니까?</h1>
  
  <label for="answerYes">네</label>
  <input type="radio" id="answerYes">

  <label for="answerNo">아니요</label>
  <input type="radio" id="answerNo">

위 코드를 실행하면 아래와 같은 결과가 출력된다.

Name Attribute와 Value Attribute

Radio Attribute을 사용할때는 name, value속성을 사용하는 것을 권장한다.

1. name속성 : 각각의 radio속성이 서로 연관되어 있다는 것을 알려주기 위해 사용

  <h1>나이가 20대입니까?</h1>
  
  <!-- name속성을 사용해서 같이 묶지 않으면 중복으로 선택가능 -->
  <label for="answerYes">네</label>
  <input type="radio" id="answerYes" name="answer">

  <label for="answerNo">아니요</label>
  <input type="radio" id="answerNo" name="answer">

2. value속성 : 여러 항목 중 선택된 항목의 값을 서버에서 구분하기 위해서 사용

  <h1>나이가 20대입니까?</h1>

  <form action="#" method="GET">
    <!-- value값을 설정하면 각각의 항목을 선택함에 따라 서버에 전송되는 값이 다름 -->
    <label for="answerYes">네</label>
    <input type="radio" id="answerYes" value="answerYes" name="answer">
    
    <!-- value값을 설정하면 선택에 맞게 다르게 전송됨 -->
    <label for="answerNo">아니요</label>
    <input type="radio" id="answerNo" value="answerNo" name="answer">
    
    <button type="submit">
      확인
    </button>
  </form>

Checkbox Attribute

<input>의 속성으로 여러 개의 항목이 선택 가능한 버튼

Checkbox Attribute는 <input>의 요소로 Radio Attribute와 사용 방법이 동일하다.

단 하나의 차이점이 있다면 Checkbox Attribute는 다중선택이 가능하다는 것이다.

  <h1>나이가 20대입니까?</h1>
  
  <label for="answerYes">네</label>
  <input type="checkbox" id="answerYes">

  <label for="answerNo">아니요</label>
  <input type="checkbox" id="answerNo">

위 코드를 실행하면 아래와 같은 결과가 출력된다.

참고 자료

<input type="radio"> - HTML: Hypertext Markup Language - MDN Web Docs
<input type="radio"> - HTML: Hypertext Markup Language - MDN Web Docs