CODING FACTORY

HTML / form / 데이터를 전달하는 양식 만들기

form

form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다.

문법

<form method="xxx" action="yyy">
...
</form>
  • method : 값을 전송하는 방법입니다. get 또는 post를 입력합니다.
  • action : 값을 전달할 페이지를 입력합니다.

예제 1

get 방식으로 값을 전달하는 간단한 양식입니다.

<!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="get" action="form-action.php">
      <p><label>Input Color : <input type="text" name="color"></label></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

get 방식의 경우 URL에 전달하는 값이 표시됩니다.

예제 2

post 방식으로 값을 전달하면 URL에 값이 표시되지 않습니다.

<!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><label>Input Color : <input type="text" name="color"></label></p>
      <p><input type="submit" value="Submit"></p>
    </form>
  </body>
</html>

예제 3

값을 전달받고 사용할 수 있습니다. 다음은 PHP를 이용한 예제입니다.

<?php
  $color = $_POST['color']; 
?>

<!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>
    <h1>Submitted</h1>
    <p>Your color is <?php echo $color ?>.</p>
  </body>
</html>

HTML

HTML

최근 글