このページでは、HTMLでボタンを作成するさまざまな方法について解説します。基本的なボタンの作り方から、ページ遷移やイベントの処理に役立つボタンの実装例まで、豊富な例を交えて詳しく説明します。目次から各セクションにジャンプできます。

目次

• 基本的なボタン
• フォームで使用するボタン
• リンクのように動作するボタン
• JavaScriptで動作するボタン
• 無効化されたボタン
• 画像を使用したボタン

基本的なボタン

HTMLで最も基本的なボタンは、<button>タグを使用して作成します。

<button>クリックしてね</button>

ブラウザ上では次のように表示されます。

クリックしてね

フォームで使用するボタン

フォーム内でボタンを使う場合、主に以下の3種類があります。

• submit: フォームを送信します。
• reset: フォームの内容をリセットします。
• button: カスタムアクション用（デフォルトでは何もしません）。

<form action="/submit" method="post">
    <button type="submit">送信</button>
    <button type="reset">リセット</button>
    <button type="button">カスタムアクション</button>
</form>
    

上記の例では、「送信」ボタンがフォームデータを送信し、「リセット」ボタンがフォームの内容をクリアします。「カスタムアクション」ボタンはJavaScriptと組み合わせて使用します。

リンクのように動作するボタン

<a>タグを使用して、ボタンをリンクとして動作させることもできます。

<a href="https://example.com">リンクボタン</a>
    

これは見た目がボタン風ではありませんが、スタイルを付けることでボタンらしくすることができます。

リンクボタン

JavaScriptで動作するボタン

ボタンをクリックしたときにJavaScriptの関数を呼び出す方法です。

<button onclick="alert('ボタンがクリックされました！')">アラート表示</button>
    

ボタンをクリックするとメッセージが表示されます。

アラート表示

無効化されたボタン

ボタンを無効化するには、disabled属性を使用します。

<button disabled>無効化されたボタン</button>

無効化されたボタンはクリックしても何も起こりません。

無効化されたボタン

画像を使用したボタン

ボタンに画像を使用する場合、<input type="image">を使います。

<form action="/submit" method="post">
    <input type="image" src="https://via.placeholder.com/150" alt="画像ボタン" width="150" height="50">
</form>
    

画像がボタンとして表示されます。