どうも7noteです。formタグのプチ応用の使い方について。

html要素の<form>タグは、タグで囲まれた中のinputやselectの値をgetやpostで受け渡すことができます。
通常の使い方であれば、タグに囲まれた中にある<button>タグやを使って動かすのですが、今回は<form>タグの外から、formを動かして値の受け渡しを行います。

方法1 HTMLのみでできる方法

<button>要素を作成し、そのform属性に動かしたい<form>のidを指定。

form.html

<form id="mainform" action="" method="post">
  <input type="text" value="">
</form>

<button type="submit" form="mainform">送信する</button>  <!-- form属性に、動かしたい<form>のidを指定。 -->

これで、<form>外からもsubmit（送信）することができます。

方法2 クリックやチェックなどのアクションした時に動作させる方法

javascriptを使用します。今回はjQueryも使用しています。
以下の例はクリックされた時の場合の書き方。

form.html

<form id="mainform" action="" method="post">
  <input type="text" value="">
</form>

<div class="btn">送信する</div>

<script>
  $(".btn").on("click", function(e){       // クラスbtnがクリックされた時
    document.forms.mainform.submit();      // mainformをsubmit（送信）する
  )};
</script>

関数を作る方法であれば以下のような書き方もできます。

form.html

<form id="mainform" action="" method="post">
  <input type="text" value="">
</form>

<div class="btn" onclick="clickEvent();">送信する</div>  <!-- onclick属性で動かすjsを指定 -->

<script>
  function clickEvent(){
    document.forms.mainform.submit();      // mainformをsubmit（送信）する
  }
</script>

javascriptで書くメリットは、送信ボタンを押された瞬間に他の処理を動かしたり、条件分岐して動かすformを切り換えたり、値を入れなおしたりできるところです。

ややこしい処理が必要な場面でも対応が可能です。
また、前者の方法であれば、clickを別のものに変えることで、値が変更されたときや、他の任意のタイミングで動かすことができます。