input type="hidden"

HTML Reference

개요

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다.

사용자가 접속한 IP
로그인한 상태에서의 계정 정보
게시물의 답글인 경우 게시물의 ID

이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정합니다.

문법

<input type="hidden" name="xxx" value="yyy">

예제

다음은 size의 값을 big으로 정하고 넘기는 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="post" action="form-action.php">
      <p>Color</p>
      <label><input type="checkbox" name="color" value="blue"> Blue</label>
      <label><input type="checkbox" name="color" value="red"> Red</label>
      <input type="hidden" name="size" value="big">
      <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
    </form>
  </body>
</html>

값을 받는 방식은 사용자가 입력한 값을 받는 방식과 동일합니다. 아래는 PHP로 값을 받아서 출력하는 코드입니다.

<?php
  $color = $_POST['color'];
  $size = $_POST['size'];
?>
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <p>Your color is <?php echo $color ?>.</p>
    <p>Your size is <?php echo $size ?>.</p>
  </body>
</html>

Blue에 체크하고 전송하면...

전송한 값과 함께 hidden 타입으로 넘어온 값도 출력합니다.

HTML Reference