데이터를 전달하는 양식 만드는 방법 - form

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

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>
폼(form) - get 방식 01

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

폼(form) - get 방식 02

 

예제 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>
폼(form) - post 방식

 

예제 3

값을 전달받고 사용할 수 있습니다. 다음은 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>
폼(form) - PHP 예시

You may like these posts

  • img <img> 태그는 HTML 문서에 이미지를 삽입하는 태그입니다.   기본형 <img src="images.jpg" alt="No image" width="540" height="360"> 주요 속성은 다음과 같습니다. src : 이미지의 …
  • 줄바꿈 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 <br> 태그를 이용합니다. 다음은 <br&g…
  • 목록에는 순서가 있는 목록(Ordered List), 순서가 필요하지 않은 목록(Unordered List), 설명 목록(Description List) 세 가지가 있습니다. 순서가 있는 목록(OL) 순서가 없는 목록(UL) 설명 목록(DL) 순서 있는 목록 순서가 필요한…
  • 표(table)에 제목이나 설명을 덧붙일 때 <caption> 태그를 사용하지만 <figcaption> 태그를 사용할 수도 있습니다. 두 가지 방법 모두 알아보겠습니다.   caption 먼저 <caption> 태그는 <t…
  • 표 만들 때 사용하는 태그 <table> : 표를 만듭니다. <tr> : 행을 만듭니다. <th> : 열의 제목이 들어가는 셀을 만듭니다. <td> : 내용이 들어가는 셀을 만듭니다. <thead>, <tbody>, …
  • 구글 블로그(Blogger)에서 게시물을 작성하고 페이지와 테마 수정을 위해 필요한 HTML 기본지식 기본형 <name>Contents</name> <name>을 시작 태그, </name>을 종료 태그 라고 합니다. …

Post a Comment