본문 바로가기

나의 FE피봇이야기/HTML || CSS

[HTML]Radio button  단일 선택 방법

Radio with  Name

label을 통해서 라디오 버튼을 묶지 않으면 단일 선택일 할 수 없다.

 

<label for="title">Title</label>
<br>
<label for="Mr.">Mr.</label>
<input type="raido" id="Mr." value="Mr.">
<label for="Ms.">Ms.</label>
<input type="radio" id="Ms." value="Ms.">
<label for="PhD.">PhD.</label>
<input type="radio" id="PhD." value="PhD.">

 

 

하지만 여기서 각 input에 name="title"로 묶으면 단일 선택으로 변경된다.

 

<label for="title">Title</label>
<br>
<label for="Mr.">Mr.</label>
<input type="raido" id="Mr." value="Mr." name="title">
<label for="Ms.">Ms.</label>
<input type="radio" id="Ms." value="Ms." name="title">
<label for="PhD.">PhD.</label>
<input type="radio" id="PhD." value="PhD." name="title">