HTML에서 form을 원격으로 제출하는 방법

서론

웹 개발에서 사용자로부터 입력받은 데이터를 서버로 전송하는 작업은 흔한 일이다. 일반적으로는 HTML의 form 요소를 사용하여 아래와 같이 간단히 구현할 수 있다.

<form action="/api/posts" method="POST">
  <input type="text" name="title" required />
  <input type="text" name="content" required />
  <button type="submit">작성</button>
</form>

이 방식은 직관적이지만, 더 복잡한 요구사항이 생기는 동적인 웹 애플리케이션에서는 제약이 생길 수 있다. 예를 들어, form 내부가 아닌 웹 애플리케이션의 GNB의 영역에도 “작성” 버튼을 추가해야 한다면 어떻게 해결할 수 있을까? 이 글에서는 submit 타입의 버튼이 form 내부에 없어도, HTML의 form을 원격으로 제출하는 방법들을 살펴본다.

 

JavaScript를 이용해 form을 원격으로 제출하기

JavaScript는 form과 제출 버튼이 부모-자식 관계가 아닐 때에도 form을 원격으로 제출할 수 있는 방법을 제공한다. 이 방식은 단순히 form을 원격으로 제출하는 것뿐만 아니라 복잡한 유효성 검사와 다양한 이벤트 처리를 포함할 수 있어, 동적인 웹 애플리케이션에서 자주 사용된다.

 

먼저 form의 id 속성에 고유한 값을 지정하고, JavaScript를 이용해 form 요소를 선택한 후 submit() 메서드를 호출하여 원격으로 form을 제출할 수 있다.

document.getElementById("myForm").submit();

다음은 간단히 테스트 해볼 수 있는 예제이다.

 

See the Pen JavaScript를 이용해 form을 원격으로 제출하기 by Ohnim (@ohnim) on CodePen.

 

HTML을 이용해 form을 원격으로 제출하기

HTML만으로도 form을 원격으로 제출할 수 있다. 이 방법은 JavaScript 코드를 작성할 필요가 없기 때문에, 간단한 웹 애플리케이션을 구축할 때 유용하다. HTML의 button 요소(element)의 form 속성(attribute)을 사용하면, 서로 다른 위치에 있는 form 요소(element)를 참조하여 원격으로 제출할 수 있다.

<form id="myForm" action="/api/posts" method="POST">
  <input type="text" name="title" required />
  <input type="text" name="content" required />
</form>

<button type="submit" form="myForm">작성</button>

이 방법의 가장 큰 장점은 코드가 간결해 유지 보수가 용이하다는 것이다. 그러나, 복잡한 유효성 검사나 조건부 제출 등 더 복잡한 요구사항이 있다면 JavaScript를 사용하는 것이 더 적합할 수 있다.

 

다음은 간단히 테스트 해볼 수 있는 예제이다.

 

See the Pen HTML을 이용해 form을 원격으로 제출하기 by Ohnim (@ohnim) on CodePen.

 

결론

HTML이나 JavaScript를 이용하면 form과 관련되 요소들(button, input 등)이 부모-자식 관계를 유지하지 않아도 원격으로 제출할 수 있는 유연한 방법을 제공한다. 이를 통해 form 요소와 제어 요소들이 분리된 구조를 만들 수 있으며, 다양한 웹 디자인이 가능해 다양한 사용자 경험을 제공할 수 있다.

 

하지만, HTML 공식 문서에서는 form 요소와 그 제어 요소들이 부모-자식 관계를 구성하는 것이 더 자연스럽다고 설명하고 있다. 따라서 이러한 기능을 사용할 때는 프로젝트의 복잡도나 유지보수성을 고려해 선택을 하는 것이 좋을 것 같다.