HTML DOM의 form action 속성은 form 요소의 action 속성과 연결된 속성입니다. 이 속성은 사용자가 폼을 제출한 후, 폼 데이터가 전송될 웹 페이지의 주소를 지정하는 역할을 합니다. 즉, 폼이 제출될 때 데이터를 어디로 보낼지 결정하는 중요한 속성입니다.
문법(Syntax)
form action 속성을 설정하는 기본 문법은 다음과 같습니다.
formObject.action = URL
여기서 URL은 폼 데이터를 전송할 대상 주소를 의미하며, 절대 URL(예: https://example.com/submit) 또는 상대 URL(예: /submit.php) 모두 사용할 수 있습니다.
예제(Example)
다음은 form action 속성을 활용한 실제 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function changeAction() {
document.getElementById("FORM1").action = "/example_web.asp";
document.getElementById("Sample").innerHTML = "폼의 action 속성 값이 /example_web.asp 로 변경되었습니다";
}
</script>
</head>
<body>
<h1>Form action 속성 예제</h1>
<form id="FORM1" action="/sample.php">
<label>사용자 이름 <input type="text" name="usrN"></label> <br><br>
<label>비밀번호 <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAction()">변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 파란색 테두리가 있는 폼과 '변경' 버튼이 화면에 표시됩니다.
'변경' 버튼을 클릭하면 다음과 같이 action 속성이 변경된 결과를 확인할 수 있습니다.
코드 상세 분석
1. 폼 생성
먼저 id가 "FORM1"이고 action 값이 "/sample.php"인 폼을 생성했습니다. action 속성 값이 상대 URL이므로, 폼 데이터는 sample.php 페이지로 전송됩니다. 이 폼에는 텍스트 입력 필드와 비밀번호 입력 필드가 포함되어 있습니다.
<form id="FORM1" action="/sample.php"> <label>사용자 이름 <input type="text" name="usrN"></label> <br><br> <label>비밀번호 <input type="password" name="pass"></label> </form>
2. 변경 버튼 생성
그다음 클릭 시 changeAction() 함수를 실행하는 버튼을 만들었습니다.
<button onclick="changeAction()">변경</button>
3. changeAction() 함수 동작
changeAction() 함수는 getElementById() 메서드로 "FORM1" 요소를 가져온 뒤, 해당 폼의 action 속성 값을 "/example_web.asp"로 변경합니다. 그리고 id가 "Sample"인 단락(p 태그)의 innerHTML 속성을 활용해, 변경 사항을 사용자에게 텍스트로 표시합니다.
function changeAction() {
document.getElementById("FORM1").action = "/example_web.asp";
document.getElementById("Sample").innerHTML = "폼의 action 속성 값이 /example_web.asp 로 변경되었습니다";
}정리
이처럼 JavaScript의 form action 속성을 활용하면 페이지를 새로고침하지 않고도 동적으로 폼의 전송 대상을 변경할 수 있습니다. 조건에 따라 서로 다른 처리 페이지로 데이터를 전송해야 하는 경우 매우 유용하게 사용됩니다.