送信ボタンを設置する

フォームに入力した値を送信するためのボタンを設置する

input要素やtextarea要素などのフォームに入力された値をサーバーへ送信するためには「送信ボタン」が必要になります。
こちらのボタンはinput要素にtype="submit"を指定して設置します。

HTML コード例

<form action="" method="post" enctype="multipart/form-data">
  <div>
    <label for="i_name">お名前</label>
    <input id="i_name" type="text" name="name" value="" placeholder="山田 太郎">
  </div>
  <div>
    <label for="i_furigana">フリガナ</label>
    <input id="i_furigana" type="text" name="furigana" value="" placeholder="ヤマダ タロウ">
  </div>
  <div>
    <label for="i_image">参考画像の添付</label>
    <input id="i_image" type="file" name="sample_pic">
  </div>
  <div>
    <label for="t_message">お問い合わせ内容</label>
    <textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。"></textarea>
  </div>
  <div class="btn_area">
    <input type="submit" name="btn_confirm" value="入力内容を確認する">
  </div>
</form>

フォームのボタンに表示するラベルは、value属性で指定します。

送信ボタンが押されると、form要素のmethod属性で指定した形式で、サーバーにフォームデータが送信されます。

2つ以上のボタンを設置する

フォームでは「戻る」ボタンと「送信する」ボタンのように、2つ以上のボタンを設置することもあります。

HTML コード例

<div class="btn_area">
  <input type="submit" name="btn_back" value="戻る">
  <input type="submit" name="btn_submit" value="送信する">
</div>

name属性の異なるボタンが複数ある場合、次に表示するページが異なるケースが多いです。
しかし、親となるform要素は同じため送信先は同じです。

このような次に表示するページの制御は、基本的にサーバーサイドのシステム側で行います。

送信ボタンはクリック（タップ）されたボタンしか送信されません。
例えば、「name="btn_back"」のデータが送信されていたら「戻る」が押されているので1つ前のページに戻す、というような判断を行います。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。