HTMLのbuttonタグとは？type・submit・resetの違いと書き方を初心者向けに解説

2026年8月24日2026年10月11日

HTMLでお問い合わせフォームを作るとき、「送信する」「入力内容を確認する」「やり直す」といった操作には<button>タグを使います。しかし、type="submit"・type="button"・type="reset"の違いや、typeを省略してよいのかで迷う方も多いでしょう。

buttonタグは、押したあとに起こしたい処理からtypeを選ぶのが基本です。送信ならsubmit、JavaScriptなどの画面内処理ならbutton、フォームを初期値へ戻すならresetを使います。

この記事では、3つのtypeの使い分け、フォームとのつなぎ方、ボタンを押すと文字が出るJavaScriptの例を解説します。後半の練習では、PCでHTMLファイルを開き、外部へ送信せずに「入力内容の表示」と「送信前のチェック」の違いを確かめられます。まずは、buttonタグの最小の書き方から見ていきましょう。

この記事で分かること

buttonタグの基本構造と表示テキストの書き方
submit・button・resetの役割と選び方
typeを省略したときにフォームが送信される理由
inputやaタグとの違い、disabled・form属性の使い方
症状に合わせた確認方法と練習コードの試し方

buttonタグとは？

<button>は、クリック・タップ・キーボード操作をきっかけに、フォーム送信や画面内の処理を実行するHTML要素です。開始タグと終了タグの間へ、ボタンに表示する文字を書きます。フォームは、名前やメールアドレスなどの入力欄をまとめて送るための仕組みで、HTMLではformタグで囲みます。

<button type="button">メニューを開く</button>

この例では「メニューを開く」というボタンが表示されます。ただし、これだけでメニューは開きません。type="button"はフォーム送信やリセットを行わない指定で、メニューを開く処理はJavaScriptなどで別に用意します。

HTMLタグ全体の考え方を先に確認したい方は、HTMLタグの基本と書き方も参考にしてください。

buttonタグとinput type=”submit”の違い

送信ボタンは、<button type="submit">と<input type="submit">のどちらでも作れます。主な違いは、ボタンの中へ書ける内容です。

比較	buttonタグ	input type=”submit”
表示文字	開始タグと終了タグの間	`value`属性
子要素	`span`やアイコンなどを配置できる	子要素を持たない
閉じタグ	必要	不要

<button type="submit"><span>送信する</span></button>
<input type="submit" value="送信する">

文字だけの単純な送信ボタンならどちらでも構いません。アイコンや複数の要素を組み合わせたい場合は、buttonタグのほうが扱いやすいでしょう。ただし、buttonの中に別のbuttonやaタグなどの対話型要素を入れてはいけません。

より詳しい仕様は、MDNのbutton要素の解説で確認できます。

type属性の違いと選び方

属性は、開始タグの中に書く追加設定です。buttonのtype属性は、JavaScriptなどで処理を加える前にブラウザーが行う動作（既定動作）を指定します。初心者が最初に覚えたい値は、submit・button・resetの3つです。

typeの値	押したときの既定動作	主な用途
`submit`	関連付いたフォームを送信する	送信、検索、ログイン
`button`	送信・リセットを行わない	メニュー、プレビュー、JavaScript処理
`reset`	フォームを初期値へ戻す	入力のやり直し

HOAI Point

「押したあとに何を起こすか」からtypeを選ぶと迷いません。サーバーへフォームを送るならsubmit、同じ画面で処理するならbutton、初期状態へ戻すならresetです。

type=”submit”の役割

type="submit"は、buttonに関連付いたformを送信します。入力を必須にするrequiredなどのチェックを通過すると、formのactionで指定した送信先へ、methodの方法でデータが送られます。

type=”button”の役割

type="button"を押しても、それだけでは画面に変化は起きません。クリック時の動作をJavaScriptで指定したり、ポップオーバー（画面上に重ねる内容）を開く追加設定と組み合わせたりして使います。

type=”reset”の役割

type="reset"は、関連付いたformの入力欄を初期状態へ戻します。入力欄を必ず空にする機能ではありません。

type=”submit”の書き方

type="submit"は、フォームの入力内容を送信するボタンです。buttonだけで送信先を決めるのではなく、formのactionとmethodも合わせて確認します。

<form action="/contact" method="post">
  <label for="email">メールアドレス</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">送信する</button>
</form>

type=”submit”を押すと、関連付いたformの送信が始まります。上の/contactは説明用の送信先で、実際に受け取るサーバー側プログラムは含んでいません。requiredの未入力やメールアドレスの形式に問題があると、送信前にブラウザーの入力チェックで止まります。

フォーム内でtypeを省略した場合

