HTMLのボタン(button)でリンクを作成する方法【現役エンジニアが解説】
今回は、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/)のページに遷移します。