HTML 16단계 - 폼(Form) 4탄

안녕하세요

HTML 16단계 폼(Form) 4탄 시간이 돌아왔습니다.

저번 시간에는 폼(Form) 3탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 16단계 폼(Form) 4탄을 시작해볼께요~

 

1. 체크박스(CheckBox)

 

체크박스(CheckBox)는 셀렉트박스(select)와 라디오버튼(radio button)이 하나만 선택할 수 있는 반면에 

체크박스(CheckBox)는 여러개를 동시에 선택할 수도 있다는 장점을 가지고 있습니다.

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

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<input type="checkbox" name="chk_box" value="HTML" checked="checked">HTML

<input type="checkbox" name="chk_box" value="CSS">CSS

<input type="checkbox" name="chk_box" value="PHP">PHP

<input type="checkbox" name="chk_box" value="ASP">ASP

<input type="checkbox" name="chk_box" value="JSP">JSP

 

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

위의 예문 소스에서처럼 HTML값이 기본적으로 선택된 채로 출력할려면 checked 속성을 사용하면 됩니다.

그리고 name 속성을 "chk_box" 동일 지정하였습니다. 만약에 HTML과 CSS를 중복 선택할시에 chk_box 필드값은 "HTML, CSS" 의 값으로 전송됩니다.

 

웹프로그램으로 전송된 폼 값을 처리해본 경험이 없는 경우에는 value 값이 얼마나 중요한지를 느끼기에 무척 힘이듭니다. 그러나 폼을 만들고 사용자에게 이 폼에 입력을 요구할시에 어떤 값을 전송 받아서 해당 값을 처리하기 위함인가를 기억하며 주의 해서 웹프로그래밍을 하셔야 됩니다.

 

2. 라디오버튼(RadioButton)

 

라이오버튼(RadioButton)는 체크박스와 비슷하나 라이오버튼(RadioButton)은 하나만 선택할 수 있다는 특징을 가지고 있습니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<input type="radio" name="chk_radio" value="HTML" checked="checked">HTML

<input type="radio" name="chk_radio" value="CSS">CSS

<input type="radio" name="chk_radio" value="PHP">PHP

<input type="radio" name="chk_radio" value="ASP">ASP

<input type="radio" name="chk_radio" value="JSP">JSP

 

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

위의 예문 소스에서처럼 HTML값이 기본적으로 선택된 채로 출력할려면 checked 속성을 사용하면 됩니다.

그리고 name 속성을 "chk_radio" 동일 지정하였습니다. 

 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 폼(Form) 5탄에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.