form 요소 밖 button 으로 간단하게 submit 하기

[e2goon]

일반적으로 회원가입 폼은 <form /> 태그 와 <button /> 태그를 사용합니다.

회원가입 입력양식을 예로 들면 가입 버튼은 항상 모바일 디바이스 하단에 고정되어 있고, 콘텐츠가 길어지면 스크롤을 했을 때 버튼은 항상 보여져야 하는 경우가 있습니다.

재사용을 염두에 두고 회원가입 템플릿을 개발해야 한다면, 당연히 다음 처럼 가입 버튼은 <form /> 내에 <button /> 태그를 추가하여 작업할텐데요. 이를 템플릿화 할 수 있습니다.

<form>
  <!-- 회원가입 입력 폼... -->

  <button type="submit">회원가입</button>
</form>

하지만, 회원가입 버튼을 하단으로 고정하려면 부모 높이가 100% 이어야 하거나 버튼 영역을 position: fixed; 레이어로 하단에 고정시킬 수는 있지만, 부득이하게 회원가입 버튼을 <form /> 밖에서 마크업해야 하는 경우 다음과 같이 작업할 수 있습니다.

<form id="form-signup">
  <!-- 회원가입 입력 폼... -->
</form>

<button type="submit" form="form-signup">회원가입</button>