체크박스

Programming/HTML 2017. 12. 12. 10:08

체크박스는 여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤이다.

 

문법

<input type="checkbox" name="값의 이름" value="값">
  - checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정
  - name의 끝에 '[]'을 붙이면 서버 쪽에서 실행하는 언어가 이 값을 배열로 인지.

 

예제

  - checkboxexample.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

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
        당신의 관심사는? <br />
        <ul>
            <?php
            foreach($_POST['interest'] as $entry){
                echo "<li>$entry</li>";
            }
            ?>
        </ul>
</body>

</html>

 

예제 설명

예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.

 

 

기획에 checked 옵션이 설정되어 있으므로 처음 check는 기획에 되어있다. 기획 외에도 디자인을 체크하여 제출 버튼을 누르면 아래와 같은 화면이 출력된다.

 

 

'Programming > HTML' 카테고리의 다른 글

URL, 경로  (0) 2017.12.12
파일 업로드  (0) 2017.12.12
콤보 박스  (0) 2017.12.12
라디오 버튼  (0) 2017.12.11
비밀번호, hidden data, textarea  (0) 2017.12.11
블로그 이미지

꼴통보안인

,