TIL 05. Form 태그 - Radio & CheckBox

오늘은 form과 관련된 radio와 checkbox 버튼에 대해 살펴보았습니다 👩🏻‍💻

Radio 버튼

<input type="radio" />

여러가지 항목 중 단 하나만 선택할 수 있는 인터페이스(interface)라고 합니다.

ex .

<input type="radio" name="like" value="liked" id="liked" />
<label for="liked">좋아요</label>

<input type="radio" name="like" value="disliked" id="disliked" />
<label for="like">싫어요</label>

위 예시 코드에서 input 태그 내, name이라는 속성은 <input type="radio" /> 가 name과 서로 연관이 되어 있구나를 알려주기 위해서, 같은 값을 적어야 한다고 합니다.
또한 value 라는 속성은 어떤 하나의 항목(토글 : 하나의 설정값으로 부터, 다른 값을 전환 하는 것)이 선택이 되어 서버에 전달이 될 때, 어떤 항목이 선택되었는지 구분을 주기 위해 각기 다른 값을 value에 적어줘야 합니다.

CheckBox 버튼

<input type="checkbox" />

여러 가지 항목 중 다중으로 선택 할 수 있는 인터페이스(interface)라고 합니다.

여기서 인터페이스(interface)란,
서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우. 접점이나 경계면을 말합니다.
이는 즉, 사용자가 기기를 쉽게 동작시키는 데 도움을 주는 시스템을 말하는 것이죠.

ex .

<form action="" method="GET">
<input type="checkbox" name="skills" value="html" id="html" />
<label id="html">HTML</label>
<input type="checkbox" name="skills" value="css" id="css" />
<label id="css">CSS</label>
<input type="checkbox" name="skills" value="javascript" id="javascript" />
<label id="javascript">Javascript</label>
</form>

<input type="checkbox" /> 작성 시, name과 value 속성은 반드시 작성해주어야 합니다.

위 글은 김버그의 HTML&CSS는 재밌다 를 참고하여 작성하였습니다. 🙂