HTML・CSS・JavaScriptで送信ボタンとリセットボタンを使いこなす方法

Webフォームには、情報を入力して送信する「送信ボタン」と、入力内容を初期化する「リセットボタン」があります。どちらもHTMLフォームにおいて基本的かつ重要なパーツですが、正しく使わなければユーザー体験を損なうこともあります。この記事では、送信ボタンとリセットボタンの違いや使い方、HTML・CSS・JavaScriptを使った実装方法を初心者にもわかりやすく解説します。デザインのカスタマイズや、動作のコントロール方法まで詳しく紹介しますので、これからWeb制作を学ぶ方にとって役立つ内容となっています。

HTMLで送信ボタンとリセットボタンを作る方法
1. 解説
CSSで送信ボタンとリセットボタンをカスタマイズ
1. ポイント
JavaScriptで送信・リセットボタンの動作を制御する
1. 送信前に確認ダイアログを表示
2. リセット前に警告を出す
ボタンの配置を整える：レイアウトの工夫
1. フォーム全体の例
実用的な応用例：エラーチェックや状態管理
1. 空欄チェックしてから送信
2. 送信後ボタンを無効化する
ボタンを画像にしたい場合のカスタマイズ
まとめ

HTMLで送信ボタンとリセットボタンを作る方法

送信ボタン（<input type="submit">）とリセットボタン（<input type="reset">）は、HTMLフォームの基本構成要素です。

<form action="/submit" method="post">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username"><br>

  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email"><br>

  <input type="submit" value="送信">
  <input type="reset" value="リセット">
</form>

解説

<input type="submit"> はフォーム全体をサーバーへ送信します。
<input type="reset"> はフォーム内のすべての入力フィールドを初期状態に戻します。

ボタンのテキストは value 属性で変更できます。

CSSで送信ボタンとリセットボタンをカスタマイズ

デフォルトの見た目はブラウザ依存ですが、CSSを使うことで統一感のあるデザインが可能です。

input[type="submit"],
input[type="reset"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

input[type="reset"] {
  background-color: #f44336;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  opacity: 0.8;
}

ポイント

submit ボタンは緑色に、reset ボタンは赤色に分けてユーザーに区別をつけやすくしています。
hover 効果でマウスオーバー時に視覚的な反応を加えています。

JavaScriptで送信・リセットボタンの動作を制御する

JavaScriptを使えば、送信前に確認メッセージを表示したり、リセット動作を制限することができます。

送信前に確認ダイアログを表示

<script>
document.querySelector("form").addEventListener("submit", function(e) {
  if (!confirm("送信してもよろしいですか？")) {
    e.preventDefault(); // 送信をキャンセル
  }
});
</script>

リセット前に警告を出す

<script>
document.querySelector("input[type='reset']").addEventListener("click", function(e) {
  if (!confirm("入力内容をすべて消去します。よろしいですか？")) {
    e.preventDefault(); // リセットをキャンセル
  }
});
</script>

ボタンの配置を整える：レイアウトの工夫

ボタンを横並びにしたり、中央揃えにするにはCSSのレイアウトプロパティが便利です。

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

<div class="form-buttons">
  <input type="submit" value="送信">
  <input type="reset" value="リセット">
</div>

フォーム全体の例

<form>
  <label>名前: <input type="text" name="name"></label><br>
  <label>メール: <input type="email" name="email"></label><br>
  <div class="form-buttons">
    <input type="submit" value="送信">
    <input type="reset" value="リセット">
  </div>
</form>

実用的な応用例：エラーチェックや状態管理

空欄チェックしてから送信

<script>
document.querySelector("form").addEventListener("submit", function(e) {
  const name = document.querySelector("input[name='name']").value;
  const email = document.querySelector("input[name='email']").value;
  if (!name || !email) {
    alert("すべての項目を入力してください。");
    e.preventDefault();
  }
});
</script>

送信後ボタンを無効化する

<script>
document.querySelector("form").addEventListener("submit", function(e) {
  const submitBtn = document.querySelector("input[type='submit']");
  submitBtn.disabled = true;
  submitBtn.value = "送信中...";
});
</script>

ボタンを画像にしたい場合のカスタマイズ

画像を使った送信ボタンを実装する方法もあります。

<input type="image" src="submit.png" alt="送信" width="100">

または、CSSでボタンに背景画像を使う方法もあります。

input[type="submit"] {
  background-image: url("submit.png");
  background-size: cover;
  color: transparent;
  border: none;
  width: 100px;
  height: 40px;
}