본문 바로가기

프로그래밍 공부/PHP

PHP - 송신 버튼, 체크박스 그리고 라디오 버튼

송신 버튼

송신 버튼을 추가하려면 input 태그의 type 속성에 submit을 설정한다. value 속성에 설정한 문자열을 웹 페이지에서 버튼의 이름으로 표시된다. 같은 form 태그 안의 송신 버튼을 2개 이상으로 설정하려면 name 속성을 추가하여 임의의 키로 설정한다. 이전에 작성했던 confirm.php 파일에 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <title>PHP 테스트</title>
</head>
<body>
    확인 화면
    <form name="form1" method="post" action="view.php">
        <?php
            print $_POST["name"]." 님 안녕하세요!";
            print "<br><br>";
            print "본문 :<br>";
            print nl2br($_POST["introduce"]);
        ?>
        <br>
        <!-- 아래의 두개의 input 태그는 type 속성이 submit으로 동일 -->
        <input type="submit" value="확인" name="confirm">
        <input type="submit" value="돌아가기" name="back">
        <input type="hidden" name="name" value="<?=$_POST["name"]?>">
        <input type="hidden" name="introduce" value="<?=$_POST["introduce"]?>">
        <input type="hidden" name="user_id" value="<?=$_POST["user_id"]?>">
    </form>
</body>
</html>
cs

여기서 if 조건문을 사용해 조건에 따라서 표시 화면을 변경할 수 있는데, 조건을 나눠 하나의 PHP 파일에서 여러 개의 화면을 표시할 수 있다. if 조건문의 구조는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
    if(조건식1){
        ?>
        [확인] 버튼을 클릭했을 때의 화면 또는 처리;
        <?php
    }else{
        if(조건식2){
            [돌아가기] 버튼을 클릭했을 때의 화면 또는 처리;
            ?>
            <?php
        }else{
           어느 조건에도 맞지 않을 때의 화면 또는 처리;
            ?>
            <?php
        }
    }
?>
cs

HTML 코드를 그대로 기술 할 수 있도록 if 조건문을 시작 태그와 종료 태그로 나누어 상세하게 구분한다. 이렇게 하면 디자인된 화면의 HTML을 그대로 복사 붙여넣기만 하면 되기 때문에 편리 할 것이다.

예를 들어 이전에 작성했던 view.php 파일에 작을 하게 되면 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
    <title>PHP 테스트</title>
</head>
<body>
<?php
    if(isset($_POST["confirm"])){
        ?>
        <?php
        // 확인 버튼을 누른 경우
        print $_POST["name"]." 님 안녕하세요!";
        print "<br><br>";
        print "본문 :<br>";
        print nl2br($_POST["introduce"]);
        ?>
        <?php
    }else if(isset($_POST["back"])){
        // 돌아가기 버튼을 누른경우
        ?>
        <font size="4">텍스트 발송 테스트</font>
        <form name="form1" method="post" action="confirm.php">
            이름:<br>
            <input type="text" name="name" value="<?=$_POST["name"]?>"><br>
            소개:<br>
            <textarea name="introduce" cols="30" rows="5"><?=$_POST["introduce"]?></textarea><br>
            <input type="submit" value="송신">
            <input type="hidden" name="user_id" value="<?=$_POST["user_id"]?>">
        </form>
        <?php
    }else{
        // 상기 이외의 경우
        ?>
        오류입니다.<br>
        <a href="form.html">form.html</a>로 돌아갑니다.
        <?php
    }    
    ?>
</body>
</html>
cs

확인 버튼이 클릭이 되었을 때 input 태그에 설정된 name 속성인 confirm을 키로 송신이 되기 때문에 $_POST["confirm"]으로 데이터를 참조한다. 여기서 사용하는 함수는 isset 함수인데 이것은 조건 판단에 이용한다. isset 함수는 인수로 지정한 변수에 값이 설정되어 있는지 검사하고 값이 있다면 TRUE를 없으면 FALSE를 리턴한다.

돌아가기 버튼을 클릭하면 form.html로 돌아가는 것이 아니라 form.html과 같은 화면을 출력한다. 기존 form.html과 다른 점이 있다면 각 입력한에 입력된 데이터를 다시 표시하기 위해 input 태그에서 value 속성에 <?=$_POST["name"]?>를 설정하고 있다. textarea 태그는 value 속성을 사용하지 않고 태그 내부에 <?=$_POST["introduce"]?>를 작성하여 표시하고 있다.

체크박스

체크박스는 주로 설문조사에서 취미 선택과 같이 한번에 여러 항목을 선택할 때 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <title>텍스트 송신 테스트</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" text="#000000">
    <font size="4">텍스트 송신 테스트</font>
    <form name="form1" method="post" action="view#2.php">
        취미:<br>
        <input type="checkbox" name="hobby[]" value="운동">운동<br>
        <input type="checkbox" name="hobby[]" value="게임">게임<br>
        <input type="checkbox" name="hobby[]" value="독서">독서<br>
        <input type="checkbox" name="hobby[]" value="요리">요리<br>
        <input type="checkbox" name="hobby[]" value="음악">음악<br>
        <input type="checkbox" name="hobby[]" value="미술">미술<br>
        <input type="checkbox" name="hobby[]" value="영화">영화<br><br>
        <input type="submit" value="송신">
    </form>
</body>
</html>
cs

input 태그의 type 속성에서 checkbox를 선택해 체크박스를 만들 수 있다. 체크박스에 입력한 값을 배열로 받아 처리를 간단하게 할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <title>PHP 테스트</title>
</head>
<body>
<?php
    if(isset($_POST["hobby"])){
        $hobby = implode('와 ',$_POST["hobby"]);
        print "저의 취미는 ";
        print $hobby;
        print "입니다.";
    }else{
        print "저의 취미는 없습니다.";
    }
?>
</body>
</html>
cs

데이터를 받으려면 이전과 마찬가지로 PHP 파일에 isset($_POST["hobby"])로 $_POST["hooby"]에 값이 설정되어 있는지 검사를 하고 확인이 되면 implode 함수를 사용해 $hobby에 할당 한다.

만약 HTML 페이지에서 취미 체크박스를 하나도 선택하지 않았다면 if 조건문에 의해 "저의 취미는 없습니다."가 출력이 된다.

라디오 버튼

라디오 버튼은 설문에서 다지선다형 답을 필요로 할 때 사용한다. 예시로 성별이 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <title>텍스트 송신 테스트</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" text="#000000">
    <font size="4">텍스트 송신 테스트</font>
    <form name="form1" method="post" action="view#3.php">
        성별:<br>
        <input type="radio" name="gender" value="남"><br>
        <input type="radio" name="gender" value="여"><br><br>
        <input type="submit" value="송신">
    </form>
</body>
</html>
cs

체크박스 때와 마찬가지로 input 태그에 type 속성으로 radio를 넣으면 된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <title>PHP 테스트</title>
</head>
<body>
<?php
    if(isset($_POST["gender"]) && ($_POST["gender"== "남" || $_POST["gender"== "여")){
        print "성별:<br>";
        print $_POST["gender"];
    }else{
        print "성별을 선택하세요.<br>";
    }
?>
</body>
</html>
cs

데이터로 받는 것도 체크박스 때와 같지만 다른점은 if 조건문에 버튼 선택의 여부를 확인 조건식이 다른것을 알 수 있다.