HTML / form - 데이터를 전달하는 양식 만들기
form
form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다.
문법
|
1 2 3 |
<form method="xxx" action="yyy"> ... </form> |
- method : 값을 전송하는 방법입니다. get 또는 post를 입력합니다.
- action : 값을 전달할 페이지를 입력합니다.
예제 1
get 방식으로 값을 전달하는 간단한 양식입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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에 값이 표시되지 않습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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를 이용한 예제입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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> |
