글
체크박스
HTML
2011. 8. 16. 19:31
안녕하세요?
오늘은 체크박스에 대해서 배워보겠습니다. 체크박스는 앞에 네모칸이 있고 클릭하면 체크표시가 나오는 컨트롤입니다. 동시에 여러개를 선택할수 있는 것이 라디오 박스와는 다른 점입니다. 라디오박스는 여러개중에 하나밖에 선택할 수가 없습니다. 그럼 간단한 예제를 보시기 바랍니다.
<input type="checkbox" name="chk_info" value="학생">학생
<input type="checkbox" name="chk_info" value="직장인">직장인
<input type="checkbox" name="chk_info" value="백수">백수
<p>
<input type="checkbox" name="chk_info2" value="독서">독서
<input type="checkbox" name="chk_info2" value="컴퓨터" checked="checked">컴퓨터
<input type="checkbox" name="chk_info2" value="그리기">그리기
여기서 input type="checkbox"는 입력도구 타입이 체크박스이다라는 것을 알려주는 것입니다. 입력타입은 앞에서 배운text,password와 checkbox, radio과 버튼등이 있습니다. 여기서는 체크박스다 라는 것을 알려주는 거지요. 그리고 다음에 name="chk_info"는 그 체크박스들의 그룹이름이 되겠습니다. 그리고 value는 폼이 전송되었을때 참조할수 있는 값입니다. 여기까지 체크박스에 대해서 이해하셨지요? 그 다음 밑에 있는 것 중에 checked="checked"라고 되어있는 부분입니다. 대충 아실거같은데 체크박스가 처음 나타났을때 체크표시가 되어있게 하는 겁니다. 즉 세개중에 컴퓨터에 처음부터 체크표시가 되어져나온다는 거지요. 그럼 실행결과화면을 보고 마치겠습니다.
오늘은 체크박스에 대해서 배워보겠습니다. 체크박스는 앞에 네모칸이 있고 클릭하면 체크표시가 나오는 컨트롤입니다. 동시에 여러개를 선택할수 있는 것이 라디오 박스와는 다른 점입니다. 라디오박스는 여러개중에 하나밖에 선택할 수가 없습니다. 그럼 간단한 예제를 보시기 바랍니다.
<input type="checkbox" name="chk_info" value="학생">학생
<input type="checkbox" name="chk_info" value="직장인">직장인
<input type="checkbox" name="chk_info" value="백수">백수
<p>
<input type="checkbox" name="chk_info2" value="독서">독서
<input type="checkbox" name="chk_info2" value="컴퓨터" checked="checked">컴퓨터
<input type="checkbox" name="chk_info2" value="그리기">그리기
여기서 input type="checkbox"는 입력도구 타입이 체크박스이다라는 것을 알려주는 것입니다. 입력타입은 앞에서 배운text,password와 checkbox, radio과 버튼등이 있습니다. 여기서는 체크박스다 라는 것을 알려주는 거지요. 그리고 다음에 name="chk_info"는 그 체크박스들의 그룹이름이 되겠습니다. 그리고 value는 폼이 전송되었을때 참조할수 있는 값입니다. 여기까지 체크박스에 대해서 이해하셨지요? 그 다음 밑에 있는 것 중에 checked="checked"라고 되어있는 부분입니다. 대충 아실거같은데 체크박스가 처음 나타났을때 체크표시가 되어있게 하는 겁니다. 즉 세개중에 컴퓨터에 처음부터 체크표시가 되어져나온다는 거지요. 그럼 실행결과화면을 보고 마치겠습니다.
'HTML' 카테고리의 다른 글
reset버튼 (0) | 2011.08.21 |
---|---|
radio버튼 (0) | 2011.08.19 |
<select><option>으로 드랍다운메뉴 만들기 (0) | 2011.08.13 |
textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |