HTML <button> form 속성이란?
HTML <button> 요소의 form 속성은 해당 버튼이 어느 폼(<form>)에 속하는지 명시적으로 지정하는 데 사용됩니다. 일반적으로 버튼은 <form> 태그 내부에 위치해야 해당 폼과 연결되지만, form 속성을 활용하면 폼 외부에 있는 버튼도 특정 폼에 자유롭게 연결할 수 있습니다.
기본 문법
<button form="id">
여기서 id는 버튼이 연결될 폼의 식별자입니다. 연결하고자 하는 <form> 요소에는 반드시 동일한 id 값이 지정되어 있어야 합니다.
예제
이제 <button> 요소의 form 속성을 실제로 구현한 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <body> <h2>Points</h2> <form action="" method="get" id="form1"> Player: <input type="text"><br> Rank: <input type="number"><br> Points: <input type="number"><br> </form> <button type="submit" form="form1" value="Submit">Click to Submit</button> </body> </html>
위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 폼 외부에 배치된 버튼이 폼의 일부로 정상적으로 동작합니다.
코드 분석
먼저 폼을 선언하고 그 안에 입력 요소들을 추가했습니다.
<form action="" method="get" id="form1"> Player: <input type="text"><br> Rank: <input type="number"><br> Points: <input type="number"><br> </form>
그다음, 폼 태그 외부에 제출 버튼을 배치했습니다.
<button type="submit" form="form1" value="Submit">Click to Submit</button>
버튼에 form="form1"과 같이 폼의 id를 지정했기 때문에, 버튼이 물리적으로 폼 밖에 위치하더라도 여전히 같은 폼에 속하게 됩니다. 이것이 바로 <button> 요소의 form 속성이 제공하는 핵심 기능입니다.
활용 팁
이 속성은 디자인상의 이유로 제출 버튼을 폼 영역 밖에 배치해야 하거나, 하나의 페이지에서 여러 개의 폼을 다룰 때 특히 유용합니다. 단, 지정한 id와 일치하는 폼이 존재하지 않으면 버튼은 어떤 폼에도 연결되지 않으므로 id 철자를 반드시 확인해야 합니다.