데이터를 전달하는 양식 만드는 방법 - 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>alt="폼(form) - get 방식 01"
width="728"
height="383"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOBAIy36siqQGtpuOFwd3iYbIx6nPv6DH6yAWHTxZqVUaPAyeT7SGIg4BELPFvReWlnyCN806ft0eo8Wq2gcY15M3nA2atQgt_8pkLbvcjZ5_D9wuE1YjBPN9Ym5EVMLolJfGRkhepio/s0/html-form-01.png"
/>
get 방식의 경우 URL에 전달하는 값이 표시됩니다.
alt="폼(form) - get 방식 02"
width="728"
height="383"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPPW4HJXPZR2c0kw6YjPhcQcadWNtxHGav1yqscx1mQBCV-Kc51HYtzsQHmGXFV8imyfiLZnWQl-g1RfInrtmzIvYQJejyY9penPQkUcHg3Q8NBLnHjNKEelrXigA-IiEV_l_retVtxo/s0/html-form-02.png"
/>
예제 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>alt="폼(form) - post 방식"
width="728"
height="383"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_zIujcCZmBaaAYJYt2xPp9Ws4BIqaca_ArKKZNtMd35YsghpXiMN_MH3eUnIWcLFIztG_TCrJ_TpYT9XG4j5DmK8E0divpfNP3wMC5Mr3pxOBx_5EEc9eRJeuNRDmMAt1PSrJOpFd1OY/s0/html-form-03.png"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_zIujcCZmBaaAYJYt2xPp9Ws4BIqaca_ArKKZNtMd35YsghpXiMN_MH3eUnIWcLFIztG_TCrJ_TpYT9XG4j5DmK8E0divpfNP3wMC5Mr3pxOBx_5EEc9eRJeuNRDmMAt1PSrJOpFd1OY/s0/html-form-03.png"
/>
예제 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>alt="폼(form) - PHP 예시"
width="728"
height="383"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RMS8SeVhatCFu5ATWc9ffVcrOOsFzVtmUmz2dmn6FOsIAZmECkikwX3n8F05J5KI9BhN6KkK4VNVi1x4bvbDcgKfLwxUyEJYGi6VqoJYKHgtD17nzj746xBDoKOMGRb4IC9Tqs8pv-8/s0/html-form-04.png"
/>