コラム
【2024年版/初心者向け】HTMLのbuttonタグとは？onclick属性でリンクを付ける方法について初心者向けに解説！
buttonの活用方法はさまざまで、ほかのページに遷移したり送信したりすることができます。
今回は、そんなbuttonタグの基本的な使い方や、よく使われるonclick属性について、詳しく解説していきます。
目次
buttonタグとは何か具体的に解説していきます。
HTMLのbuttonタグは、ボタンを作成するために使います。ほかページの遷移やフォームの「送信」や「リセット」のボタンを設置するためによく使われます。
そのほかにも、ボタンをクリックすることでJavaScriptを呼び出し、複雑な処理を実行したいという場合にもよく使われるので、使用頻度が高いタグとなります。
※JavaScript＝Webサイトにアニメーションを付けるなど、ユーザーのアクションに応じて複雑な動きを付けられるプログラミング言語の1つ
type属性 | ボタンの機能を決める！
buttonタグは、type属性でボタンの機能を決めます。type属性には「submit」「reset」「button」の3つの値があるので、用途に合わせて記述します。
submit（送信ボタン）
buttonタグで「type=”submit”」と指定すると、フォームの送信ボタンとして機能するようになります。ボタンを押すと、フォームに入力した内容がサーバーに送ることができ、指定した処理を実行します。
<button type=”submit”>送信ボタン</button>
reset（リセットボタン）
buttonタグで「type=”reset”」と指定すると、フォームのリセットボタンとして機能するようになります。デフォルトではbuttonの親要素となるフォーム内の入力欄がすべてリセットされます。
ユーザーが入力した文字列をワンクリックで削除させたい場合などに用いられますが、「submit」「button」と違い、なくても困らないことが多く、利用頻度はあまり高くありません。
<button type=”reset”>リセットボタン</button>
buttonタグで「type=”button”」を指定すると、デフォルトでは無反応のボタンとなります。一旦、何の機能も付与されていないボタンを「type=”button”」で作成し、その後必要な機能をつけ足していく、というイメージがわかりやすいのではないでしょうか。
つまり、設置したボタンをページ遷移や、JavaScriptを利用したアニメーションの起動処理に使う場合など「フォームの送信」「フォームのリセット」以外に使用する場合は全てtype属性を「button」に設定する必要があります。
<button type=”button”>ボタン</button>
disabled属性| 機能しないボタンを作る！
buttonタグに「disabled」属性を指定することで、クリックしても何も機能しないボタンとなります。
<button type=”submit” disabled>機能しない送信ボタン</button>
上記のコードは、buttonのtype属性を「submit（送信）」とすることでフォームなどの送信ボタンを作成しています。さらに、作成された送信ボタンに「disabled」の属性が追加されているため、ユーザーがクリックすることができない状態となっています。「disabled」は、Ｗebサイトでよく利用されるJavaScriptと合わせて利用されることがほとんどです。JavaScriptを用いることで、特定の条件下でのみ指定した属性を適用することができます。
これらの機能を合わせることで「フォームにユーザーが必要な情報を入力したときのみ押せるようになるボタン」なども作成可能です。
autofocus属性 | ボタンにフォーカスを当てる！
buttonタグに「autofocus」属性を指定することで、ページを読み込んだ時点でボタンにフォーカスが当たります。Enterキーを押すとボタンが押せる状態になります。
<button type=”submit” autofocus>送信ボタン</button>
onclick属性 | ボタンにリンクを付ける！
では、onclick属性についてbuttonタグを使用しながらの解説をしていきます。
onclick属性とは、ユーザーが要素をクリックした際に起動する処理を指定するイベント属性です。ボタンをクリックした際に、メッセージを表示したり別のページに遷移したりといった処理が可能です。また、onclick属性とJavaScriptを一緒に使うことで、より複雑な処理を実行することができます。
onclick属性の使い方・書き方
onclick属性もいろいろな使い方があるので実際に記述しながら、ひとつずつ解説していきたいと思います。
onclick属性の基本的な使い方
まず、onclick属性を使うには、どのような記述をすればよいのか解説していきます。
onclickの記述方法はtype属性やdisabled属性などと同じような記述となります。onclickをボタンに設定する際の基本的なHTMLのコードは、以下となります。
<button type=”button” onclick=”値”>ボタン</button>
HTML
onclickを使用する際のボタンのtype属性は送信・リセットではないので「button」の値となります。buttonの後に、今回使用したいonclick属性を記述し、今回は入力する値を「onclickSample()」とします。
※入力する値については後ほど解説します。
<button type=”button” onclick=”clickDisplayAlert()”>クリックするとメッセージが表示</button>
それでは先ほど入力した「onclickSample()」の関数に意味をもたせていきましょう。次はこの「onclickSample()」がどういう処理を行う関数かをJavaScriptで記述していきます。
JavaScript
では、JavaScriptを解説していきます。
先ほどのHTMLで呼び出した「onclickSample()」関数が記述されています。内容は、呼び出したらブラウザ上にアラートで「ボタンがクリックされました」と表示されるだけの簡単な関数です。
function onclickSample() {
alert(“ボタンがクリックされました”);
}
このようにHTMLではJavaScriptで作った機能を、自身が設定した関数名で呼び出し利用することができます。
onclick属性には関数の複数指定も可能
例えば、ボタンを押したら複数の関数を実行したいという場合があるかもしれません。そのようなときは、値を複数指定することも可能です。実際に記述してみましょう。
HTML
基本的な記述は変わりません。buttonタグにtype属性は「button」を指定し、onclick属性が記述されています。
唯一違う点は、JavaScriptで必要なid属性を付与したことと、onclick属性の値が複数書かれているということです。
※id属性＝任意の文字列（今回の場合はbutton）にid（識別子）を付ける機能。任意のidを呼び出す関数などと合わせて用いられることが多い属性
onclick属性の中にfunctionAとfunctionBを記述し、セミコロン(;)で区切ることで複数の指定が可能となります。
<button id=”button” type=”button” onclick=”functionA();functionB()”>クリックするとメッセージが表示</button>
では、この二つのfunctionにそれぞれ別の機能を付与するJavaScriptを記述していきましょう。
JavaScript
今回は「functionA」と「functionB」という関数をそれぞれ作りました。functionAは先ほどと同様で、ボタンをクリックしたら、アラートで「ボタンがクリックされました」と表示されます。
functionBはボタンをクリックしたら、ボタン(id属性が「button」)の文字が「クリックするとメッセージが表示」から「ボタンがクリックされました」に変更されます。
function functionA() {
alert(“ボタンがクリックされました”);
}
function functionB() {
document.getElementById(“button”).textContent = “ボタンがクリックされました”;
}
※docment.getElementById()：（）内で指定したid属性を持つ要素を呼び出す関数
※textContent：textContent=””とすることで、指定した要素のテキストを””内の文字列に書き換える関数
先ほどのHTMLと、このJavaScriptで実行される処理は、以下となります。
- ユーザーがクリック
- JavaScriptのfunctionAが起動、ボタンがクリックされましたと表示
- JavaScriptのdocument.getElemntById(“button”)が起動、id属性がbuttonとなっている要素を呼び出す
- 呼び出された要素（今回はbutton）に対してtextContentが起動、「クリックするとメッセージが表示」のテキストが「ボタンがクリックされました」に書き換えられる
onclick属性で引数を渡す
onclick属性では、関数に任意の引数を渡すことも可能です。引数の値によって表示が変わるボタンをこれから記述していきます。
HTML
今回は、2種類のボタンを生成しています。2つのボタンの違いは、引数の値です。最初のボタンは引数が「1」、次のボタンは「100」と値を変えています。では、JavaScriptの記述を見ていきましょう。
<button type=”button” onclick=”functionNum(1)”>1のボタン</button>
<button type=”button” onclick=”functionNum(100)”>100のボタン</button>
JavaScript
関数は今までと同じようにアラートが表示される簡単なものです。引数を設定して、ボタンごとの引数の値がアラートで表示されるようになっています。
引数を使用することでこのような簡単な表示でなくてもいろいろ活用が可能となります。
function functionNum(num) {
alert(num + “のボタンがクリックされました”);
}
onclick属性の引数に「this」を使う
onclick属性では、指定した関数の引数に「this」を使用することで、そのボタンの「戻り値」を取得することが可能です。thisは、基本的にクリックした要素が対象となります。では、実際に記述して解説していきます。
HTML
onclick属性の引数をみると、「this.id」と記述されています。この記述でbuttonタグのid属性を戻り値として引数に挿入されています。
<button id=”button” type=”button” onclick=”functionId(this.id)”>をクリックするとこのボタンのID属性が表示されます</button>
JavaScript
この記述では、buttonタグで設定したid属性が表示されます。戻り値もid属性だけでなく、さまざまな属性に対応しているので活用場所は多いです。
function functionId(id) {
alert(“このボタンのid属性は「”+id+”」です”);
}
onclick属性に「location.href」を指定してリンクを飛ばす
buttonでよく使う、リンクへ飛ばす方法です。aタグを使ってリンクを飛ばす方法がメジャーかと思いますが、onclick属性で「location.href」を指定することでリンクを飛ばすことが可能となります。では、実際の記述を見ていきましょう。
HTML
記述は今までと同様にonclick属性があり、その中で「location.href」を設定するだけです。
<button type=”button” onclick=”location.href=’https://www.google.com/'”>クリックするとほかのページへ飛びます</button>
注意点としては、次の記述のように、すべてダブルクォーテーションまたはシングルクォーテーションだとエラーが発生し、正しい動作ができなくなることです。
- すべてダブルクォーテーションで記述した場合
<button type=”button” onclick=”location.href=”https://www.google.com/””>クリックするとほかのページへ飛びます</button>
- すべてシングルクォーテーションで記述した場合
<button type=”button” onclick=’location.href=’https://www.google.com/”>クリックするとほかのページへ飛びます</button>
いずれの記述もリンクへ飛ぶことができないので、最初に記述した通り、ダブルクォーテーションとシングルクォーテーションをしっかりと使いこなし、正しく認識されるように記述していきましょう。
別ページでリンク先を開きたい場合
「location.href」で記述した場合のほかのリンク先に飛ぶ方法を解説しました。では、別タブでリンク先を開きたい場合について解説します。
この場合、「location.href」を使わず「window.open」を使用していきます。
HTML
onclick属性に「window.open」を使用することで、別タブで開くことが可能です。openメソッド内で、第一引数に「リンク先URL」、第二引数に「_blank」を設定することで、リンク先を別タブで開くことが可能となります。
ちなみに「_blank」はaタグではtarget属性で使用されることが多く、別タブで開くことができる値になります。
<button type=”button” onclick=”window.open( ‘https://www.google.com/’, ‘_blank’ )”;>クリックすると新規タブにてほかのページへ飛びます</button>
HTMLで作成したWEBページにおいてリンクを設定する際に、aタグとbuttonタグの二つがよく利用されています。buttonタグについては解説しましたので、まずはもう一つのタグ、aタグについて簡単に解説します。
aタグとは
aタグとは、HTMLでリンクを設定する際に使用するタグの1つです。簡単な記述でリンクを設定することができるため、HTMLで作成された多くのWEBページで利用されています。
<a href=”リンク先のURL”>リンク<a>
aタグは、基本的にはリンクをWEBページに挿入する際に使用するタグです。HTML5からはaタグの<div>や<p＞といった要素を含められる仕様となったため、aタグにも様々な機能を持たせられるようになりました。
aタグとbuttonタグの機能の違いは、主に以下のとおりです。
| リンク設定 | ボタン装飾 | 送信フォーム | |
|---|---|---|---|
| aタグ | 〇 | △（CSSで設定必要） | × |
| buttonタグ | 〇 | 〇 | 〇 |
aタグとbuttonタグは、どちらでもクリックしたユーザーを設定したWEBページへ遷移させることができます。
HTMLで作るWEBページにどちらを利用するかは製作者の好みによるところもありますが、以下の条件で使い分けることが多いようです。
aタグを使う場合
- ボタン装飾が不要な場合（もしくはCSSを利用して作成する場合）
- JavaScriptの動作が安定しない場合
- JavaScriptを利用する場合
- 簡単なボタン装飾が必要な場合
- 送信フォームとして利用する場合
onclick属性を追加するときの注意点
onclick属性を追加した際に注意する点があります。
これはonclickに限った話ではありませんが、formタグ内においてinputなどのフォーム部品で使用されているnameやidとonclick属性で呼び出すユーザー定義関数名が重複していると、関数が実行されない場合があります。関数を使用するにあたり、こういった可能性があるということを意識しながらコードを書いていく必要があります。
まとめ
今回はbuttonタグにonclick属性を追加したときの使い方や注意点について解説しました。
onclick属性は、いろいろな使い方ができる便利な属性ですので、buttonタグを使うときは、onclick属性も積極的に使っていきましょう。
WEBでのお問い合わせはこちら
