hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > <a>か<button>か

<a>か<button>か

クリックできるものがあって，<a>にするか<button>にするか，という話をしていて，いろんな観点があるなと思ったのでメモ．

  • 単なる画面遷移なら<a>
  • 単にformを送信したいときは，<input type="submit">や<button>
  • <button>はdisabled属性を使って無効状態にできるので，押せない場合もあるなら便利
  • リンクを<a>にしておくと，PCではホバーするとリンク先が見えるので，ユーザーにとっては何が起きるか予想できて便利
    • そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がする
  • リンクを<a>にしておくと，:visitedを使って訪問済のリンクの色を変えることができて便利
  • モーダルウィンドウを出すとき，ウェルカムメッセージを開くボタンを<a href="#welcome">として，/#welcomeのときにウェルカムメッセージを出す，としておくとブラウザの機能に乗っかってモーダルウィンドウを出すことができて便利．
    • ブラウザバックやリロードに対応できる
  • <form>の中に<button>を置くとsubmitボタンになってしまうので，<button type="button">する
    • 普段はJSでclickイベントを見てpreventDefaultしているけど，ある日JSで例外が出てformがsubmitされてしまう，ということが昔あった
  • <button>のかわりに<span>を使うと，<button>が本来持つ機能を再実装することになりメリットが少ないのでやめましょう