R's Hacking Daily Log

php - HTML Form으로 데이터 전송하기 (2) 본문

PHP

php - HTML Form으로 데이터 전송하기 (2)

hanhxx 2023. 7. 24. 22:26

Step :: input & Select & TextArea

현재 페이지에서 다른 페이지로 데이터를 전송할 때 html input tag를 활용하여 보낼 수 있음을 

저번 글에서 확인해 보았다.

 

input tag는 말 그대로 데이터를 입력할 수 있는 입력란을 만들어주는 요소인데

type이 무엇이냐에 따라 입력란의 모습도 달라진다. 

 

 

첫 번째로 살펴볼 type은 hidden이다.

<?php
$time = time();
?>

<html>
    <head>
        <title>Hidden</title>
    </head>
    <body>
        <h1>Hidden Example</h1>
        <form action="./post_result.php" method="post">
            name : <input type="text" name="name">
            <input type="hidden" name="time" value=<?php echo $time;?>>
            <input type="submit" value="SUBMIT">
        </form>
    </body>
</html>

hidden type은 의미대로 해당 element를 눈에 보이지 않도록 처리하는 유형이다. 

사용자에게 입력받을 필요는 없지만 필요한 값을 hidden 처리하여 서버에 함께 보낼 때 활용할 수 있다.

 

위의 코드에서는 사용자가 name을 입력해 전송버튼을 누를 때 time() 값 또한 서버로 전달하고 있다. 

hidden type은 브라우저 상에서는 보이지 않지만 소스 코드로는 확인이 가능하다. 

 

따라서 보안상의 목적으로 hidden type을 활용하는 건 충분치 못하다고 할 수 있다. 

 

입력란에 값을 작성해 버튼을 누르면 결과 페이지에서 hidden type으로 전달한 time() 값을 볼 수 있다.

 

 

우측 클릭으로 페이지의 소스 코드를 확인해 보면 hidden type으로 작성된 부분을 확인할 수 있다!!

 

 

두 번째로 살펴볼 type은 checkbox이다.

checkbox는 선택할 수 있는 보기 가운데 두 개 이상의 값을 전달하고 싶은 경우 사용한다. 

 

<html>
    <head>
        <title>Checkbox</title>
    </head>
    <body>
        <h1>CheckBox Example</h1>
        <form action="./checkbox_result.php" method="post">
            <input type="checkbox" name="fruit[]" value="apple">apple
            <input type="checkbox" name="fruit[]" value="strawberry">strawberry
            <input type="checkbox" name="fruit[]" value="banana">banana<br>
            <input type="submit" value="SUBMIT">
        </form>
    </body>
</html>

객관식 문제를 풀 때, 하나의 문제에 대해 "답을 2개 고르시오"와 같은 경우를 상상하면 된다. 

 

답은 여러 개를 선택하지만 이 값들이 모두 하나의 문제에 대한 값임을 나타내기 위해서 위의 코드에서는 

input - name 속성을 동일한 배열 이름으로 작성하고 있다. 

 

그렇기에 선택된 checkbox들은 $_POST안에 key가 fruit인 배열로 저장된다. 

 

 

[ checkbox_result.php ]

<html>
    <head>
        <title>Checkbox Result</title>
    </head>
    <body>
        <h1>CheckBox Example</h1>
        <?php
        if(isset($_POST['fruit'])) {
            echo "선택한 과일은 <br/>";
            for($i=0; $i<count($_POST['fruit']); $i++) {
                $fruit = $_POST['fruit'][$i];
                echo $fruit."<br/>";
            }
            echo "입니다.";
        } else {
            echo "선택한 과일이 없습니다.";
        }
        ?>
    </body>
</html>

결과 페이지 코드를 보면 $_POST에 key가 fruit인 값이 존재하는지 확인한 후(isset 함수)

fruit 배열에 들어있는 아이템을 하나씩 출력하는 과정이 php로 작성되어 있다. 

 

 

결과를 보면 checkbox.php에서 선택한 값들이 모두 전달되어 결과 페이지에 나열되고 있음을 알 수 있다.

 

 

다음으로 살펴볼 유형은 radio이다. 

<html>
    <head>
        <title>Radio</title>
    </head>
    <body>
        <h1>Radio Example</h1>
        <form action="./post_result.php" method="post">
            학년 : 
            <input type="radio" name="degree" value="1학년">1 학년
            <input type="radio" name="degree" value="2학년">2 학년
            <input type="radio" name="degree" value="3학년">3 학년
            <br>

            반 : 
            <input type="radio" name="class" value="A반">A 반
            <input type="radio" name="class" value="B반">B 반
            <input type="radio" name="class" value="C반">C 반
            <br>

            <input type="submit" value="SUBMIT">
        </form>

    </body>
