ワイヤード・パンチ

htmlのbuttonタグをクリック時にsubmitしてしまうときの対処法。

htmlのformタグ内にtype=”button”のinputタグを置くと、画面遷移せずに何かしらの処理をするためのボタンが作れます。

でも、inputタグでやるよりはbuttonタグにした方が、外観の拡張性も高いので、それに置き換えようとしました。

しかし、type=”submit”にしていないにも関わらず、buttonタグをクリックすると、次の画面に進んでしまいました。

広告

今回試そうとしたコード。

<form method="post" action="https://wiredpunch.com">
	<button>buttonタグ</button>

</form>

inputタグはボタンの形以外にも様々あるため、typeを明示しないといけませんが、buttonタグは名の通りボタンなので、わざわざ明示していません。

だからどちらも、クリックしても次の画面には進まないボタンになると思ったのですが…。

いざクリックしてみると、formタグのaction要素で指定しているURLに飛んでいってしまいました

(actionなしでも良かったのですが、同じページに移動しても移動したかわかりづらいので、今回は指定しています。)

デフォルトがsubmitになっている。

buttonタグをクリックすると、次の画面に移動してしまう原因は単純です。

buttonタグのtype要素は、デフォルトの値がsubmitだからです。

buttonタグなのでtypeもbuttonがデフォルトかと思いこんでいたのですが、そうではなかったようです。

だから、ただのボタンとして置きたい場合は、以下のように修正しましょう。

<form method="post" action="https://wiredpunch.com">
	<button type="button">buttonタグ</button>

</form>

これでbuttonタグも、ただのボタンになりました。

また、デフォルト通りsubmitボタンとして機能させたい場合も、できればtype=”submit”を明示しておいた方が、勘違いを減らせるかもしれません。