1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

はじめに

こんにちは、超初学者のなかむーです。
スクールで学んだ知識や経験などを記事を通してアウトプットしています。
今回は「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タグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/24552)
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?