HTML 폼(form)의 action 속성은 웹 페이지에서 폼이 제출될 때 데이터가 어떻게 처리될지 정의합니다. action 속성의 값은 폼 내용을 처리할 웹 리소스의 URL이어야 합니다.
사이트나 웹 애플리케이션에서 폼을 만들어 데이터를 입력받다 보면, 결국 그 데이터로 무언가를 처리해야 하는 순간이 옵니다. 바로 이때 폼의 action 속성이 필요합니다.
먼저 HTML에서 폼을 만드는 기본 구조를 알아야 합니다. 기본적으로 폼 내용을 <form> 요소로 감싸게 되는데, 여는 태그에는 여러 속성을 지정할 수 있고 그중 하나가 바로 action입니다.
action 속성은 폼이 제출될 때 데이터를 어디로 보낼지 지정하는 역할을 합니다. 즉, action의 값은 폼 데이터를 처리할 페이지가 됩니다.
HTML 폼 action 속성은 폼 내용을 처리할 URL을 명시합니다. 이때 action 속성이 가리키는 웹 리소스가 method 속성에 지정한 전송 방식(GET/POST)을 지원하는지 반드시 확인해야 합니다.
action 속성의 기본 문법을 살펴보겠습니다:
<form action="/submit.php"> </form>
action 속성은 여는 <form> 태그 안에 위치하며, 일반적으로 method 속성과 함께 사용됩니다.
기본적으로 method 속성은 "get"으로 설정되어 있습니다. 즉, 폼이 제출될 때 HTTP GET 요청 방식으로 데이터를 전송한다는 의미입니다. 여는 <form> 태그에 method="post"를 지정하면 전송 방식을 변경할 수 있습니다.
제출(submit) 버튼을 클릭하면 폼 데이터가 action에 지정된 URL로 전송됩니다.
폼 action HTML 예제
실제 예제를 통해 살펴보겠습니다:
<form action="process.html" method="get"> <label for="username">User</label> <input type="text" id="username" name="username"><br><br> <label for="email">Email</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>
위 코드에서 action은 username과 email 데이터를 process.html이라는 페이지로 전송합니다. username 입력 필드는 텍스트 타입으로, email 필드는 이메일 타입으로 정의했으며, input type="submit"으로 제출 버튼을 만들었습니다. 이 버튼을 클릭하면 데이터가 action URL로 전송됩니다.
이제 위 예제 폼을 실제 HTML 파일에 넣어 보세요. 그다음 같은 폴더에 process.html이라는 이름의 파일을 하나 더 만들고 아래 내용을 작성합니다:
<html> <head> <meta charset="UTF-8"> <title>Process</title> </head> <body>This is the destination process page</body> </html>
이 코드는 페이지가 로드될 때 텍스트 한 단락을 표시하는 간단한 웹 페이지를 정의합니다. 이제 앞서 만든 폼으로 돌아가 내용을 채워 넣어 보세요:
제출 버튼을 클릭하면 자동으로 process.html 페이지로 이동합니다! 그런데 주소창을 잘 보면 추가된 데이터가 보이죠? "?" 기호 뒤에 붙은 데이터는 쿼리 파라미터(query parameter)입니다. GET 방식으로 요청했기 때문에 데이터가 쿼리 파라미터 형태로 전달된 것입니다.
이 예제만 보면 크게 유용하지 않다고 느낄 수 있습니다. 사실 그렇습니다. 실무에서 action 속성은 주로 폼 내용을 서버 페이지로 전송하는 데 사용됩니다. 예를 들어 process.php라는 PHP 파일을 사용할 수 있죠.
process.php는 전달받은 데이터로 다양한 작업을 처리합니다. 데이터를 데이터베이스에 저장하거나, 이벤트 신청 접수를 처리하는 등 활용 범위는 무궁무진합니다. PHP는 웹 개발에서 널리 사용되는 강력한 서버 스크립팅 언어입니다. WordPress를 사용해 본 경험이 있다면, 그 데이터 처리 과정이 PHP를 통해 이루어졌을 것입니다.
PHP에 대해 더 자세히 알고 싶다면 PHP 학습 가이드를 참고해 보세요.
action 속성은 필수인가요?
HTML4 시절에는 답이 '예'였습니다. 하지만 HTML5부터는 action 속성을 반드시 지정할 필요가 없습니다. action 속성 없이 form 태그를 사용하면 데이터가 현재 페이지 자신에게 전송됩니다.
왜 이런 방식을 사용할까요? 싱글 페이지 애플리케이션(SPA)의 등장 이후, JavaScript로 폼 데이터를 직접 처리하고 싶은 경우가 많아졌습니다. 또는 React나 Angular 같은 프레임워크를 활용해 데이터를 처리할 수도 있습니다.
Vanilla JavaScript(순수 자바스크립트)를 사용한다면, 보통 폼이 제출되는 시점에 실행되는 이벤트 리스너(event listener)를 추가하는 방식으로 처리합니다.
마무리
HTML 폼 action 속성은 폼이 제출될 때 폼 내용이 어떻게 처리될지 정의하며, URL을 값으로 받습니다.
웹 개발자가 되는 것이 목표인가요? HTML 학습 가이드를 확인해 보세요. HTML을 효율적으로 배우는 전문가 조언과 함께 추천 온라인 강좌 및 학습 자료 목록까지 만나볼 수 있습니다.