HTMLでお問い合わせフォームを作るとき、「送信ボタンはinputとbuttonのどちらを使うの？」「クリックしてもメールが届かない」と迷うことがありますよね。
基本は、formタグの中に<button type="submit">送信する</button>を置きます。type="submit"は、入力内容をフォームの送信先へ送るボタンであることを表します。
この記事では、送信ボタン付きフォームの作り方、type属性の違い、CSSデザイン3例、二重送信への対処、クリックしても送信できない原因まで、初心者向けに順番に解説します。
HTMLの送信ボタンはbutton要素で作る
まずは完成形を確認しましょう。次のフォームには、メールアドレス、お問い合わせ内容、送信ボタンがあります。
index.htmlのbodyタグ内へ、次のHTMLを記述します。ボタンは必ずform要素の中へ置いてください。
<h1>お問い合わせ</h1>
<form action="/contact" method="post">
<label>
メールアドレス
<input
type="email"
name="email"
autocomplete="email"
required
>
</label>
<label>
お問い合わせ内容
<textarea name="message" required></textarea>
</label>
<button class="submit-button" type="submit">
送信する
</button>
</form>次に、style.cssの末尾へCSSを追加します。入力欄とボタンの見た目を整えていますが、送信の仕組み自体はHTMLのformとbuttonが担当します。
* {
box-sizing: border-box;
}
form {
display: grid;
gap: 18px;
max-width: 620px;
padding: 28px;
background-color: #f8fbff;
border: 1px solid #d8e5f5;
border-radius: 16px;
}
label {
display: grid;
gap: 8px;
font-weight: 700;
}
input,
textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid #aebfd4;
border-radius: 9px;
font: inherit;
}
textarea {
min-height: 92px;
resize: vertical;
}
.submit-button {
width: fit-content;
padding: 14px 28px;
color: #ffffff;
background-color: #2563eb;
border: 2px solid #2563eb;
border-radius: 10px;
font: inherit;
font-weight: 700;
cursor: pointer;
}button要素は、開始タグと終了タグの間に「送信する」という分かりやすい文言を入れられます。アイコンやspan要素を含めることもできるため、デザインの自由度があります。
formのactionとmethodを理解する
送信ボタンを押すと、ブラウザはform要素の設定に従って入力データを送ります。重要なのがactionとmethodです。
| 属性 | 役割 | 例 |
|---|---|---|
action | 入力内容を処理する送信先URL | /contact |
method | データを送る方法 | post、get |
name | 送信する各データの名前 | email、message |
お問い合わせ内容のようにURLへ表示したくないデータは、通常method="post"で送ります。サイト内検索のように検索条件をURLへ残したい場合はgetが使われます。
HTMLだけでは、受け取った内容を保存したりメールで届けたりできません。actionの送信先には、PHPなどのサーバー側プログラム、WordPressのフォーム機能、外部フォームサービスのいずれかが必要です。
buttonのtype属性は3種類
button要素には、主にsubmit、button、resetの3種類があります。フォーム内では動作を明確にするため、type属性を省略せずに書きましょう。
<!-- 入力内容を送信する -->
<button type="submit">送信する</button>
<!-- JavaScriptなどの任意の処理に使う -->
<button type="button">入力例を見る</button>
<!-- 入力内容を初期値へ戻す -->
<button type="reset">入力を戻す</button>submit：フォームを送信します。button：自動では送信せず、JavaScriptなどで動作を設定します。reset：すべての入力を初期値へ戻します。
resetは、利用者が入力した内容を一度に消してしまう可能性があります。誤操作の負担が大きいため、本当に必要な場合だけ設置してください。
buttonとinputの送信ボタンの違い
送信ボタンはinput type="submit"でも作れます。単純なボタンならどちらも送信できますが、新しく作る場合は内容を自由に入れられるbuttonが扱いやすいでしょう。
<!-- button要素：終了タグがあり、中に要素を入れられる -->
<button type="submit">
<span aria-hidden="true">✉</span>
送信する
</button>
<!-- input要素：表示文字はvalue属性へ書く -->
<input type="submit" value="送信する">どちらを使っても、ボタンの表示文字だけで動作が伝わるようにします。「送信」「申し込む」「内容を確認する」のように、押したあとに何が起きるかを具体的に書きましょう。
送信ボタンのCSSデザイン3例
塗りつぶしの送信ボタン
主要な操作には、背景色を付けたボタンが適しています。次の例は青い背景、白文字、控えめな影でクリックできる範囲を示しています。
<button class="button-primary" type="submit">
送信する
</button>.button-primary {
padding: 16px 34px;
color: #ffffff;
background-color: #2563eb;
border: 2px solid #2563eb;
border-radius: 12px;
box-shadow: 0 10px 22px rgb(37 99 235 / 24%);
font: inherit;
font-size: 1.125rem;
font-weight: 700;
cursor: pointer;
}枠線の確認ボタン
確認画面へ進むなど、塗りつぶしより少し控えめに見せたい場合は枠線型が使えます。角を大きく丸め、文字と枠線を同じ青で揃えています。
<button class="button-outline" type="submit">
内容を確認する
</button>.button-outline {
padding: 16px 34px;
color: #1d4ed8;
background-color: #ffffff;
border: 2px solid #2563eb;
border-radius: 999px;
font: inherit;
font-size: 1.125rem;
font-weight: 700;
cursor: pointer;
}横幅いっぱいの送信ボタン
画面の狭いフォームやスマートフォンでは、横幅いっぱいのボタンが押しやすくなります。親要素の幅に合わせるため、width: 100%;を指定します。
<button class="button-wide" type="submit">
申し込む
</button>.button-wide {
width: 100%;
padding: 17px 24px;
color: #ffffff;
background-color: #0f766e;
border: 0;
border-radius: 10px;
font: inherit;
font-size: 1.125rem;
font-weight: 700;
cursor: pointer;
}hover・focus・disabledの状態を整える
送信ボタンには通常時だけでなく、マウスを重ねた状態、キーボードで選択した状態、押せない状態があります。それぞれが見た目で区別できるようにしましょう。
.button-primary:hover {
background-color: #1d4ed8;
border-color: #1d4ed8;
}
.button-primary:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
.button-primary:disabled {
cursor: not-allowed;
opacity: 0.55;
}フォーカスの輪郭は、キーボード利用者が現在位置を判断する手掛かりです。outline: none;だけで消さず、背景と見分けられる輪郭へ置き換えてください。
HTMLの入力チェックを追加する
required属性を付けると、空欄のまま送信しようとしたときにブラウザが入力を促します。メールアドレスにはtype="email"を指定すると、基本的な形式も確認されます。
<label for="email">メールアドレス</label>
<input
id="email"
type="email"
name="email"
autocomplete="email"
required
>
<button type="submit">送信する</button>ブラウザ側のチェックだけに頼らず、送信先のサーバーでも必ず入力内容を検証してください。HTMLの検証は利用者の入力を助けますが、安全性を保証する仕組みではありません。
二重送信を防ぐ
送信処理に時間がかかると、利用者がボタンを何度も押すことがあります。通常のページ遷移型フォームなら、送信イベントのあとにボタンを無効化し、処理中であることを表示できます。
index.htmlのbody終了タグ直前で、script.jsを読み込みます。
<script src="script.js"></script>
</body>次のコードをscript.jsへ記述します。ブラウザの入力チェックを通り、実際にフォームが送信されるときだけ実行されます。
const form = document.querySelector("form");
const submitButton = form.querySelector('[type="submit"]');
form.addEventListener("submit", () => {
submitButton.disabled = true;
submitButton.textContent = "送信中…";
});非同期通信で送信する場合は、成功・失敗後に状態を戻す処理も必要です。また、サーバー側でも重複登録を防ぐ設計を行いましょう。
送信ボタンが動かないときの原因
- ボタンが
form要素の外にある type="button"になっているrequiredの入力欄が空になっているactionのURLが間違っている、または送信先が用意されていない- JavaScriptで
event.preventDefault()したまま送信処理を行っていない - ボタンに
disabled属性が付いている
まずは開発者ツールのConsoleとNetworkを確認します。入力エラーならブラウザの案内が表示され、送信先のエラーならNetworkにHTTPステータスが記録されます。
送信ボタンを使いやすくする注意点
- 「送信する」など、押したあとの動作が分かる文言にします。
- 文字と背景のコントラストを確保します。
- 指でも押しやすいよう、十分な余白と大きさを持たせます。
- キーボード操作のフォーカス表示を消しません。
- 送信中、成功、エラーを文字でも伝えます。
HTMLフォームには、送信ボタン以外にも選択肢や入力欄があります。選択式の部品を作りたい場合は、次の記事でselectやラジオボタンの違いを確認できます。
HTMLの送信ボタンまとめ
HTMLの送信ボタンは、form要素の中へ<button type="submit">を置いて作ります。actionで送信先、methodで送信方法、各入力欄のnameでデータ名を設定してください。
CSSで見た目を整えたあとも、フォーカス表示、入力チェック、送信中の状態、サーバー側の処理まで確認することが大切です。まずは基本フォームをそのまま試し、目的に合うボタンデザインへ変更してみましょう。