[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기

form 외부에서 form 관련 요소 연결

---

form 관련 요소(button, input 등)의 form 속성으로 어떤 form에 속할지(연결) 지정 할 수 있다. 주로 form 외부에 있는 form 관련 요소를 form에 연결할 때 사용한다. 이때 form 요소의 id 값과 form 관련 요소의 form 속성 값이 동일해야 하고, 같은 문서(document)에 있어야 된다.

 

form 내부에 있는 form 관련 요소는 자동으로 해당 form에 속하므로 form 속성으로 명시하지 않아도 된다.

<form id="register">
  <input type="email" name="email" />
  <input type="password" name="password" />
</form>

<!-- form 외부에 있지만 form 속성으로 register 아이디를 가진 form에 연결했다 -->
<button type="submit" form="register">Submit</button>

 

💡 button 요소의 type 속성 기본 값은 submit이며, 클릭해서 양식을 제출하면 새로고침하는 기본 동작을 가진다. 새로고침을 방지하려면 form 요소 onsubmit 핸들러에 event.preventDefault() 메서드를 사용한다.

 

자바스크립트로 form 접근하기

---

자바스크립트에선 document 객체를 통해 form에 직접 접근할 수 있다. form이나 form 관련 요소에 명시한 name 혹은 id 속성으로 원하는 form 요소를 선택할 수 있다.

// 문서의 첫번째 form
const firstForm = document.forms[0]; 
// <form id="register">...
const registerForm = document.forms.register; 

// <input type="email" name="email">
const emailField1 = registerForm.elements.email; 
// 짧은 표기법 <input type="email" name="email">
const emailField2 = registerForm.email; 
// true
console.log(emailField1 === emailField2);

 

또한 모든 form 관련 요소는 form 속성으로 자신이 속해있는 form을 참조할 수 있다.

console.log(emailField1.form); // <form id="register">...

 

 

레퍼런스

---

• 폼 프로퍼티와 메서드
• HTML form Attribute

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요