데이터를 전달하는 양식 만드는 방법 - 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

  • placeholder 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶다면 placeholder를 사용합니다. 예를 들어 '네이버' 같은 포털 사이트의 로그인 창에서도 따로 '아이디'나 '비밀번호' 같은 제목을 붙이지 않고 입력 필드 안에 '아이디' 나 '비밀번호'를 표시해 놓아 사용자가 알…
  • pre HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됩니다. 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈 칸으로 인식하고 페이지의 내용이 한 줄로 표시합니다. 만약 입력한 그대로 출력되도록 하려면 <pre> 태그를 이용합니다. …
  • form <form> 은 데이터를 입력받고 전송할 때 사용하는 태그입니다.   기본형 <form method="xxx" action="yyy"> ... ... </form> method : 값을 전송하는 방법입니다. get 또는 p…
  • 체크박스 체크박스는 두 개 이상 여러 가지를 선택해야 할 경우 사용합니다. 클릭하면 선택되고, 다시 클릭하면 선택이 해제됩니다. 체크박스는 <input> 태그로 만듭니다.   기본형 <input type="checkbox" name="xxx" value=…
  • <label> 태그는 양식에 제목이나 설명을 덧붙이기 위한 것입니다. 라벨(label) 이란 입력창 옆에 'ID' 나 '비밀번호' 처럼 붙여 놓은 텍스트를 말합니다. <label> 태그를 사용하면 폼 요소와 라벨 텍스트가 서로 연결되어 있다는 것을 브라우저가 인식할 수 있습…
  • 라디오 버튼 라디오 버튼은 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼입니다. 라디오 버튼은 <input> 태그로 만듭니다.   기본형 <input type="radio" name="xxx" value="yyy" checked> …

Post a Comment