개요
HTML 폼(form)의 action 속성과 method는 폼에 기본적으로 내장되어 있는 값이 아니라, 개발자가 직접 지정해야 하는 항목입니다. 자바스크립트에서는 폼 요소가 제공하는 action 속성과 method 속성을 사용하면 이 두 가지 값을 매우 간단하게 읽어올 수 있습니다. 이번 글에서는 각각의 사용 방법을 예제와 함께 살펴보겠습니다.
1. action 속성 확인하기
action 속성은 폼 데이터가 전송될 목적지 URL을 나타냅니다. 다음 예제에서는 document.getElementById()로 폼 요소를 가져온 뒤, action 속성을 이용해 폼의 action 값을 읽어 화면에 출력합니다.
예제
<html>
<body>
<form id="frm1" action="/online_javascript_editor.php" method="get"></form>
<p id="demo"></p>
<script>
var act = document.getElementById("frm1").action;
document.getElementById("demo").innerHTML = act;
</script>
</body>
</html>
실행 결과
https://www.tutorialspoint.com/online_javascript_editor.php
위 코드를 실행하면 폼 태그에 지정된 action 경로가 그대로 출력되는 것을 확인할 수 있습니다. 상대 경로로 지정한 경우에는 브라우저가 현재 페이지의 도메인을 붙여 완전한 URL 형태로 반환한다는 점도 참고하면 좋습니다.
2. method 값 확인하기
method는 폼 데이터를 서버로 전송할 때 사용할 HTTP 방식(get 또는 post)을 의미합니다. 다음 예제에서는 method 속성을 이용해 폼에 설정된 전송 방식을 읽어 결과를 출력합니다.
예제
<html>
<body>
<form id="frm1" action="/online_javascript_editor.php" method="get"></form>
<p id="demo"></p>
<script>
var met = document.getElementById("frm1").method;
document.getElementById("demo").innerHTML = met;
</script>
</body>
</html>
실행 결과
get
실행 결과로 get이 출력되었습니다. 만약 폼에 method가 별도로 지정되어 있지 않다면, 브라우저의 기본값인 get이 반환됩니다.
마무리
이처럼 자바스크립트에서는 form.action과 form.method 속성만으로 폼의 제출 대상과 전송 방식을 손쉽게 조회할 수 있습니다. 두 속성은 읽기뿐만 아니라 쓰기도 가능하기 때문에, 런타임에 동적으로 폼의 동작을 변경해야 할 때도 유용하게 활용할 수 있습니다.