HTML & CSS

最終更新日:
公開日:

レシピ

フォーム

送信ボタンを設置する

フォームの送信ボタンを設置する方法について解説します。

この記事のポイント

  • input要素type="submit"でフォームに入力された値を次のページに送信するためのボタンを設置する
  • 1ページに複数の送信ボタンを設置することもできる

目次

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

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つ以上のボタンを設置することもあります。

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つ前のページに戻す、というような判断を行います。