HTML & CSS

レシピ

フォーム

送信ボタンを設置する

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

この記事のポイント

  • フォームを次のページに進めるボタンを設置する
  • 1ページに複数の送信ボタンを設置する

目次

フォームでファイルを送信する

フォームの各項目をサーバーへ送信するには、送信ボタンが必要です。
こちらのボタンはinput要素type=”submit”を指定して設置します。

表示例
表示例

コード例

<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つのボタンを設置したフォーム
2つのボタンを設置したフォーム

コード例

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

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。