라디오 버튼
여러개의 항목 중에서 하나만을 선택 할 수 있도록 제한하는 컨트롤
문법
1 | <input type= "radio" name= "값의 이름" value= "값" checked= "checked" > |
예제
example1.html - (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "example_receive_single.php" method = "POST" > 관심사 : < br /> < input type = "radio" name = "interest" value = "programming" checked = "checked" /> 프로그래밍< br /> < input type = "radio" name = "interest" value = "design" /> 디자인< br /> < input type = "radio" name = "interest" value = "planning" /> 기획< br /> < input type = "submit" /> </ form > </ body > </ html > |
example_receive_single.php - 사용자가 전송한 데이터를 서버 쪽에서 처리한다. (github)
1 2 3 4 5 | <html> <body> 당신의 관심사는? <?= $_POST [ 'interest' ]?> </body> </html> |
콤보박스
여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤로 흔히 콤보박스라고 부른다.
문법
1 2 3 4 | < select name = "값의 이름" multiple = "multiple" > < option value = "선택될 경우 name의 값이 됨" selected = "selected" >값에 대한 표시값</ option > ...option 반복 </ select > |
- multiple : 이 속성의 값을 mulitple로 지정하면 여러개의 항목을 선택할 수 있는 컨트롤이 된다.
예제
example2.html - (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "example_receive_single.php" method = "POST" > 관심사 : < br /> < select name = "interest" > < option value = "programming" >프로그래밍</ option > < option value = "design" selected = "selected" >디자인</ option > < option value = "planning" >기획</ option > </ select > < input type = "submit" /> </ form > </ body > </ html > |
체크 박스
여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤로 체크박스라고 부른다.
문법
1 | <input type= "checkbox" name= "값의 이름" value= "값" /> |
- checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정한다. (예제참고)
- name의 이름 끝에 '[]'를 붙이면 서버 쪽에서 실행되는 언어가 이 값을 배열로 인지한다.
예제
example3.html (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "example_receive_multi.php" method = "POST" > 관심사 : < br /> < input type = "checkbox" name = "interest[]" value = "programming" /> 프로그래밍< br /> < input type = "checkbox" name = "interest[]" value = "design" /> 디자인< br /> < input type = "checkbox" name = "interest[]" value = "planning" checked = "checked" /> 기획< br /> < input type = "submit" /> </ form > </ body > </ html > |
example_receive_multi.php - (github)
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> 당신의 관심사는? <br /> <ul> <?php foreach ( $_POST [ 'interest' ] as $entry ){ echo "<li>$entry</li>" ; } ?> </ul> </body> </html> |