Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@nakasan773

<button>でhref=が使えない!??【解決】

はじめに

こんにちは、超初学者のなかむーです。
スクールで学んだ知識や経験などを記事を通してアウトプットしています。
今回は「buttonタグにリンク移動できるのか?」というタイトルですが、
結論から言うとYesです!

< a > と href="#"

a タグでは以下のようにすることで遷移できる。

<a href="signup">新規登録</a>

"/signup"でも遷移できます。

< button > と href="#"

buttonタグでは以下のようにすることで遷移できる。

<button onclick=location.href="signup">新規登録</button>

onclick=location.を後ろに合体させるだけですね!
そして、これはJavaScriptで使われているものらしいですね。
aタグでは href属性(HTML)
buttonタグでは onclick属性(JavaScript)
フォームの中でリンク移動が可能になるので、便利だなぁと感じました。🌝

スクリーンショット 2021-04-28 13.39.58.png
引用 : HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

ちなみに
href は「エイチレフ」と読むみたいです。
恥ずかしながら、この課題に出会うまで知りませんでした...笑


至って簡単で単純ですぐ終わってしまいますが、実際に使用したところです!何かの参考になれば幸いです。🙇‍♂️


<div class="row justify-content-center mt-5">
    <div class="col-4 text-center">
        <h3>まだアカウントを<br>お持ちでない方はこちら</h3>
        <button type="button" class="btn btn-primary mt-5" onclick=location.href="signup" style="width:120px;height:50px">新規登録</button>
    </div>

    <div class="col-4 text-center">
        <h3>すでにアカウントを<br>お持ちの方はこちら</h3>
        <button type="button" class="btn btn-primary mt-5" onclick=location.href="login" style="width:120px;height:50px">ログイン</button>
    </div>
</div>

参考文献

•  HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?