html 라디오버튼

html 라디오 버튼은 값을 선택해야 할 때 사용할 수 있는 태그입니다. 회원가입 시 성별을 선택할 때 하나의 값 만을 선택할 수 있는 경우와 같을 때 사용됩니다. form 태그 안에서 사용이 되며 input 태그의 type 속성에 radio를 입력하면 생성이 되고 각각의 라디오 버튼을 name 속성을 사용해서 그룹으로 묶어서 사용해야 됩니다. label 태그의 for 속성값과 input 태그의 id 속성값을 일치시키면 텍스트를 클릭해도 선택할 수 있습니다.

 

사용법

 

<form action="/gender">
      <input type="radio" name="gender" value="남" id="man" checked />
      <label for="man">남</label>
      <input type="radio" name="gender" value="여" id="female" />
      <label for="female">여</label>
      <button>submit</button>
</form>

 

라디오-버튼-전송결과

 

checked 옵션을 주면 처음에 해당 값이 선택된 상태로 설정이 되고 submit 버튼을 눌러서 전송시키면 value 속성의 값을 서버에 전송 시킬 수 있습니다.