이번 시간에는 저번 글에 이어서 폼형식에서의 라디오박스와 체크박스를 배워보자. 모두 같은 input 태그이다. 즉 사용자에게 정보를 받기위한 목적이라는 것이다.
라디오박스는 하나만 선택하게 받는 박스이다. 주로 우리가 원형의 체크박스로 알고 있는 것이다.
<input type="radio" name="study" value="1" id="studying"/>
<label for="subscribed">공부하기</label>
<input type="radio" name="study" value="0" id="playing"/>
<label for="unsubscribed">놀러가기</label>
<input> 태그이며 타입을 radio로 하면 라디오박스가 생긴다. 이전 장에서 배웠듯이 id와 레이블의 for속성을 연결시켜준다. value는 서버에 전송할 값이라고 생각하면된다. 공부하기를 클릭했다고 공부하기라고 전송하는 것이 아니라 1 이라는 값만 전송하는 것이다.
라디오 박스는 하나만 선택되게 하는 것이 목적이다. 그러나 name을 지정하지 않으면 중복선택이 가능하다. 그 이유는 컴퓨터에게 같은 그룹이라고 알려주지 않으면 모르기 때문이다. 그래서 name속성을 통해 같은 그룹임을 명시해줘야한다. 그렇게해야 서버에도 어떤 그룹에서 어떤 것이 선택되었는지 정확하게 전송할 수 있다.
다음은 체크박스이다. 체크박스는 라디오박스와 달리 여러개를 선택하여 정보를 받고 싶을 때 이용한다.
<h1>
좋아하는 음식
</h1>
<form>
<input type="checkbox" name="foods" value="korean" id="korean" />
<label for="korean">한식</label>
<input type="checkbox" name="foods" value="western" id="western" />
<label for="western">양식</label>
<input type="checkbox" name="foods" value="chinese" id="chinese" />
<label for="chinese">중식</label>
</form>
form의 속성은 일단 생략하였다. 필수적인 속성은 이전장에서 다루었다.
체크박스는 input의 타입을 checkbox로 설정하면 만들 수 있다. 그 외에는 라디오 박스와 동일하다. 동일 그룹임을 명시하기 위해 같은 name을 주어야하고, 서버에 전송하기위해 value를 설정한다. 레이블과 연결할 id도 설정한다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'Language > HTML' 카테고리의 다른 글
| <HTML 기초> 09. 테이블 (표) (2) | 2020.11.03 |
|---|---|
| <HTML 기초> 08. 텍스트창 · 버튼 (0) | 2020.10.29 |
| <HTML 기초> 06. 인풋 · 레이블 (0) | 2020.10.22 |
| <HTML 기초> 05. 태그 : 인용 (0) | 2020.10.20 |
| <HTML 기초> 04. 태그 : 리스트 (0) | 2020.10.17 |
