HTML 폼 전송하기: action과 method 속성 이해하기
HTML 폼을 사용하면 사용자가 입력한 데이터를 서버로 전송할 수 있습니다. 폼 전송에는 action과 method 속성이 중요한 역할을 합니다. 이 글에서는 이 두 속성을 이해하고 활용하는 방법을 알아보겠습니다.
action 속성
action 속성은 폼 데이터를 전송할 URL을 지정합니다. 폼을 제출하면, 지정된 URL로 데이터가 전송됩니다. 예를 들어, 다음과 같은 폼을 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<form action="/submit-form">
<div>
<label for="email">이메일:</label>
<input id="email" name="email" type="email" required>
</div>
<div>
<label for="password">비밀번호:</label>
<input id="password" name="password" type="password" required>
</div>
<button type="submit">제출</button>
</form>
</body>
</html>위 폼은 /submit-form URL로 데이터를 전송합니다. 사용자가 이메일과 비밀번호를 입력하고 제출 버튼을 누르면, 폼 데이터는 지정된 URL로 전송됩니다.
method 속성
method 속성은 폼 데이터를 전송할 HTTP 메서드를 지정합니다. 주로 사용되는 메서드는 GET과 POST입니다.
- GET: 데이터를 URL의 쿼리 문자열로 전송합니다. 기본값으로 설정되어 있으며, 주로 데이터를 조회할 때 사용됩니다.
- POST: 데이터를 HTTP 요청의 본문에 포함하여 전송합니다. 주로 데이터를 생성하거나 업데이트할 때 사용됩니다.
GET 메서드 사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>검색</title>
</head>
<body>
<form action="/search" method="get">
<label for="query">검색어:</label>
<input id="query" name="q" type="text" required>
<button type="submit">검색</button>
</form>
</body>
</html>위 폼에서 사용자가 검색어를 입력하고 제출하면, URL은 다음과 같이 변합니다.
/search?q=검색어POST 메서드 사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>파일 업로드</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<div>
<label for="file">파일 선택:</label>
<input id="file" name="file" type="file" required>
</div>
<button type="submit">업로드</button>
</form>
</body>
</html>위 폼은 파일을 업로드할 때 사용됩니다. method 속성을 post로 설정하고, enctype 속성을 multipart/form-data로 설정하여 파일 데이터를 전송할 수 있습니다.
테스트용 서버 사용 예제
테스트용 서버를 사용하여 폼 데이터를 실제로 전송해 볼 수 있습니다. 여기서는 Request Bin(https://requestbin.com/)을 사용하여 테스트 서버를 생성하고 폼 데이터를 전송하는 방법을 설명하겠습니다.
- Request Bin에 접속하여 간단한 회원가입을 진행합니다.
- "Create a Request Bin" 버튼을 클릭하여 새로운 요청 URL을 생성합니다.
- 생성된 요청 URL을 복사합니다.
Request Bin 예제 폼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테스트 폼</title>
</head>
<body>
<form action="https://enl9h4p0mrly.x.pipedream.net" method="post">
<div>
<label for="username">사용자 이름:</label>
<input id="username" name="username" type="text" required>
</div>
<div>
<label for="email">이메일:</label>
<input id="email" name="email" type="email" required>
</div>
<button type="submit">제출</button>
</form>
</body>
</html>위 폼에서 사용자가 데이터를 입력하고 제출하면, 데이터는 Request Bin 서버로 전송됩니다. Request Bin 관리 화면에서 전송된 데이터를 확인할 수 있습니다.
결론
HTML 폼을 사용하여 데이터를 전송할 때 action과 method 속성을 올바르게 설정하는 것이 중요합니다. action 속성은 데이터를 전송할 URL을 지정하고, method 속성은 데이터를 전송할 HTTP 메서드를 지정합니다. GET 메서드는 데이터를 URL 쿼리 문자열로 전송하고, POST 메서드는 데이터를 HTTP 요청 본문에 포함하여 전송합니다. 이러한 속성을 이해하고 적절히 활용하면 폼 데이터를 효과적으로 전송할 수 있습니다.
