form 관련 요소(button, input 등)의 form 속성으로 어떤 form에 속할지(연결) 지정 할 수 있다. 주로 form 외부에 있는 form 관련 요소를 form에 연결할 때 사용한다. 이때 form 요소의 id 값과 form 관련 요소의 form 속성 값이 동일해야 하고, 같은 문서(document)에 있어야 된다.
<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> button 요소의 type 속성 기본 값은 submit이며, 클릭해서 양식을 제출하면 새로고침하는 기본 동작을 가진다. 새로고침을 방지하려면 form 요소 onsubmit 핸들러에 event.preventDefault() 메서드를 사용한다.
</aside>
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>
자바스크립트에선 document 객체를 통해 form에 직접 접근할 수 있다. form이나 form 관련 요소에 명시한 name 혹은 id 속성으로 원하는 form 요소를 선택할 수 있다.
const firstForm = document.forms[0] // 문서의 첫번째 form
const registerForm = document.forms.register // <form id="register">...
const emailField1 = registerForm.elements.email // <input type="email" name="email">
const emailField2 = registerForm.email // 짧은 표기법 <input type="email" name="email">
console.log(emailField1 === emailField2) // true
또한 모든 form 관련 요소는 form 속성으로 자신이 속해있는 form을 참조할 수 있다.
flowchart TB
F["form"]
E0["elements[0]"]
E1["elements[1]"]
En["elements[n]"]
F ---> E0 & E1 & En -.->|*.form| F
console.log(emailField1.form) // <form id="register">...