정의 및 사용 방법

form 속성은 문서 내의 특정 <form>과 폼 관련 요소를 연결(associated with)합니다.
연결할 <form> 요소의 id를 이 속성의 값으로 지정하면 연결됩니다.

이렇게 해당 요소를 특정 <form>과 연결시키면, 연결된 <form>에 속한 폼 관련 요소가 됩니다.
즉, 물리적인 위치와 상관없이 연결된 <form> 내부에 있는 폼 관련 요소처럼 작동합니다.

사용 가능한 요소

form 속성은 모든 요소에 공통으로 적용할 수 있는 글로벌 속성이 아닙니다.
이 속성은 다음의 폼 관련 요소에서 사용 가능합니다.

값

연결할 <form> 요소의 id여야 합니다.

연결할 <form> 요소

연결할 <form> 요소는 동일한 문서 내에 있어야 하며, 단일해야 합니다.
이때, 연결할 <form> 요소의 물리적인 위치는 상관없습니다.

  • 연결할 <form> 외부에 해당 요소가 있어도 됩니다.
  • 해당 요소가 이미 특정 <form> 내부에 포함되어 있더라도, form 속성을 사용해 다른 위치에 있는 <form>과 연결할 수 있습니다. 이 경우, 기존에 포함되었던 <form>과의 관계는 끊어지며, form 속성으로 지정한 <form> 내부에 있는 요소처럼만 작동합니다.

연결할 <form> 외부에 해당 요소가 있는 경우

HTML 
<form id="external-form" action="https://example.com/">
    <label for="user-id">사용자 아이디</label>
    <input type="text" id="user-id" name="user-id">
</form>

<!-- 연결할 <form> 외부에 있는 요소 -->
<button type="submit" form="external-form">제출</button>

위 예제처럼 form="external-form"가 지정된 '제출' 버튼이 해당 id 값을 가지는 폼 요소의 외부에 있더라도, 사용자가 '제출' 버튼을 누르면 외부에 있는 연결된 폼이 제출됩니다.

이미 특정 <form> 내부에 포함되어 있는 요소가 외부 <form>에 연결하는 경우

HTML 
<form id="external-form" action="https://example.com/">
    <label for="user-pw">사용자 비밀번호</label>
    <input type="password" id="user-pw" name="user-pw">
</form>

<!-- 이미 특정 <form> 내부에 포함되어 있는 요소가
     외부 <form>에 연결하는 경우 -->
<form id="internal-form" action="https://example.com/">
    <label for="user-id">사용자 아이디</label>
    <input type="text" id="user-id" name="user-id">
    <button type="submit" form="external-form">아이디 제출</button>    
</form>

위 예제처럼 form="external-form"가 지정된 '제출' 버튼이 이미 id="internal-form"을 가지는 폼 내부에 포함되어 있더라도, 사용자가 '제출' 버튼을 누르면 form="external-form"으로 지정된 폼이 제출되며, 기존에 포함되었던 id="internal-form"을 가진 폼은 제출되지 않습니다.

<form> 내부에 있는 폼 관련 요소처럼 작동

form 속성은 해당하는 폼 관련 요소를 물리적인 위치와 상관없이 <form> 내부에 있는 폼 관련 요소처럼 작동하게 합니다.

폼 제출 시

연결된 폼이 제출될 때 form 속성을 포함한다고 해서 모든 요소가 함께 제출되지는 않습니다. 다음과 같은 폼 요소만 연결된 폼이 제출될 때 name이 해당 요소의 데이터 이름으로 제출되며, 요소의 값과 함께 제출됩니다.

<fieldset>

<fieldset>에 form 속성이 포함되어 있더라도 그 안에 중첩된 폼 관련 요소는 자동으로 연결되지 않습니다. 단지, <fieldset>에 설정된 name이 <fieldset>과 연결된 폼의 form.elements API의 이름으로 참조됩니다.

<object>와 <output>

<object>와 <output>도 form 속성이 포함되어 있으면 해당 요소에 설정된 name이 연결된 폼의 form.elements API의 이름으로 참조됩니다. 이로써, 해당 요소를 연결된 폼 데이터에 포함시킬 수 있습니다.

브라우저 호환성

form 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
form 예 예 예 예

명세서

form 속성의 명세서 사양
명세서 사양
form HTML
#attr-fae-form

참고문헌

같이 보기