<a> と <button type=submit>の違い

Question

<a href="/hoge"></a>

と

<form method="get" action="/hoge">
  <button type="submit"></button>
</form>

というコードがあった場合、どちらもhogeアクションにとぶと思うのですが、違いとして何がありますか？

Answer 1

質問文にあるa要素、button要素を使った2つのコードの動作は同等です。しかし、後者で入力項目を用意し、button要素をクリックした場合フォームのデータが?を区切りとしてaction属性の値に追加されることに対して、前者ではhref属性にこれを直接記述しなければなりません。また、以下のようにこの2つの要素が持つ意味には大きな違いがあります。

• a要素: 主にどこかへ移動することを意図するものに使われる。

例: 別のウェブサイト、ページ内リンク、メールソフト、電話アプリ(mailto:、 tel:)

• button要素(type属性がsubmit): ボタンを表し、フォームのデータを送信する目的で用いられる。

仮にa要素で見た目上はbutton要素と同じものを作り、button要素のように使うとしても、要素の意味を解釈するスクリーンリーダーやクローラーなどのツールがそのa要素を適切にbutton要素のようなものとして理解するかどうかは保障されません。これはbutton要素で見た目上a要素のようなものを用意したときにも同じことが言えると思います。

Answer 2

aタグで飛ばすときにはパラメータに任意のエンコードを掛けないと
正しく伝わらない場合があります。
それがクリアになっているなら、getに関しては挙動は同じです