20230716 <input type="radio">

<input type="radio">

radio 유형의 <input> 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용한다. 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 한다.

오래된 라디오의 버튼과 비슷한 형태와 동작 방식을 가졌기에 라디오 버튼이라고 부른다.

** 참고: 체크박스도 라디오 버튼과 비슷하지만 중요한 차이점이 하나 있다. 라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용하지만, 체크박스는 각각의 값을 켜고 끌 수 있다는 점이다. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나를 허용하고, 체크박스는 여러 개 선택을 허용한다.

예시 코드

        <label htmlFor="rating">별점</label>
        <label>
          <input type="radio" name="rating" value="5" onChange={handleRatingChange} />
          ★★★★★
        </label>
        <label>
          <input type="radio" name="rating" value="4" onChange={handleRatingChange} />
          ★★★★
        </label>
        <label>
          <input type="radio" name="rating" value="3" onChange={handleRatingChange} />
          ★★★
        </label>
        <label>
          <input type="radio" name="rating" value="2" onChange={handleRatingChange} />
          ★★
        </label>
        <label>
          <input type="radio" name="rating" value="1" onChange={handleRatingChange} />
          ★
        </label>

value 속성

value 속성은 라디오 버튼의 값이 포함된 DOMString이다.이 값은 그룹에서 어떤 라디오 버튼이 선택되었는지 식별하는 데 사용된다.