</html>

radio type은 여러 보기 중에서 한 가지만 선택할 수 있는 형태로 

선택했던 보기가 아닌 다른 보기를 선택하면 이전 값은 덮어씌워진다. 

 

학년 & 반이라는 값에 각각 3개씩 선택 가능한 보기가 주어진다. 

이때 선택한 값이 degree & class 값으로 전달되어 $_POST에 들어가게 된다. 

 

 

[ post_result.php ]

<?php
$degree = $_POST['degree'];
$class = $_POST['class'];
?>

<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <h1>Radio Example</h1>
        <?php echo $degree.$class; ?>
    </body>
</html>

결과 페이지에서는 $_POST에 저장된 값을 가져와 echo 함수를 통해 값을 출력한다. 

 

 

지금까지 input tag의 type을 살펴봤다면, 이번에는 다른 tag에 대해 알아보려고 한다. 

 

1) select tag

<html>
    <head>
        <title>Select</title>
    </head>
    <body>
        <h1>Select Example</h1>
        <form action="./post_result.php" method="post">
            도착지 : 
            <select name="dest">
                <option value="강릉">강릉</option>
                <option value="목포">목포</option>
                <option value="천안">천안</option>
                <option value="부산">부산</option>
            </select><br>
            출발 시간 : 
            <select name="time">
                <option value="6시">6시</option>
                <option value="10시">10시</option>
                <option value="12시">12시</option>
            </select><br>

            <input type="submit" value="SUMBIT">        
        </form>
    </body>
</html>

 

select tag는 기본적으로 한 가지 값만 노출시키고 있지만 클릭해 보면

보기들이 아래쪽으로 나열되어 그중 하나를 선택할 수 있게 된다. 

 

select 안에 나열할 보기는 option tag로 정의할 수 있다.

 

option tag로 만들어둔 부산, 강릉, 목포, 천안 보기가 select tag를 클릭하니 나타나는 걸 볼 수 있다. 

 

 

[ post_result.php ]

<?php
$dest = $_POST['dest'];
$time = $_POST['time'];
?>

<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <h1>Example</h1>
        <?php echo $dest."로 출발하는 ".$time."열차 선택"; ?>
    </body>
</html>

select tag는 여러 option을 가질 수 있지만 한 가지 값만 전달하며 선택된 option 값이 $_POST에 들어가게 된다. 

이때 사용되는 key는 option이 아니라 select tag에 지정된 name 속성 값을 사용한다. 

 

 

2) textarea tag

<html>
    <head>
        <title>TextArea</title>
    </head>
    <body>
        <h1>Textarea Example</h1>
        <form action="./textarea_result.php" method="post">
            <textarea name="text" cols="30" rows="10"></textarea>
            <br><input type="submit" value="SUBMIT">
        </form>
    </body>
</html>

textarea는 메모장처럼 줄 바꿈을 포함하는 문자열을 입력할 수 있다.

 

 

결과에서 보이는 것처럼 줄 바꿈까지 포함한 원본이 그대로 출력되는 걸 볼 수 있다.

이전 tag & type 과는 다르게 여러 줄의 문구를 포함하다 보니 결과 페에지에서의 코드도 조금 다르다.

 

 

[ teatarea_result.php ]

<html>
    <head>
        <title>TextArea Result</title>
    </head>
    <body>
        <h1>TextArea Example</h1>
        <?php echo nl2br($_POST['text']); ?>
    </body>
</html>

코드를 보면 textarea에 입력된 값을 출력하기 위해 nl2br() 함수를 사용하고 있다. 

(여러 줄로 구분된 데이터를 받을 경우에는 nl2br 함수를 사용해서 값을 출력해야 한다.)

 

 

지금까지 html tag를 이용해 데이터를 전달하는 방법에 대해 살펴보았다.

어떤 tag를 사용하든 method 속성에 의해서 전달된 데이터가 저장되는 변수가 정해진다는 걸 유의하자!

 

method = "post"인 경우, $_POST[key]
method = "get"인 경우, $_GET[key]

 

 

'PHP' 카테고리의 다른 글

php - File Upload (2)  (0) 2023.07.25
php - File Upload (1)  (0) 2023.07.25
php - HTML Form으로 데이터 전송하기 (1)  (0) 2023.07.23
php Cookie  (0) 2023.07.22
php Session  (0) 2023.07.21
'PHP' Related Articles more
Comments