HTML DOM의 form name 속성은 form 요소의 name 어트리뷰트와 연결된 속성입니다. 이 속성을 활용하면 자바스크립트로 폼의 name 값을 읽어오거나 새로 설정할 수 있으며, 폼에 고유한 이름을 부여하는 역할을 합니다.
문법(Syntax)
폼 name 속성의 기본 문법은 다음과 같습니다.
폼 이름 설정하기 −
formObject.name = name
여기서 name은 해당 폼에 지정할 이름을 의미합니다.
예제(Example)
form name 속성의 실제 동작 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
form {
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function ChangeName() {
document.getElementById("FORM1").name="FORM_2";
document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
}
</script>
</head>
<body>
<h1>Form name property example</h1>
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the name of the form above by clicking the below button</p>
<button onclick="ChangeName()">Change Name</button>
<p id="Sample"></p>
</body>
</html>
출력(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
여기서 “Change Name” 버튼을 클릭하면 −
코드 분석
위 예제에서 어떤 일이 일어나는지 단계별로 살펴보겠습니다.
먼저 id=“FORM1”, method=“post”, action=“/sample_page.php”로 지정되고 name 어트리뷰트 값이 “FORM_1”로 설정된 폼을 생성했습니다. 이 폼에는 텍스트 타입의 입력 필드 두 개와, 폼 데이터를 서버로 전송하기 위한 제출(submit) 버튼이 포함되어 있습니다.
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> </form>
그다음에는 사용자가 클릭하면 ChangeName() 함수를 실행하는 “Change Name” 버튼을 만들었습니다.
<button onclick="ChangeName()">Change Name</button>
ChangeName() 함수는 document 객체의 getElementById() 메서드를 사용해 폼 요소에 접근한 뒤, name 어트리뷰트 값을 “FORM_2”로 변경합니다. 변경된 결과는 innerHTML 속성을 통해 id가 “Sample”인 단락(<p>)에 그대로 표시됩니다.
function ChangeName() {
document.getElementById("FORM1").name="FORM_2";
document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
}