この記事のような通常のフォームに関連付いたbuttonでは、typeの省略・空文字・不正な値が送信ボタンとして扱われます。次は省略による失敗例です。表示が「入力内容を確認する」でも、押すとフォーム送信を始める可能性があります。

<form action="/contact" method="post">
  <label for="email-bad">メールアドレス</label>
  <input id="email-bad" name="email" type="email">
  <button>入力内容を確認する</button>
</form>

送信させたくないボタンには、次のようにtype="button"を明記します。入力内容を表示する処理は、このあとJavaScriptで追加します。

<button type="button">入力内容を確認する</button>

フォーム内のbuttonには、typeを省略せず明示するのが安全です。HTML Standardではtypeが欠けた通常のフォーム関連buttonが送信ボタンになる条件を定義しています。仕様の詳細はWHATWG HTML Standardのbutton要素で確認できます。

通常のフォーム内では、typeを省略した確認ボタンは送信ボタン扱いになり、type=buttonを明記すると送信しない

nameとvalueによる送信ボタンの区別

1つのformに「下書き保存」と「送信する」がある場合は、送信ボタンへ同じnameと異なるvalueを設定できます。

<button type="submit" name="action" value="draft">下書き保存</button>
<button type="submit" name="action" value="send">送信する</button>

フォーム送信を開始するために使われたbuttonだけが、そのnameとvalueを送信データへ加えます。受信側ではaction=draftかaction=sendかを見て処理を分けられます。この2行はform内へ置く例であり、保存や送信の処理そのものは受信側で実装します。

入力欄が送る名前と値も整理したい場合は、inputのname・valueの書き方を確認してください。

type=”button”とJavaScriptの書き方

type="button"は、フォームを送信せずに画面内の処理を実行したいときに使います。JavaScriptは、クリックに応じて文字を表示するなど、ページに動きを付ける言語です。次の例は練習用HTMLの<body>内へ、ボタンから</script>までまとめて置きます。

<button type="button" id="message-button">メッセージを表示する</button>
<p id="message-result" aria-live="polite"></p>

<script>
  const messageButton = document.querySelector("#message-button");
  const messageResult = document.querySelector("#message-result");

  messageButton.addEventListener("click", () => {
    messageResult.textContent = "ボタンが押されました。";
  });
</script>

type=”button”にはフォーム送信などの既定動作がないため、JavaScriptなどで処理を指定します。この例は、クリック時に下の段落へ「ボタンが押されました。」と表示します。idは要素を識別する名前、querySelectorはその名前などで要素を探す処理です。addEventListenerでクリック時の処理を登録し、textContentで段落の文字を変更しています。scriptをボタンより後ろに置くことで、登録時に対象を見つけられます。同じHTMLへ複数の例を貼る場合は、idを重複させないでください。

HOAI Point

JavaScript用のボタンにはtype=”button”を明記します。あとからbuttonがform内へ移動しても、意図しない送信を防ぎやすくなります。

クリックしても動かない場合、buttonタグが壊れているとは限りません。type="button"は何もしないのが既定の動作なので、クリック時の処理の登録（イベントリスナー）、対象のid、JavaScriptの読み込みエラーを確認しましょう。

type=”reset”の書き方

type="reset"は、関連付いたformの入力欄や選択欄を初期値へ戻します。次の例を試すと、戻る先を確認できます。

<form>
  <label for="name">お名前</label>
  <input id="name" name="name" value="山田 花子">

  <button type="reset">入力を元に戻す</button>
</form>

「山田花子」を「佐藤太郎」へ書き換え、「入力を元に戻す」を押してください。空欄にはならず、value="山田花子"で指定した元の名前へ戻れば正常です。

resetは入力内容を空にするのではなく、HTMLで定義された初期値へ戻します。

また、ユーザーが入力した内容を誤って消してしまう可能性があるため、一般的なフォームではresetボタンを置かない判断も有効です。MDNのresetボタンの解説でも、通常は配置しないよう注意を促しています。

HOAI Point

リセットより「戻る」「入力を保持」を優先できないか検討します。長いフォームでは、確認画面から編集へ戻っても入力を保つ設計のほうが親切です。

buttonタグとaタグの違い

ボタンのように見えるリンクや、リンクのように見えるボタンは作れますが、見た目ではなく役割でHTML要素を選びます。

やりたいこと	適した要素	例
フォーム送信・画面内処理	`button`	送信、メニューを開く、削除
別ページ・別URLへ移動	`a`	詳細ページ、資料ページ
ファイルへのリンク	`a`	PDFを開く、資料をダウンロード

<button type="button">メニューを開く</button>
<a href="/contact/">お問い合わせページへ</a>

別ページへの移動が目的なら、buttonではなくhrefを持つaタグを使います。

HOAI Point

移動はリンク、処理はボタンと覚えると、キーボードや支援技術を使う人にも役割が伝わりやすくなります。

