라디오 버튼
여러개의 항목 중에서 하나만을 선택 할 수 있도록 제한하는 컨트롤
문법
<input type="radio" name="값의 이름" value="값" checked="checked">
예제
example1.html - (jsfiddle, github)
<!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)
<html>
<body>
당신의 관심사는? <?=$_POST['interest']?>
</body>
</html>
콤보박스
여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤로 흔히 콤보박스라고 부른다.
문법
<select name="값의 이름" multiple="multiple"> <option value="선택될 경우 name의 값이 됨" selected="selected">값에 대한 표시값</option> ...option 반복 </select>
- multiple : 이 속성의 값을 mulitple로 지정하면 여러개의 항목을 선택할 수 있는 컨트롤이 된다.
예제
example2.html - (jsfiddle, github)
<!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>
체크 박스
여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤로 체크박스라고 부른다.
문법
<input type="checkbox" name="값의 이름" value="값" />
- checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정한다. (예제참고)
- name의 이름 끝에 '[]'를 붙이면 서버 쪽에서 실행되는 언어가 이 값을 배열로 인지한다.
예제
example3.html (jsfiddle, github)
<!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)
<html>
<body>
당신의 관심사는? <br />
<ul>
<?php
foreach($_POST['interest'] as $entry){
echo "<li>$entry</li>";
}
?>
</ul>
</body>
</html>
