Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML DOM 제출 버튼 formAction 속성 완벽 가이드

HTML DOM formAction 속성이란?

HTML DOM의 formAction 속성은 제출(submit) 버튼의 formaction 속성 값을 설정하거나 가져오는 데 사용되는 JavaScript 인터페이스입니다. 이 속성은 사용자가 제출 버튼을 클릭했을 때 폼 데이터가 전송될 대상 URL을 지정합니다.

가장 중요한 특징은 formAction 속성 값이 <form> 요소에 설정된 기존 action 속성 값보다 우선 적용된다는 점입니다. 즉, 하나의 폼 안에서도 버튼마다 서로 다른 처리 페이지로 데이터를 전송할 수 있습니다.

주요 특징

  • HTML5에서 새롭게 도입된 속성입니다.
  • type="submit"으로 지정된 <input> 또는 <button> 요소에만 적용됩니다.
  • 폼의 action 속성 값을 덮어쓰기(override)합니다.
  • JavaScript를 통해 런타임에 동적으로 전송 경로를 변경할 수 있습니다.

문법(Syntax)

formaction 값 가져오기:

submitObject.formAction

formaction 값 설정하기:

submitObject.formAction = URL

사용 예제

아래 예제는 제출 버튼의 formaction 값을 읽어오고, 이를 동적으로 변경하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>

<form action="/default-handler">
  <input type="submit" id="myBtn" formaction="/custom-handler">
</form>

<script>
  const btn = document.getElementById("myBtn");

  // 현재 formaction 값 출력 → "/custom-handler"
  console.log(btn.formAction);

  // formaction 값 변경
  btn.formAction = "/new-handler";
</script>

</body>
</html>

위 코드에서 폼 자체에는 /default-handler가 지정되어 있지만, 실제 제출 시에는 버튼의 formaction에 설정된 URL로 데이터가 전송됩니다.

브라우저 지원

formAction 속성은 Chrome, Edge, Firefox, Safari, Opera 등 대부분의 최신 브라우저에서 지원됩니다. 단, Internet Explorer는 지원하지 않으므로 구형 브라우저 호환이 필요한 프로젝트에서는 주의해야 합니다.

마무리

formAction 속성을 활용하면 하나의 폼에서 상황에 따라 여러 서버 엔드포인트로 데이터를 유연하게 전송할 수 있습니다. 임시 저장, 미리보기, 최종 제출처럼 버튼별로 다른 동작이 필요한 UI를 구현할 때 특히 유용합니다.