HTML의 action 속성은 폼(form)이 제출될 때 입력된 데이터를 전송할 목적지(URL)를 지정하는 핵심 속성입니다. 사용자가 이름, 이메일 등의 정보를 입력하고 제출 버튼을 누르면, 브라우저는 action 속성에 명시된 주소로 해당 데이터를 전송합니다.
기본 문법
action 속성의 기본 문법은 다음과 같습니다.
<form action="URL"> <!-- 폼 요소들 --> </form>
URL에는 상대 경로(예: /submit.php) 또는 절대 경로(예: https://example.com/submit)를 모두 사용할 수 있습니다. 만약 action 속성을 생략하면, 폼 데이터는 별도의 지정 없이 현재 페이지 자신에게 다시 전송됩니다.
예제 코드
다음은 action 속성을 활용해 폼 데이터를 서버로 전송하는 완전한 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
input {
width: 315px;
display: block;
margin: 1rem auto;
border: 2px solid #fff;
padding: 8px;
background: transparent;
border-radius: 20px;
outline: none;
}
::placeholder {
color: #000;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML Form action Attribute Demo</h1>
<form action="/action_page.php" method="get">
<input type="text" name="firstname" placeholder="Enter First Name">
<input type="text" name="lastname" placeholder="Enter Last Name">
<input type="submit" value="SUBMIT" class="btn">
</form>
</body>
</html>
실행 결과
위 코드를 실행하면 이름(firstname)과 성(lastname)을 입력할 수 있는 두 개의 텍스트 필드와 SUBMIT 버튼이 화면에 나타납니다.
각 필드에 값을 입력한 후 SUBMIT 버튼을 클릭하면, 폼 데이터가 action 속성에 지정된 /action_page.php 페이지로 GET 방식으로 전송되는 것을 확인할 수 있습니다. 이처럼 action 속성은 폼 데이터가 최종적으로 도착할 서버 측 처리 페이지를 결정하는 역할을 합니다.
함께 알아두면 좋은 속성들
- method 속성: 데이터를 전송하는 방식(GET 또는 POST)을 지정합니다. 비밀번호처럼 민감한 정보는 URL에 노출되지 않는 POST 방식을 사용하는 것이 안전합니다.
- target 속성: 제출 결과를 현재 창(
_self), 새 창(_blank) 등 어디에 표시할지 결정할 수 있습니다. - novalidate 속성: 브라우저가 기본적으로 수행하는 폼 유효성 검사를 비활성화하여, 직접 구현한 검증 로직만 사용하도록 할 수 있습니다.