buttonタグでよく使う属性

buttonタグではtype以外にも、フォームとの関連付けや操作可否を指定できます。

属性	役割	使用例
`disabled`	操作できない状態にする	`<button type="submit" disabled>`
`name`・`value`	送信ボタンの名前と値	`name="action" value="send"`
`form`	idで別のformと関連付ける	`form="contact-form"`
`formaction`	その送信ボタンだけ送信先を上書き	`formaction="/preview"`
`formmethod`	その送信ボタンだけ送信方法を上書き	`formmethod="post"`
`formnovalidate`	その送信だけ入力検証を省略	`<button type="submit" formnovalidate>`

disabledの使い方

disabledを付けたbuttonは操作できず、通常はキーボードの操作対象にもなりません。また、送信ボタンのnameとvalueもフォームデータに含まれません。

<button type="submit" disabled>送信中...</button>

disabledのbuttonは操作できず、そのbuttonの値もフォーム送信に含まれません。HTMLのdisabledは、属性があるだけで有効になります。disabled="false"でも無効化は解除されないため、操作できる状態へ戻すときは属性自体を外します。二重送信防止で一時的にdisabledへ変える場合は、送信失敗時に操作できる状態へ戻す設計も必要です。

formの外に置くbuttonの書き方

buttonがformの外にあっても、form属性へ同じHTML文書内のformのidを指定すれば関連付けられます。form="contact-form"とid="contact-form"を一致させてください。ここでも/contactは説明用の送信先です。

<form id="contact-form" action="/contact" method="post">
  <label for="email-external">メールアドレス</label>
  <input id="email-external" name="email" type="email">
</form>

<button type="submit" form="contact-form">送信する</button>

formaction・formmethod・formnovalidate・formtarget・formenctypeは、送信ボタンでform側の設定を上書きする属性です。type="button"やtype="reset"へ指定しないでください。

buttonのラベルとキーボード操作

フォーカスは、キーボード操作の対象になっている状態です。Tabキーでボタンへ移動すると、通常は輪郭などで位置が示されます。その状態でEnter・Spaceを押して操作できることを確認しましょう。divへクリック処理を付けてボタンを自作するより、まずbuttonタグを使うのが基本です。

ボタンに表示するラベル

「OK」「実行」だけでは、何が起きるのか分かりにくいことがあります。「注文を確定する」「検索する」のように、押した結果を予測できる文言にします。

アイコンだけのボタンの読み上げ名

アイコンだけでは目的が読み上げられないため、可能なら見えるテキストを併記します。アイコンだけにする必要がある場合は、aria-labelや視覚的に隠したテキストで名前を伝えます。

<button type="button" aria-label="閉じる">
  <span aria-hidden="true">×</span>
</button>

この例は「×」の見た目と「閉じる」という読み上げ名の指定です。何を閉じるかの動作は、JavaScriptなどで別に実装します。

フォーカスの輪郭とボタンの大きさ

キーボード操作中の位置が分かるように、:focus-visibleの輪郭を消したままにしないでください。指でも押しやすい余白を取り、ボタン同士を近づけすぎないことも大切です。詳しい役割とキーボード操作は、W3C WAI-ARIA APGのButton Patternで確認できます。

button {
  min-height: 44px;
  padding: 0.75rem 1rem;
}

button:focus-visible {
  outline: 3px solid #536048;
  outline-offset: 3px;
}

プレビューと送信を試す練習コード

VS Codeなどのテキストエディターで新しいファイルを作り、次のコード全体をコピーします。文字コードをUTF-8にしてbutton-practice.htmlという名前で保存し、末尾が.html.txtになっていないことを確認してください。保存したファイルをPCのブラウザーで開きます。

「メールアドレス」「お問い合わせ内容」の入力欄と2つのボタンが表示されれば、準備完了です。実際のお問い合わせやメール送信は行いません。JavaScriptを有効にし、最初はコードを書き換えず、下の練習用の値を使って試してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>buttonの練習</title>
</head>
<body>
  <h1>プレビューと送信の練習</h1>
  <form id="contact-form">
    <p>
      <label for="email">メールアドレス</label>
      <input id="email" name="email" type="email" required>
    </p>
    <p>
      <label for="message">お問い合わせ内容</label>
      <textarea id="message" name="message" required></textarea>
    </p>
    <button type="button" id="preview-button">入力内容を確認する</button>
    <button type="submit">送信を試す</button>
  </form>
  <p id="result" aria-live="polite"></p>

  <script>
    const form = document.querySelector("#contact-form");
    const previewButton = document.querySelector("#preview-button");
    const result = document.querySelector("#result");

    previewButton.addEventListener("click", () => {
      const email = form.elements.email.value;
      const message = form.elements.message.value;
      result.textContent =
        `入力したメールアドレス：${email} ／ お問い合わせ内容：${message}`;
    });

    form.addEventListener("submit", (event) => {
      // 練習用なので、サーバーへの送信をここで止める
      event.preventDefault();
      result.textContent =
        "入力チェックを通過しました。サーバーには送信していません。";
    });
  </script>
