HTML ボタン作成方法一覧(a,input,button,divタグ)

## 実現方法一覧
:::note warn
※実装例は「link foot」ボタンを押すと画面下に移動し、
「clickEvent」を押すとボタンの見た目「on」「off」が切り替わる仕組みです
また、formのsubmitイベントが発火した場合はイベント名がアラートで表示されます。
また、各ボタンの疑似要素:afterに「＞」を表示するように設定しています。
:::

### aタグ
クリックにより別ページまたはアンカーに移動させたい場合などにaタグをボタンの見た目にする。
他にもサーバにデータを送信しないような汎用的なボタンを作成する際に使用する。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLjNPME" data-preview="true" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/yLjNPME">
  Untitled</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### inputタグ[type=button]
当初から存在するボタン要素、このボタンそのものに対し既定の動作は存在しない。
javascliptでclickイベントなどに対し個別に処理を実装する必要がある。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNJvdva" data-preview="true" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/WNJvdva">
  Untitled</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### inputタグ[type=submit]
input[type=button]にsubmitイベントの発火を付け加えたもの

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExLjoyV" data-preview="true" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/ExLjoyV">
  button-3</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### buttonタグ
HTML5より追加されたボタン要素
大まかにはinput[type=submit]と同様
inputタグには疑似要素を使うことができないが、buttonタグの場合は
:afterのような疑似要素を使用したcssの指定が可能

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdLJXea" data-preview="true" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/mdLJXea">
  button-4</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### divタグ
divタグでボタンっぽいものを作りclickイベントで拾う
・タブフォーカスが効かない
・エンターキーなどで押下できない
などの課題があり他のボタン要素と合わせようとすると手間がかかるためあまり推奨できない

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjvdpEL" data-preview="true" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/JjvdpEL">
  button-5-1</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

対応版※この例はキーボード押下でボタンを押すと「ボタンをキーでクリック」とアラートが表示されるように実装している
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGMdLWd" data-preview="true" data-user="masayakomono" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masayakomono/pen/bGMdLWd">
  button-5-2</a> by Komono masaya (<a href="https://codepen.io/masayakomono">@masayakomono</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## まとめ
|  | \<a\>| \<input\><br>[type=button] | \<input\><br>[type=submit] | \<button\>| \<div\> |
|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|
| HTML4以前利用可能  | 〇  | 〇  | 〇  | ×  | 〇 |
| submitイベント<br>(デフォルト)  | ×  | ×  |  〇 |  〇 | × |
| タブキーによるフォーカス  | 〇  | 〇  |  〇 |  〇 | △ |
| エンターキー等による押下  | 〇  | 〇  |  〇 |  〇 | △ |
| 疑似要素利用可能  | 〇  | ×  |  × |  〇 | 〇 |

## 結論
・疑似要素を利用したデザインの事を考えるとaタグまたはbuttonタグを使用したほうが良い
・古いブラウザのことも検討するのであればinputタグの使用を検討する
・divタグで実現しようとする場合はtabindexやkeydownイベントなどをわざわざ実装する必要があり手間である。

## 参考URL
https://web-camp.io/magazine/archives/6881

https://qiita.com/xrxoxcxox/items/7d06d4f2d861b022767a