HTML DOM 양식 이름 속성

<시간/>

HTML DOM Form name 속성은 form 요소의 name 속성과 연결됩니다. 양식 이름 속성은 양식 이름 속성 값을 설정하거나 가져오는 데 사용됩니다. 양식 이름 속성은 양식에 이름을 부여합니다.

구문

다음은 −

의 구문입니다.

양식 이름 설정 -

formObject.name = name

여기에서 이름은 양식의 이름을 지정합니다.

예시

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 length 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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 양식 이름 속성

"이름 변경" 버튼 클릭 시 -

HTML DOM 양식 이름 속성

위의 예에서

먼저 id=“FORM1”, method=“post”, action=“/sample_page.php” 및 name 속성 값이 “FORM_1”로 설정된 양식을 생성했습니다. 양식에는 유형 텍스트가 있는 두 개의 입력 필드와 양식 데이터를 서버에 제출하기 위한 제출 버튼이 있습니다.

<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() 메서드를 실행하는 "이름 변경" 버튼을 만들었습니다.

<button onclick="ChangeName()">Change Name</button>

ChangeName() 메서드는 문서 객체 getElementById() 메서드를 사용하여 양식 요소를 가져오고 이름 속성 값을 "FORM_2"로 변경합니다. 이 변경 사항은 innerHTML() 속성을 사용하여 id가 "Sample"인 단락에 반영됩니다. -

function ChangeName() {
   document.getElementById("FORM1").name="FORM_2";
   document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
}