formaction 속성이란?
formaction 속성은 하나의 폼(form)에 대해 서로 다른 여러 개의 제출 URL을 지정할 수 있도록 해주는 HTML 속성입니다. 하나의 폼 안에 여러 개의 제출 버튼을 두고, 각 버튼마다 다른 처리 페이지로 데이터를 전송하고 싶을 때 유용하게 사용됩니다.
폼을 제출하면 웹 브라우저는 가장 먼저 클릭된 버튼에 formaction 속성이 지정되어 있는지 확인합니다. 만약 formaction 속성이 존재하지 않는다면, 브라우저는 그다음으로 form 요소 자체에 설정된 action 속성을 찾아 그곳으로 데이터를 전송합니다.
기본 사용 예제
다음은 세 개의 서로 다른 제출 버튼에 각각 formaction 속성을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML formaction attribute</title>
</head>
<body>
<form method="post">
<input type = "text" name="name"/><br>
<button type = "submit" formaction = "btn1.php">Button1</button>
<button type = "submit" formaction = "btn2.php">Button2</button>
<button type = "submit" formaction = "btn3.php">Button3</button>
</form>
</body>
</html>
<form> 태그 외부에서 작동하지 않는 이유
결론부터 말씀드리면, formaction 속성은 form 요소 내부에 있지 않으면 단독으로 작동하지 않습니다. 이는 formaction이 어디까지나 특정 폼에 종속된 속성이기 때문입니다. 폼과 연결되지 않은 제출 버튼은 어떤 데이터를 어디로 보내야 할지 알 수 없으므로, 브라우저가 이를 무시하게 됩니다.
하지만 몇 가지 방법을 통해 form 태그 외부에 있는 버튼도 정상적으로 작동하도록 만들 수 있습니다.
해결 방법: form 속성으로 폼 연결하기
HTML5에서 도입된 form 속성을 활용하면 버튼을 form 태그 외부에 배치하면서도 특정 폼과 연결할 수 있습니다. 즉, 버튼에 연결하고자 하는 폼의 id 값을 form 속성으로 지정해 주기만 하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML formaction attribute</title>
</head>
<body>
<form method="post" id="newForm">
<input type="text" name="name"/>
</form>
<button type="submit" formaction="btn1.php" form="newForm">Button1</button>
<button type="submit" formaction="btn2.php" form="newForm">Button2</button>
<button type="submit" formaction="btn3.php" form="newForm">Button3</button>
</body>
</html>
위 예제처럼 폼에 id="newForm"을 부여하고, 외부에 배치한 각 버튼에 form="newForm" 속성을 추가하면 버튼이 물리적으로 form 태그 밖에 있더라도 해당 폼과 연결됩니다. 이렇게 하면 formaction 속성이 의도한 대로 정상적으로 작동하여, 각 버튼을 클릭할 때 서로 다른 URL로 폼 데이터를 제출할 수 있습니다.
정리
formaction 속성은 하나의 폼에 여러 개의 제출 URL을 지정할 때 사용합니다.- 브라우저는 먼저
formaction을 확인하고, 없으면 form 요소의 action 속성을 사용합니다. - 버튼이 form 태그 외부에 있으면
formaction만으로는 작동하지 않습니다. - HTML5의
form 속성에 폼의 id 값을 지정하면 외부 버튼도 폼과 연결되어 정상 작동합니다.
