HTML 폼(form)은 일반적으로 name(이름)과 target(대상)이라는 두 가지 중요한 속성을 가지고 있습니다. 특히 name 속성이 없으면 폼 데이터에 접근하거나 유효성 검사를 수행하기가 매우 어렵습니다. JavaScript에서는 폼 요소의 .name과 .target 속성을 통해 이 값들을 손쉽게 확인할 수 있습니다. 지금부터 각각의 방법을 하나씩 살펴보겠습니다.
폼의 Name(이름) 확인하기
다음 예제에서는 JavaScript의 .name 속성을 사용하여 폼의 이름을 가져와 화면에 출력합니다. 폼의 name 값은 주로 서버로 데이터를 전송할 때의 식별자 역할과 클라이언트 측 유효성 검사에 활용됩니다.
예제
<html>
<body>
<form id="form1" name="form" action="/action_page.php"></form>
<p id="name"></p>
<script>
var nm = document.getElementById("form1").name;
document.getElementById("name").innerHTML = nm;
</script>
</body>
</html>실행 결과
form
위 코드에서는 document.getElementById("form1")으로 폼 요소에 접근한 뒤, .name 속성을 읽어 "form"이라는 이름을 화면에 출력했습니다. 이처럼 폼에 부여된 name 값은 스크립트나 서버 측에서 해당 폼을 참조할 때 유용하게 사용됩니다.
폼의 Target(대상) 확인하기
target 속성은 폼을 제출했을 때 서버의 응답 결과를 어디에 표시할지 결정합니다. 다음 예제에서는 JavaScript의 .target 속성을 사용하여 폼의 대상 값을 확인합니다.
예제
<html>
<body>
<form id="form1" target="_self" action="/action_page.php"></form>
<p id="target"></p>
<script>
var tar = document.getElementById("form1").target;
document.getElementById("target").innerHTML = tar;
</script>
</body>
</html>실행 결과
_self
여기서 _self는 기본값으로, 폼 제출 결과가 현재 페이지(또는 프레임)와 동일한 위치에 표시된다는 의미입니다. 그 외에도 새 탭에서 열리는 _blank, 부모 프레임을 의미하는 _parent, 최상위 프레임을 의미하는 _top 등의 값을 상황에 맞게 사용할 수 있습니다.