HTMLのボタン(button)でリンクを作成する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLのボタン(button)でリンクを作成する方法について、フォームとそれ以外の場合に分け、簡単に解説していきます。

フォームの場合

フォーム内のボタンの場合はformタグのaction属性にリンク先を指定します。

buttonタグにはリンク先を特に指定せず、type属性にsubmitを指定するだけになります。

<form action="https://google.com/">
    <button type="submit">送信</button>
</form>

上記のコードでは、送信ボタンでグーグル(https://google.com)に対し、フォームデータを送信します。

フォームでない場合

フォーム以外に設置するボタンでは、ボタンでリンク先を指定する必要があります。

buttonタグのtype属性にはbutton、onclick属性にはlocation.href=’URL’;を指定します。

<button type="button" onclick="location.href='https://google.com/';">グーグル</button>

上記のコードでは、グーグルボタンでJavaScriptによってグーグル(https://google.com/)のページに遷移します。

buttonタグ以外の場合

buttonタグやinputタグ、aタグ以外でも任意のタグで、リンクボタンを作成できます。

例えば、divタグにonclick属性でlocation.href=’URL’;を指定すれば、divタグがリンクになります。

<div style="cursor:pointer;" onclick="location.href='https://google.com/';">グーグル</div>

上記のコードでは、スタイルでボタンのように見せかけたdiv要素のグーグルボタンで、JavaScriptによってグーグル(https://google.com/)のページに遷移します。