<input type="'Radio"/>, <input type="'Checkbox"/>

Radio & Checkbox

 

 

 

▶ 체크박스를 생성하는 input태그의 옵션이다.

 

 

① Radio : 오직 1개만 선택할 수 있는 동그란 체크박스를 생성한다. name, value 옵션을 필수로 사용해야 한다.

 

<!-- 이 상태로 진행하게 된다면 radio속성의 의도와는 다르게 체크박스를 다중선택 하는것이 가능하게 된다. -->
<input type="radio" id="agree"/>
<label for="agree"> 찬성 </label>
<input type="radio" id="disagree"/>
<label for="disagree"> 반대 </label>

<!-- name옵션을 추가함으로써 두가지 태그를 묶어 둘중 하나만 선택이 가능하도록 변경했다. -->
<input type="radio" name="questions" id="agree"/>
<label for="agree"> 찬성 </label>
<input type="radio" name="questions" id="disagree"/>
<label for="disagree"> 반대 </label>

<!-- value옵션을 사용하여 서버에 어떤 항목이 선택되었는지 정확히 전달한다. -->
<form action="" method="get">
    <input type="radio" name="questions" value="true" id="agree"/>
    <label for="agree"> 찬성 </label>
    <input type="radio" name="questions" value="false" id="disagree"/>
    <label for="disagree"> 반대 </label>
    <button type="submit"> 제출 </button>
</form>

 

 

② Checkbox : 다중선택이 가능한 체크박스를 생성한다. Radio와 사용법이 거의 동일하다.

 

<h1> 좋아하는 과일을 선택 </h1>
<form action="" method="get">
    <input type="checkbox" name="fruit" id="apple"/>
    <label for="apple"> 사과 </label>
    <input type="checkbox" name="fruit" id="grape"/>
    <label for="apple"> 포도 </label>
    <input type="checkbox" name="fruit" id="watermelon"/>
    <label for="apple"> 수박 </label>
    <button type="submit"> 제출 </button>
</form>