HTML form 태그: action·GET·POST와 입력 값 전송 방법

HTML Reference

작성일 2024-09-08 최근 수정일 2026-10-30

HTML의 <form>은 입력 요소를 묶어 서버에 제출하는 양식입니다. action으로 처리 주소를, method로 제출 방식을 정합니다. GET은 값을 URL의 쿼리에, POST는 요청 본문에 담지만 POST 자체가 데이터를 암호화하는 것은 아닙니다.

action·method·name의 역할

action은 브라우저가 요청을 보낼 주소입니다. 생략하면 현재 문서 주소로 제출합니다. method의 기본값은 get이며, 조회·검색처럼 상태를 변경하지 않는 요청에 적합합니다. 생성·수정 같은 처리는 보통 post로 구현하며 서버에서 인증·권한·요청 검증을 함께 처리합니다.

입력 요소의 id는 label 연결과 문서 내 식별에, name은 제출 데이터의 키에 사용합니다. name이 없으면 일반적인 입력 값은 제출 항목에서 빠집니다. disabled 항목과 선택되지 않은 체크박스·라디오 버튼도 제외됩니다. form을 다른 form 안에 중첩하지 않습니다.

전체 실습 준비와 입력 양식

값을 받는 서버까지 확인하려면 HTML 파일만 여는 것으로는 충분하지 않습니다. PHP 8.x가 설치된 로컬 환경에서 빈 실습 폴더를 만들고 다음 두 파일을 같은 폴더에 저장합니다. 이 예제는 전달받은 값을 화면에 표시할 뿐 저장·메일 발송·계정 변경을 하지 않습니다.

첫 파일은 index.html입니다. 같은 입력을 GET과 POST로 비교하도록 두 번째 제출 버튼에 formmethod를 지정했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GET·POST 양식 실습</title>
</head>
<body>
  <h1>요청 방식 비교</h1>
  <form action="receive.php" method="get">
    <p>
      <label for="query">검색어</label>
      <input type="text" id="query" name="q" maxlength="80" required>
    </p>
    <p>
      <label for="note">메모</label>
      <textarea id="note" name="note" maxlength="300"></textarea>
    </p>
    <button type="submit">GET로 확인</button>
    <button type="submit" formmethod="post">POST로 확인</button>
    <button type="reset">초기화</button>
  </form>
</body>
</html>

둘째 파일은 receive.php입니다. 요청 방식에 맞는 입력에서 문자열을 읽고, 배열이나 잘못된 길이는 거부합니다. 출력은 HTML 문맥에 맞게 이스케이프합니다.

<?php
declare(strict_types=1);
header('Content-Type: text/html; charset=UTF-8');
$method = $_SERVER['REQUEST_METHOD'];
if ($method !== 'GET' && $method !== 'POST') {
    header('Allow: GET, POST');
    http_response_code(405);
    exit('지원하지 않는 요청 방식입니다.');
}
$input = $method === 'POST' ? $_POST : $_GET;
$q = $input['q'] ?? '';
$note = $input['note'] ?? '';
if (!is_string($q) || !is_string($note) || trim($q) === '' ||
    strlen($q) > 320 || strlen($note) > 1200) {
    http_response_code(400);
    exit('문자열 검색어와 메모를 확인하세요.');
}
function h(string $text): string {
    return htmlspecialchars($text, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}
?>
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>수신 결과</title>
</head>
<body>
  <h1>수신 결과</h1>
  <p>요청 방식: <?= h($method) ?></p>
  <p>검색어: <?= h($q) ?></p>
  <p>메모: <?= h($note) ?></p>
  <p><a href="index.html">양식으로 돌아가기</a></p>
</body>
</html>

HTML maxlength와 서버의 길이 검사는 기준이 다릅니다. 이 서버 예제는 strlen으로 바이트 수의 상한을 제한하며 글자 수 정책을 완전히 재현하는 것은 아닙니다. 중요한 입력 조건은 서버의 실제 업무 규칙에 맞게 검증합니다.

실행하고 GET·POST 요청 비교하기

두 파일이 있는 폴더에서 다음 명령을 실행하고 http://127.0.0.1:8000/index.html을 엽니다. php 명령을 찾지 못하면 설치 경로와 PATH 설정을 확인합니다. PHP 내장 서버는 로컬 개발·실습용이며 운영 서버로 사용하지 않습니다.

php -S 127.0.0.1:8000

검색어를 비운 상태에서 제출하면 required 검사가 막습니다.
검색어 HTML, 메모 연습을 입력하고 GET로 확인합니다. 주소의 쿼리에 q와 note가 나타나며 수신 결과에 요청 방식 GET이 표시됩니다.
양식으로 돌아가 같은 내용을 입력한 뒤 POST로 확인합니다. 주소에 해당 입력값이 추가되지 않고 요청 방식 POST가 표시됩니다. 개발자 도구 Network에서 요청 본문을 확인할 수 있습니다.
메모에 <b>연습</b>를 넣어 제출하면 굵은 글자가 아니라 태그 모양의 텍스트로 표시됩니다. 실습을 마치면 터미널에서 Ctrl+C로 서버를 종료합니다.

제출 방식과 보안·실패 원인 확인

POST도 개발자 도구나 서버에서 내용을 확인할 수 있으며 HTTPS를 사용해야 전송 구간을 보호할 수 있습니다. GET 쿼리는 주소·기록·로그 등에 남을 수 있으므로 비밀번호 같은 민감한 값을 넣지 않습니다. HTML의 required나 maxlength는 사용자 편의를 위한 검사이며 서버 검증을 대체하지 않습니다.

파일 업로드 양식에는 보통 method="post"와 enctype="multipart/form-data"가 필요합니다. 기본 인코딩은 application/x-www-form-urlencoded입니다. 실제 파일 처리에는 크기·유형·저장 위치 검사 등이 추가로 필요하므로 이 문자열 실습과 구분합니다.

404가 나면 action의 상대경로와 파일 이름을, 값이 비면 name과 요청 방식에 맞는 서버 입력을 확인합니다. button의 기본 제출 동작으로 실수하기 쉬우므로 일반 동작 버튼은 type="button"을 명시합니다. reset은 빈칸으로 만드는 기능이 아니라 원래 기본값을 복원합니다. 관련 규칙은 MDN form 문서와 PHP 양식 처리 문서를 참고합니다.

HTML Reference