안녕하세요
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탄에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.
'IT > HTML CSS' 카테고리의 다른 글
HTML 18단계 - 폼(Form) 6탄 (276) | 2020.12.13 |
---|---|
HTML 17단계 - 폼(Form) 5탄 (259) | 2020.12.13 |
HTML 15단계 - 폼(Form) 3탄 (0) | 2020.12.11 |
HTML 14단계 - 폼(Form) 2탄 (862) | 2020.12.11 |
HTML 13단계 - 폼(Form) 1탄 (839) | 2020.12.11 |
댓글