Webサイトの使いやすさを左右するボタンは、ユーザーを目的のページへ導いたり、フォームの内容を送信したりと、その役割は非常に重要です。
適切なタグを選ばないと、意図した通りに動作せず、SEOの評価にも影響する可能性があります。
本記事では、HTMLでボタンを設置する際の基本から、各タグの役割と正しい使い分け、具体的な実装例まで、初心者にも分かりやすく解説します。
この記事を読めば、自信を持ってHTMLボタンを設置できるようになるでしょう。
HTMLボタンの基本
まずは、HTMLボタンの基本をおさえましょう。
- buttonタグとは
- buttonタグとinputタグとの違い
- aタグでリンクボタンを作る際の注意点
これらのタグはそれぞれ異なる特徴と役割を持っており、目的や場面に応じて正しく使い分けることが大切です。
それぞれ順番に見ていきましょう。
buttonタグとは
buttonタグは、ボタンを作成するHTML要素です。buttonタグの最大の特徴は、開始タグと終了タグの間にテキストや画像などを自由に配置できることで、デザインの自由度が高いボタンを作りたい場合に適しています。
単なる文字だけのボタンではなく、視覚的に分かりやすいアイコン付きのボタンなど、デザイン性があるボタンを作れます。
buttonタグの役割は、ユーザーにフォームの送信や情報の登録といった、何らかの行動を促すことです。ボタンの具体的な振る舞いは、後述するtype属性やJavaScriptによって制御されます。
buttonタグとinputタグの違い
inputタグでもボタンは作成できますが、buttonタグとは指定方法が異なります。
それぞれの指定方法を比べてみましょう。
コピー<!-- buttonタグ -->
<button type="submit">送信する</button>
<!-- inputタグ -->
<input type="submit" value="送信する">
buttonタグが開始タグと終了タグの間にテキストや画像などを自由に含められるのに対し、inputタグはvalue属性に指定した文字列がボタンのラベルとして表示されます。
主な違いについて以下の表にまとめました。
| 項目 | buttonタグ | inputタグ |
| 表示内容 | HTML要素を自由配置 | テキストのみ |
| スタイリング | 自由度が高い | 制限あり |
| 使用例 | 保存、送信、ナビゲーションなど | 送信、リセット、シンプルなクリックボタン |
inputタグは情報の入力、buttonタグは動作の実行と覚えると分かりやすいでしょう。
aタグでリンクボタンを作る際の注意点
aタグをボタンとして使用するときは、ページを移動するときだけにしましょう。
フォームの送信やリセット、JavaScriptによる動的な機能の実行といった、ページ遷移を伴わないアクションにはbuttonタグを使用します。
もしaタグでbuttonタグのような動作ボタンを実装しようとすると、キーボード操作の挙動が異なったり、スクリーンリーダーの読み上げが不自然になったりするなど、アクセシビリティ上の問題が生じる可能性があります。
役割を正しく理解し、ページ移動が目的ならaタグ、それ以外のアクションならbuttonタグと正しく使い分けましょう。
buttonタグ属性の役割
buttonタグの主な属性について紹介します。
- type属性
- name属性
- value属性
- disabled属性
- autofocus属性
これらの属性を理解すれば、ボタンが使いやすくなるはずです。
これから解説するname, value, disabledなどの属性は、inputタグでボタンを作る場合でも同じように使えます。しかし、buttonタグがタグで囲んだテキストや画像が表示されるのに対して、inputタグはvalue属性の値がそのまま表示されます。
type属性
buttonタグのtype属性は、役割を明確に定義できます。type属性には主に3つの値があり、それぞれ異なる動作をします。
| type属性の値 | 役割 |
| submit | フォームの内容をサーバーに送信します |
| reset | フォームに入力された内容を初期値にリセットします |
| button | 特定の動作を持たない汎用的なボタンです。JavaScriptと組み合わせて使うことが一般的です。 |
基本的な使い方は、buttonタグでボタンに表示したいテキストを囲むだけです。
type属性を省略すると、多くのブラウザで自動的に「submit」として扱われるため注意しましょう。
name属性
name属性は、ボタンを識別するための名前を指定します。
1つのフォーム内に複数のボタンがあるときに、押されたボタンに応じてサーバー側の処理を切り替えたい場合に役立ちます。
たとえば、以下のように「検索」と「クリア」の2つの送信ボタンがあると仮定しましょう。
コピー<form action="/search" method="post">
<input type="text" name="keyword">
<button type="submit" name="action" value="search">検索</button>
<button type="submit" name="action" value="clear">クリア</button>
</form>
上記の例では、2つのボタンに「action」という同じname属性を付けました。
検索ボタンを押すと、サーバーには「action=search」という情報が送信されます。一方、クリアボタンを押すと「action=clear」が送信されます。
このように、サーバー側では「action」という名前で送られてきた値を見ることで、どちらのボタンが押されたかを判断し、処理の振り分けが可能です。
value属性
value属性は、フォーム送信時にボタンが持つ値を定義します。value属性は、name属性とセットで使われることが多く、サーバーに「どのボタン(name)が、どのような値(value)で押されたか」を伝える役割を担います。
前回の例をもう一度見てみましょう。
コピー<form action="/search" method="post">
<input type="text" name="keyword">
<button type="submit" name="action" value="search">検索</button>
<button type="submit" name="action" value="clear">クリア</button>
</form>
検索ボタンにはvalue=”search”が設定されており、検索ボタンを押すと、サーバーには「action=search」というデータが送信されます。
重要なのは、value属性に設定した「search」という文字列は、画面上のボタンには表示されないことです。
画面に表示されるのは、あくまで開始タグと終了タグで囲まれた「検索」というテキストです。value属性は、裏側で送信されるデータを定義するためのものと覚えておきましょう。
disabled属性
disabled属性は、ボタンを無効化してクリックできないようにするための属性です。disabled属性が付いたボタンは色が薄くなり、ユーザーはクリックやキーボードでの選択ができなくなります。
たとえば、以下のような使い方があります。
- 利用規約に同意するチェックボックスがオンになるまで送信ボタンが押せない
- 必須項目の入力が完了するまで登録ボタンを無効化にする
- 受付開始時刻になるまで予約ボタンが押せない
特定の条件下でのみボタンを有効にしたい場合によく利用され、disabled属性を使うことで、ユーザーの誤操作を防ぎ、より親切なインターフェースを提供できます。
autofocus属性
autofocus属性は、Webページが読み込まれたときに、指定したボタンへ自動的にフォーカスを当てるための属性です。フォーカスが当たった状態になるため、ユーザーはページを開いてすぐにEnterキーを押すだけで、そのボタンをクリックしたのと同じ操作ができます。
たとえば、ログインフォームのログインボタンや、検索ページの検索ボタンに設定しておけば、ユーザーはマウスを動かす手間なく操作を完了できます。
ユーザーが次に行う操作が明確な場面で使うと非常に効果的ですが、autofocus属性は1つのページ内で1つの要素にしか指定できません。
HTMLボタンの具体的な実装例
HTMLボタンの実装例を紹介します。
- シンプルなボタン
- フォーム送信ボタン
- リセットボタン
- クリックでイベントが発生するボタン
ぜひご自身の環境でコードを書きながら、それぞれの動作を確認してみてください。
CSSでおしゃれな装飾をしたい方は以下の記事がおすすめです。
▶「CSSボタンデザイン13選！コピペで即使えるおしゃれボタンまとめ」を読む
シンプルなボタン
シンプルなボタンは、buttonタグとinputタグが使えます。
実装するときは、意図せずフォームを送信しないようにtype属性にbuttonを指定します。
コード例は以下の通りです。
コピー<!-- buttonタグの場合 -->
<button type="button">クリックできます</button>
<!-- inputタグの場合 -->
<input type="button" value="クリックできます">
buttonタグの場合は、開始タグと終了タグの間に表示したいテキストを書きます。inputタグは、value属性に指定した文字列がボタンのラベルになります。
フォーム送信ボタン
フォーム送信ボタンは、type属性でsubmitを指定します。buttonタグを使うと、アイコンを入れるなどデザインを柔軟に作れます。
コピー<form action="/process" method="post">
<label>お名前:</label>
<input type="text" name="username">
<button type="submit">登録する</button>
</form>
上記の例では、「登録する」ボタンをクリックすると、formタグのaction属性で指定された “/process” というURLに入力内容が送信されます。
inputタグを使っても同じ機能のボタン作成ができ、value属性でボタンの文字を指定します。
コピー<input type="submit" value="登録する">
どちらを使っても機能は同じですが、buttonタグの方がデザインの自由度が高いと言えるでしょう。
リセットボタン
リセットボタンは、フォームに入力された情報を初期状態に戻す機能です。リセットボタンもbuttonタグ、inputタグのどちらでも作れます。
コピー<!-- buttonタグの場合 -->
<button type="reset">入力をリセット</button>
<!-- inputタグの場合 -->
<input type="reset" value="入力をリセット">
どちらのコードを使っても機能は同じですが、リセットボタンの設置そのものは慎重に検討しましょう。
リセットボタンを誤って押してしまうと、入力内容が全て削除されてしまいます。特にスマートフォンのような小さな画面では、このような操作ミスが発生しやすくなります。
そのため、本当にリセット機能が必要か、ユーザーの利便性を損なわないかをよく考えてから設置することが重要です。
クリックでイベントが発生するボタン
「クリックされたら特定のアクションを実行する」という汎用的なボタンは、type属性にbuttonを指定します。
JavaScriptと組み合わせると、クリックされたことをきっかけにJavaScriptの処理を実行できます。
コピー<!-- buttonタグの場合 -->
<button type="button">
メッセージ表示
</button>
<!-- inputタグの場合 -->
<input type="button" value="メッセージ表示">
上記の例では、onclick属性に直接JavaScriptのコードを記述しています。このボタンをクリックすると、「こんにちは！」というアラートが表示されます。
onclick属性を使うことで、「メニューを開く」「計算を実行する」など、ページ遷移を伴わないさまざまな動的機能の実装が可能です。
フォームと連携するボタンの高度な使い方
ここではフォームと連携するボタンの使い方について紹介します。
- フォームの外側からボタンで送信する
- ボタンで入力チェックを無効化する
- buttonタグだけで値を送信する
- ボタンごとにフォームの送信先を変える
フォームの外に置いたボタンから情報を送信したり、入力内容のチェック機能を一時的に無効にしたりと、実用的な方法を解説します。
フォームの外側からボタンで送信する
フォームを送信するボタンはformタグの内側に置く必要があります。しかし、form属性を使用することで、formタグの外に配置したボタンからでも特定のフォームを送信することが可能です。
実装方法は以下の通りです。
- 対象のformタグにid名を付ける（例：id=”entry-form”）
- フォーム外のbuttonタグにform属性を追加値として、formタグのid名を指定
コピー<form id="search-form" action="/search">
<input type="search" name="q">
</form>
<p>ページ内のどこか離れた場所</p>
<button type="submit" form="search-form">検索実行</button>
フォームの外側からボタンで送信する機能は、たとえば長いアンケートフォームにおいて、ページ上部に固定表示されたボタンからいつでも内容を保存できるようにしたい場合などに便利です。
ボタンをフォームから物理的に分離できるため、レイアウト設計の自由度が格段に向上し、より柔軟なUI設計が可能になります。
ボタンで入力チェックを無効化する
HTMLには、フォーム送信時にブラウザが入力内容を自動でチェックしてくれる「バリデーション」という便利な機能があります。
たとえば、inputタグにrequired属性を付けると、その項目が未入力のままではフォーム送信ができません。
しかし、「まだ途中だけど、一旦下書きとして保存したい」というときはformnovalidate属性を使用すると、無効化できます。
コピー<form action="/process" method="post">
<label>お名前 (必須):</label>
<input type="text" name="username" required>
<button type="submit">登録する</button>
<button type="submit" formnovalidate>下書き保存</button>
</form>
例では、登録するボタンを押したときに名前が未入力だとエラーになります。一方、下書き保存ボタンはformnovalidate属性があるため、未入力の状態でもフォームを送信できます。
buttonタグだけで値を送信する
「商品をカートに追加する」ボタンなどで、ユーザーに何かを入力させる必要がなく、ボタン自体が値を持っているときにbuttonタグだけで実装します。
実装するには、buttonタグにname属性とvalue属性を指定し、name属性でデータの名前、value属性で送信したい具体的な値を設定しましょう。
コピー<form action="/cart" method="post">
<input type="hidden" name="item_id" value="123">
<button type="submit" name="action" value="add_to_cart">
カートに入れる
</button>
</form>
例では、「カートに入れる」ボタンを押すと、「action=add_to_cart」というデータがサーバーに送信され、サーバー側は「商品IDが123のアイテムをカートに追加する操作が行われた」という判断をします。
ボタンにわかりやすい値を設定すると、ユーザーがフォームを直感的に操作しやすくなります。
ボタンごとにフォームの送信先を変える
formaction属性を使うと、ボタンごとにフォームの送信先URLを変えられます。
フォームのデータはformタグのaction属性で決められた1つのURLにしか送れません。しかし、ボタンにformaction属性を追加することで、ボタンが押されたときだけaction属性の設定を上書きし、別のURLへデータを送ることが可能です。
たとえば、ブログ記事の作成画面で内容を確認するためのプレビューボタンと、記事を投稿し公開するボタンがあるとします。
コピー<form action="/post/publish" method="post">
<textarea name="content"></textarea>
<button type="submit" formaction="/post/preview">プレビュー</button>
<button type="submit">公開する</button>
</form>
公開ボタンを押すとデータは「/post/publish」へ送られますが、プレビューボタンを押したときだけ、送信先がformaction属性で指定された「/post/preview」に変わります。
このように、formaction属性を活用すれば、1つのフォームからでもユーザーの目的に応じてデータの送信先を柔軟に振り分けることが可能です。
まとめ
HTMLでボタンを実装する際は、button・input・aタグの役割を正しく理解し、目的に応じて使い分けることが大切です。
特にデザインの自由度が高いbuttonタグを使いこなせば、ユーザーにとって格段に分かりやすいサイトを構築できるでしょう。
Web制作の知識をさらに体系的に、そして実践的に学びたい方は、未経験からプロを目指せるデイトラWeb制作コースがおすすめです。
Web制作を仕事にするならデイトラWeb制作コースがおすすめ！
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！