form 외부의 button에서 form 제출하기 - keeep-runnning/log-simple-client GitHub Wiki

주로, form 태그 내부에 type="submit"인 button을 둔다.

유저가 form 내부의 입력 필드에 입력하다가 enter를 누르거나 submit button을 클릭하면 submit event가 발생한다.

<form action="" method="get">
  <label for="username">username</label>
  <input id="username" name="username" type="text">
  <button type="submit">submit</button>
</form>

디자인상의 이유든, 어떤 이유든 submit button을 form 외부에 두어야 할 경우, button의 form attribute와 form의 id attribute를 사용하면 된다.

form 외부에 있는 submit button의 form attribute에 form의 id 값을 적으면 된다.

비록, submit button이 form 외부에 있더라도 클릭하면 연결된 form이 submit 된다.

<div>
  <button type="submit" form="username-form">submit</button>
</div>
<form id="username-form" action="" method="get">
  <label for="username">username</label>
  <input id="username" name="username" type="text">
</form>
⚠️ **GitHub.com Fallback** ⚠️