이것으로 HTML form 태그 네 번째 포스팅입니다.
(전체 HTML 포스트로는 열다섯 번째)
이번에는 웹사이트의 사용자들에게 여러 가지 선택지 중에서 하나, 혹은 복수개의 선택지를 제출할 수 있게 하는 라디오 버튼과 체크박스에 대해서 배워보겠습니다.
지난 포스트
radio와 checkbox
라디오 버튼 태그
form_choice2.html
<!DOCTYPE html>
<html>
<head>
<title>선택</title>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상</h1>
<input type="radio" name="color" value="red" checked>레드
<input type="radio" name="color" value="blue">블루
<input type="radio" name="color" value="black">블랙
</p>
<input type="submit">
</form>
</body>
</html>
<input> 태그의 type="" 속성에 radio를 넣어주면 라디오 버튼이 생깁니다.
하나의 버튼이 눌러져 있는 상태에서 다른 버튼을 누르면 그 전의 버튼이 튀어나오는 라디오처럼 복수의 선택이 불가능하고 하나만 선택할 수 있는 체크박스입니다.
하나를 체크했을 때 다른 것들은 체크 해제가 되게 하려면 꼭 같은 name="" 값으로 묶어져 있어야 합니다.
서버로 특정한 값을 보내기 위해 value="" 도 지난 포스트에서와 마찬가지로 잊지 말고 꼭 넣어주어야 합니다.
여러 개의 옵션 중에서 하나에 처음부터 체크를 해두고 싶으면 checked 속성을 넣으면 됩니다.
체크박스 태그
form_choice3.html
<!DOCTYPE html>
<html>
<head>
<title>선택</title>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>악기 (다중 선택)</h1>
<input type="checkbox" name="instrument" value="guitar" checked>기타
<input type="checkbox" name="instrument" value="bass" checked>베이스
<input type="checkbox" name="instrument" value="drums">드럼
</p>
<input type="submit">
</form>
</body>
</html>
체크박스는 라디오 버튼과는 다르게 여러 개의 항목을 체크할 수 있습니다.
그 외 다른 속성들은 라디오 버튼과 동일하니 넘어가겠습니다.
다음 포스트
댓글 쓰기
1. 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
2. 가능하면 비로그인 방문자 분께서는 익명보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
3. 구글 블로그에 댓글을 쓰고 '게시' 버튼을 클릭했을 때 가끔 에러가 발생해서 댓글이 날아가는 이슈가 있습니다.
혹시 장문의 댓글을 남기실 분들은 혹시 모를 에러를 대비해 '게시' 버튼 클릭 전에 댓글을 복사해두세요.