사용자가 선택할 수 있는 박스를 제공하는 요소
여러 개를 선택할 수 있고, 선택하지 않아도 됩니다.
어떤 내용의 체크박스인지 식별하기 어려우므로, label
요소와 함께 사용해야 합니다.
<h3> Anything Check! </h3>
<form action="/root">
<label for="agree_check"> Im Agree </label>
<input ID="agree_check" type="checkbox" name="agree">
<button>Submit</button>
</form>
체크박스를 선택하지 않아도 기본값으로 체크되어 있는 속성입니다.
<input ID="agree_check" type="checkbox" name="agree" checked>
Radio
요소는 체크박스와 거의 동일하나, 한 가지 차이점이 있습니다.
그룹된 요소에서 1개의 라디오박스만 선택할 수 있습니다.
그룹을 위해서는 같은 Name
속성명을 사용해야 연결됩니다.
<h3> Anything Check! </h3>
<form action="/root">
<p>
<label for="child">Child</label>
<input type="radio" name="Age" id="child">
<label for="Teen">Teenager</label>
<input type="radio" name="Age" id="Teen">
<label for="Adult">Adult</label>
<input type="radio" name="Age" id="Adult">
</p>
<button>Submit</button>
</form>
서로 같은 Name
속성명으로 그룹핑 되어 하나만 선택할 수 있게 되었지만,
서버에 form
을 제출하면, 서버는 사용자가 어떤 양식을 체크 했는지 알 수 없습니다.
value
라는 속성을 이용해서, 사용자가 어떤 값을 선택 했는지 전달할 수 있습니다.
사용자에게 보이지는 않지만, 서버에 제출할 때 name
속성 대신 제출 됩니다.
서버에 제출할 때 전송되는 값으로, 서로 다른 value
값을 가져야 합니다.
<h3> Anything Check! </h3>
<form action="/root">
<p>
<label for="child">Child</label>
<input type="radio" name="Age" id="child" value="child">
<label for="Teen">Teenager</label>
<input type="radio" name="Age" id="Teen" value="Teen">
<label for="Adult">Adult</label>
<input type="radio" name="Age" id="Adult" value="Adult">
</p>
<button>Submit</button>
</form>
value
속성을 통해서 사용자가 어떤 값을 선택했는지 서버가 알 수 있습니다.