레이아웃(Layout)
CSS 레이아웃
점선 테이블1
점선 테이블2
메타(Meta)
이미지맵(image map)
아이프레임(iframe)
입력양식(form)
텍스트 필드(Text Field)
패스워드(Password Field)
텍스트에어리어(textarea)
셀렉트박스(select)
체크박스(Check Box)
라디오버튼(Radio Button)
리셋버튼(Reset Button)
전송버튼(Submit Button)
이미지 버튼(Image Type)
파일(File Form Control)
히든 필드(Hidden Field)
label
autocomplete
배경음악
필드셋(Fieldset)
마퀴(Marquee)
HTML과 XHTML
오브젝트(Object)
체크박스(Check Box)

셀렉트박스(select)와 라디오 버튼(radio button)이 하나만 선택할 수 있는 반면 체크박스는 여러개를 선택할 수 있다는 특징을 가지고 있습니다.

<input type="checkbox" name="chk_info" value="HTML">HTML
<input type="checkbox" name="chk_info" value="CSS">CSS
<input type="checkbox" name="chk_info" value="웹디자인">웹디자인

기본적인 체크박스(Check Box)의 형태입니다.

HTML CSS 웹디자인

value 속성은 선택시 전송해 주는 값을 지정합니다.

위의 예제에서 CSS가 기본적으로 선택된채로 출력할려면 checked 속성을 사용하면 됩니다.

<input type="checkbox" name="chk_info" value="HTML">HTML
<input type="checkbox" name="chk_info" value="CSS" checked="checked">CSS
<input type="checkbox" name="chk_info" value="웹디자인">웹디자인

아래와 같이 CSS가 기본적으로 선택된 상태로 출력됩니다.

HTML CSS 웹디자인


체크박스(Check Box)는 복수의 값을 선택할 수 있기에 폼이 전송될때 이 값들이 어떻게 전송되는지를 잘 이해해야 합니다.

위의 예제에서 체크박스의 name 속성을 3개 모두 "chk_info"라고 지정하였습니다. 이때 HTML과 CSS를 동시에 선택하면 chk_info 필드의 값은 "HTML,CSS" 이런식으로 들어갑니다.

웹프로그램으로 전송된 폼 값을 처리해본 경험이 없는 경우 value 값이 중요한지 느끼기가 힘듭니다. 그러나 폼을 만들고 사용자에게 이 폼에 입력을 하라고 요구하는 것은 어떤 값을 전송 받아서 이를 처리하기 위함인것을 기억해야 합니다.

즉 왜 폼을 만드는지 이해를 한 상태에서 <form>태그와 폼 필드를 익혀야 한다는 말입니다.

Copyright © Homejjang.com All rights reserved.