[HTML Form을 통한 데이터 전송] input 태그

HTML의 input 태그는 입력부분과 전송기능을 제공해주는 태그입니다.

type="" 속성을 통해 입력하는 내용이 어떤 정보인지를 지정 가능합니다.

보통의 사용법은 이렇습니다.

<input type="유형" name="속성" value="데이터">

1. hidden 속성으로 데이터 전송

hidden 속성은 화면에 입력부분이 출력되지는 않지만 데이터를 보낼 때 숨겨서 보낼 수 있습니다.

화면상 form에는 보이지 않지만, form을 서버로 전송할 때 함께 전송되는 요소를 보내는데 사용합니다.

# hidden.php

<?php

$name = "sjh";
$id = "test";
$email = "test@test.com";

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hidden</title>
</head>
<body>
    <h1>Hidden Example</h1>
    <form action="./post_result.php" method="post">
        <input type="hidden" name="name" value="<?php echo $name; ?>">
        <input type="hidden" name="id" value="<?php echo $id; ?>">
        <input type="hidden" name="email" value="<?php echo $email; ?>">
        <input type="submit" value="전송">
    </form>
</body>
</html>

input 태그를 사용했지만 속성이 hidden 이므로 브라우저에서 보이지 않습니다.

내부적으로만 데이터를 전달하는 기능으로 이해하면 됩니다.

hidden 속성은 사용자가 직접 입력할 수 없고 숨겨져 있기 때문에 미리 어떤 특정 값을 넣어두어 사용할 수 있도록 구현해야 합니다.

하지만 소스보기를 통해 hidden 속성의 데이터들이 노출될 수 있기에 보안상 사용해도 되는 정보만 넣토록 합니다.

2. 체크박스 태그로 데이터 전달

input 태그의 속상값 중에는 checkbox 라는 속성이 있는데 여러 항목 중 여러 값을 선택하여 데이터를 전달할 수 있습니다.

# checkbox.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CheckBox</title>
</head>
<body>
    <h1> EPL checkbox Example </h1>
    <form action="./checkbox_result.php" method="post">
        <input type="checkbox" name="EPL[]" value="맨유">맨유
        <input type="checkbox" name="EPL[]" value="첼시">첼시
        <input type="checkbox" name="EPL[]" value="토트넘">토트넘
        <input type="checkbox" name="EPL[]" value="리버풀">리버풀
        <br/>
        <input type="submit" value="전송">
    </form>
</body>
</html>

# checkbox_result.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EPL Checkbox Example</title>
</head>
<body>
    <h1>EPL Checkbox Example</h1>
    <?php
    if(isset($_POST['EPL'])){
        echo "선택한 팀은<br/><br/>";
        for($i=0; $i<count($_POST['EPL']); $i++){
            $epl = $_POST['EPL'][$i];
            echo $epl."<br/>";
        }
        echo "<br/>입니다.";
    }else {
        echo "선택한 팀이 없습니다.";
    }
    ?>
</body>
</html>

isset() 함수는 배열이 설정되어 있는지를 확인하여 bool data를 리턴합니다.(true, false)

for 문을 이용하여 post로 전송받은 배열 EPL의 개수만큼 반복문을 실행합니다.

count()함수는 배열에 몇 개의 값이 있는지 개수를 체크합니다.

3. 라디오버튼 태그로 데이터 전달

radio는 여러 개의 항목 중에서 한 가지만 선택하여 데이터를 전달할 수 있습니다.

이미 선택된 항목이 있을 때는 다른 항목을 선택하면 기존 항목이 취소됩니다.

<input type="radio" name="속성값" value="데이터">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Example</title>
</head>
<body>
    <h1>Radio Example</h1>
    <h3> 토트넘에서 제일 좋아하는 선수는? </h3>
    <form action="./post_result.php" method="post">
    선수 :
    <input type="radio" name="name" value="son"> Heung-min Son
    <input type="radio" name="name" value="kane"> Harry Kane
    <input type="radio" name="name" value="bale"> Gareth Bale
    <input type="radio" name="name" value="lamela"> Erik Lamela
    <input type="submit" value="제출">
    <br/>
    </form>
</body>
</html>

name="" 값이 같으면 하나의 그룹으로 묶여 선택이 하나밖에 되지 않습니다.

'php' 카테고리의 다른 글

[php/mysql 연동] 웹서버 연결 (0)	2021.08.30
[HTML Form을 통한 데이터 전송] select 태그 (0)	2021.08.29
[HTML Form을 통한 데이터 전송] POST, GET (0)	2021.08.27
[php 내장함수] 네트워크 관련 함수 (0)	2021.08.26
[php 내장함수] 파일 관련 함수 (0)	2021.08.25

'php' 카테고리의 다른 글

티스토리툴바