【HTML】ボタンタグ<button>にリンクを付ける方法：onclick属性

2022.02.02 / 2022.11.03

本記事ではHTMLのボタンタグ<button>にリンクを付ける方法について解説していきます。

フォームやJavaScriptを走らせるボタンとしてよく利用されるボタンタグ<button>ですが、画面推移するためのリンクを付けることもできます。

aタグにCSSを使ってボタンのように表示する方法もありますが、HTML5から追加された<button>によるリンクもぜひ使ってみてください。

ボタンタグ<button>

ボタンタグ<button>とは

ボタンタグ<button>はページ上にボタンを表示するために使用されます。よく見るボタンの使い方としてはフォームの「送信」ボタンや「リセット」ボタンです。

その他にボタンを押下時にJavaScriptを走らせて、なにかしらの処理を行うことにも利用されています。

ボタンタグ<button>は次のように使用します。

構文

<button>ボタン内に表示する文字</button>

また<button>には様々な属性が用意されており、それらを利用することで機能を変えたり、ボタンクリック時の動作をコントロールすることができます。

ボタンタグ<button>の属性

ここでは主要な属性を簡単に解説していきます。

最も重要な属性としてtype属性があります。これはボタンの機能を決めるために使用され、以下の３つの種類が存在します。

値	説明
submit	フォームの情報をサーバーに送信する
reset	フォーム情報をリセットする
button	ただのボタン

type属性のbuttonは主にJavaScriptを走らせるためのボタンとして使用されます。

その他にボタンの名前を付けるname属性や、サーバーに送信する値を指定できるvalue属性、ボタンを無効かするdisabled属性などが存在します。

<button>にリンクを付ける

ボタンタグ<button>の利用法として、画面推移するためのリンクを付けることができます。

リンクを付けるとは言いましたが、実際にはクリック処理（onclick属性）でJavaScriptのlocation.hrefを使用します。

onclick属性とは

onclick属性とはタグ（開始タグ）に指定できる属性の一つであり、要素がクリックされた際に実行する処理を指定できます。

構文

<開始タグ onclick=クリック時に実行する処理>テキスト</終了タグ>

実行する処理には主にJavaScriptの関数（function）が指定されます。これを用いてクリック時にメッセージボックスを表示するといった動きのあるコンテンツを作成できます。

以下に簡単な使用例を示します。

<html>
    <script>
        function alert() {
            alert("要素がクリックされました");
        }
    </script>
    <body>
        <a href="#" onclick="alert()">クリックしてね</a>
    </body>
</html>

location.hrefとは

locationはURLやプロトコルデータなどの情報を取得することに用いられ、様々なプロパティが存在します。その中の１つにlocation.hrefがあります。

location.hrefを利用することで以下のことが可能になります。

URLの取得
画面遷移

location.hrefでは現在アクセスしているページのURLを取得できます。

var url = location.href;
console.log(url);

本記事で利用するのはlocation.hrefの画面遷移の機能です。移動先のURLを指定することでその先に移動する処理を指定できます。

location.href = "URL"

<button>にリンクを追加

ここまで見てきたonclick属性とlocation.hrefを利用して<button>タグに画面遷移のリンクを貼ってみます。

以下のように記述することでボタンをクリックすると指定したURLに画面遷移するようになります。

location.hrefでリンクを貼るとデメリットとして、ホイールクリックやCtrl＋クリックで別タブでページを開くことができなくなります。これを避けたい方はaタグを利用することをお勧めします

上記のように<button>タグを記入することで、簡単にリンクを持つボタンを作成することができます。

onclick属性の利用用途

inputタグにdisabled属性を利用するとき

フォームform内でinputタグにdisabled属性を付与してデータをサーバーに送信する場合、通常はデータはサーバーに送信されません。

なぜならdisabled属性が付与された入力フィールドからはデータが送信されない仕様となっているからです。

disabled属性を使用しながらデータをサーバーに送信したい場合、onclick属性とjQuery（javascript）を利用すれば可能となります。

詳しい方法については以下記事をご参照ください。

まとめ

本記事「【HTML】ボタンタグ<button>にリンクを付ける方法：onclick属性」はいかがでしたか。

aタグやinputタグ、buttonタグなど様々な方法でボタンにリンクを付けることができます。その中の一つの方法として本記事で紹介した方法を覚えておいてください。