<form>の外側に送信ボタンを配置する

Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。

form 属性で紐付け

<input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。

<form id="signin">
  <label>
    メールアドレス
    <input type="email">
  </label>
  <label>
    パスワード
    <input type="password">
  </label>
</form>
<input type="submit" form="signin" value="サインイン">

また、<button> 要素でも同じように使えます。

<button type="submit" form="signin">サインイン</button>