</body>
</html>

「入力内容を確認する」は入力欄の現在の値を表示します。入力チェックや送信は行いません。「送信を試す」はブラウザーの入力チェックを受け、通過したらsubmitイベントの処理が動きます。この練習ではevent.preventDefault()で本来の送信を止めています。

入力欄と2つのボタンが表示されたら、次の順で結果を確認します。案内の文言や見た目はブラウザーによって異なります。

STEP

空欄で入力チェックを確かめる

何も入力せず「送信を試す」を押します。未入力の欄に入力を促す案内が出れば、requiredによるチェックが働いています。

STEP

入力内容をプレビューする

メールアドレスにtest@example.com、お問い合わせ内容に「練習です」と入力し、「入力内容を確認する」を押します。下の段落へ両方の文字が表示されれば、画面内で入力値を取得できています。

STEP

送信前のチェックを通過する

「送信を試す」を押し、「入力チェックを通過しました。サーバーには送信していません。」と表示されることを確認します。空欄の案内、入力内容の表示、この完了メッセージの3つを確認できれば練習完了です。最初から試し直すときは入力欄を空にして、STEP 1へ戻ります。

本番で使う場合は、受信処理を用意したうえでformのactionとmethodを設定し、練習用の送信停止処理を実際の処理へ置き換えます。入力内容を文字として表示するtextContentを使い、受信側でも必ず入力を検証してください。

HTML文書全体の配置に迷う場合は、HTMLの基本構造と書き方も確認しておくと、form・scriptを置く位置を整理できます。

buttonが動かないときの確認方法

まず、起きている症状に合う項目を確認してください。直したあとに同じ操作を試し、期待した結果になれば確認を終えて構いません。

確認ボタンで送信・再読み込みされる：type="button"を明記しているか確認する。
送信ボタンを押しても進まない：未入力・形式エラーの案内を先に確認する。入力が正しければ、buttonが対象のform内にあるか、form属性の値とformのidが一致するかを確認する。練習コードではevent.preventDefault()で送信を止めているため、完了メッセージが出れば正常。実運用では送信先と受信処理も別に確認する。
ボタンを選べない・押せない：disabledが付いたままになっていないか確認する。
画面内の処理だけ動かない：保存したHTMLで対象のidとJavaScript内の指定が一致するか、scriptが対象要素より後ろにあるかを確認する。PC版Chromeではページを右クリックして「検証」→「Console」を開くと、JavaScriptのエラーを確認できる。コードを直したら保存してブラウザーを再読み込みし、もう一度ボタンを押す。
resetの戻り先が違う：対象のformと、初期状態を指定するvalue（入力値）・checked（チェック）・selected（選択肢）を確認する。textareaの初期値はvalue属性ではなく、開始タグと終了タグの間に書く。

練習コードでサーバーへ送信されないのは、意図した動作です。入力チェックの条件を詳しく確認したい場合は、required・patternなどの入力チェックへ進んでください。

よくある質問

buttonタグのtypeは省略できますか？: 構文上は省略できますが、通常のフォーム関連buttonは送信ボタンになる場合があります。意図しない送信を避けるため、submit・button・resetのどれかを明示するのがおすすめです。
buttonだけでフォームを送信できますか？: type="submit"でも、送信対象のformが必要です。buttonをform内へ置くか、form属性でformのidと関連付けます。送信先と方法はformのaction・methodで指定します。
buttonのvalue属性は画面に表示されますか？: buttonタグの表示文字は開始タグと終了タグの間へ書きます。valueは主にフォーム送信時の値であり、<input type="submit">のようにボタンの表示ラベルにはなりません。
Enterキーでフォームが送信されるのはなぜですか？: 1行の入力欄では、Enterキーでフォームの暗黙的な送信が起こる場合があります。type="button"はそのボタン自身の送信を防ぐ指定で、フォーム全体のEnter送信を禁止する指定ではありません。textarea内のEnterは通常は改行です。入力欄の種類とフォームの構成を確認しましょう。
resetを押しても空欄にならないのはなぜですか？: resetは空欄にする機能ではなく、各入力欄を初期値へ戻す機能だからです。valueやcheckedなどで初期状態を指定していれば、その状態へ戻ります。
buttonタグの中に画像やアイコンを入れられますか？: 入れられます。img・svg・spanなどを使えますが、別のbuttonやaタグなどの対話型要素は入れません。アイコンだけの場合は、見えるテキストかaria-labelなどでボタンの目的を伝えてください。