HTML의 formaction 속성은 하나의 폼 안에 제출(submit) 버튼이 두 개 이상 있고, 각 버튼이 서로 다른 페이지로 데이터를 전송해야 할 때 유용하게 사용됩니다. 즉, 각각의 제출 버튼에 formaction 속성을 지정하면 버튼마다 다른 처리 페이지로 데이터를 보낼 수 있습니다.
여기서 중요한 점은 formaction 속성이 폼 태그에 설정된 기존의 action 속성보다 우선순위가 높다는 것입니다. 따라서 특정 버튼에만 별도의 전송 경로를 지정하고 싶을 때 매우 편리합니다.
브라우저 호환성 주의사항
참고: formaction 속성은 Internet Explorer 9 및 그 이하 버전에서는 지원되지 않습니다. 구형 브라우저를 고려해야 하는 프로젝트라면 대체 방안을 마련하는 것이 좋습니다.
formaction 속성 사용 예제
아래 코드를 실행하면 HTML에서 formaction 속성이 어떻게 동작하는지 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML formaction attribute</title> </head> <body> <form action = "/new1.php" method = "get"> Student name: <input type = "text" name = "name"><br> Student Subject: <input type = "text" name = "subject"><br> <button type = "submit">Submit</button><br> <button type = "submit" formaction = "/new2.php">Another page</button> </form> </body> </html>
예제 설명
위 예제에서 폼의 기본 action 값은 /new1.php로 설정되어 있습니다. 첫 번째 'Submit' 버튼을 클릭하면 데이터가 기본 설정대로 /new1.php로 전송됩니다.
반면 두 번째 'Another page' 버튼에는 formaction = "/new2.php"가 지정되어 있기 때문에, 이 버튼을 클릭하면 폼의 기본 action을 무시하고 데이터가 /new2.php로 전송됩니다.
정리
formaction 속성은 하나의 폼에서 목적지가 다른 여러 개의 제출 버튼을 구현할 때 필수적인 기능입니다. 별도의 자바스크립트 없이 순수 HTML만으로 버튼별 전송 경로를 다르게 설정할 수 있다는 점이 큰 장점입니다. 단, 오래된 브라우저 호환성만 유의하면 됩니다.