Submit ボタンにtype=”submit”を使わないで！

先日、入力フォームを作っていた際、一番最後に入力内容を飛ばすためのいわゆるSubmitボタンを、何も考えずにtype=”submit”としたらうまくいかなかった。
今日はsubmitを使わない方がいい理由についてまとめる。

type=”submit”とは

まず、ここでtype=”submit”と言っているのは、
<button type=”submit”></button>および
<input type=”submit”></input>のこと。
例えば以下のような書き方。

  <button type="submit">送信</button>

  <input type="submit" value="送信"></input>

でもJavaScriptやReactを使うようになったら、
<button type=”button”></button>を使おう！というのが今回のお話。

  <button type="button" onClick={handleClick}>送信</button>

何故この方が良いのか？
ポイントはデザイン面と、制御の面でのカスタマイズ許容度だ。
結論はもう先に出てしまったが、ここからはその背景を確認していく。

WEBフォームについて

WEBフォームは日常に溢れているのでそれが何かは説明しないが、基本的にはユーザーがWEBフォームに入力すると、WEBサイトへそのデータが送られて、WEBサイト(フロントエンド)からさらにWEBサーバー(バックエンド)に送られる。つまりフォームを作るということは、それはバックエンドに繋がることが前提のようになっている。
そしてHTMLにはWEBサイトの作り手がそのようなフォームをつくりやすいように、またWEBサイト側がこれはフォームなんだと識別しやすいように、<form>や<input>などのパーツ（要素）があらかじめ用意されている。

<form>について

フォームを形成しているコードの前後にこの<form> </form>をつけると、「これはフォームである」と定義付される。フォームと定義するとどうなるかというと、フォームらしい動作を登録するための属性があらかじめ用意されているので、actionやmethodなどを追記しやすいという特典がある。
先ほど触れたように、フォームに入力されたデータはフロントエンドからバックエンドに送られて、処理されたり保存されたりするが、その際の送り先等をどこかで指定しなければならない。ここで指定しなければならないと言うことではなく、<form>と合わせて書きたい場合はこの属性が使えますよと言う話。

• action 属性には、フォームで収集したデータを送信すべきURLを定義する
• method 属性には、データを送信するために使用する HTTP メソッドを定義する。

<form action="...url" method="post"> 

</form>

そして、今回学んだことは、別のところ(Node.jsなど)で指定するつもりで、このaction属性を特に書かなかった場合でも、フォームが含まれているページの URL にデータが送信されることがあるということ。ただの看板的なものかと思っていたので、おかしなことになった。もしもaction属性を特に記載していないのにデータが送信されてしまうという場合には、次のtype=”submit”となっている可能性があるので確認しよう。

<input>とtype属性について

ユーザーにフォームへ入力させたい項目は<input>を使うが、この時のtype属性で何を選ぶかによって、ユーザー側での見た目や、挙動が変わってくる。今回はsubmitについてのみ触れるが、他のtype（型）が気になる人はこちらのMDNのサイトを参照してほしい。

まず<input type=”submit”>の場合、見た目はボタンとして描画される。同じinputでもtype=”text”とは見た目がガラッと変わるのは言うまでもないが、この時のデフォルトのボタンデザインは、同じボタンでもユーザーがどのブラウザで表示させているかによって見た目が多少異なる。
挙動についても、クリックイベントが発生した時、ブラウザがサーバー側へフォームを送信しようとするという。頼んでないのに！

見た目へ対処するには<button>を使う！

フォームを作っていて見た目が思い通りにいかないなということであれば<input>の代わりに<button>を使うと、デザインの選択肢が広がる。具体的には、ボタンを作った際、ブラウザごとに異なるデフォルトのスタイリングを持つので、ページ全体の統一感が損なわれたりする場合がある。ボタンだけダサい、みたいな。これに対処する際、inputよりもbuttonの方が、高度なCSSに対応しているとのこと。たとえば、アイコンをボタン上に表示したい場合とか、::afterなどのpseudo-elementを使いたい場合とか。そこまで高度なデザインは求めてないけど・・・、と言う場合もbuttonを使っておけば間違いない。

挙動を制御するにはtype=”button”を使う！

なんだか挙動がおかしい（エラーになるなど）と言う場合、type=”button”にしてみよう。基本的にはtype=”submit”でも、フォームの送信先のURLなどを設定してあるなら動くはずだが、JavaScriptでフォームに入力されたデータをどのようにサーバーサイドに飛ばすか、自分で制御したい場合には、type=”button”を選ぼう。type=”button”を使うと余計な機能（サーバーへフォームの内容を送信しようとするような機能）がついていないプレーンなbutton（クリックされても何もしないボタン）を作れるのだ。ちょうど最近データベースとか、サーバーサイドとかの勉強を始めたばかりなので、この見えづらい機能のことを知らずに、エラーが出ていた。サーバーへフォームの内容を送信するためのコードをNode.jsとExpressで書いていたのに、buttonの方をtype=”submit”にしていたせいで、フォームデータを勝手に送信して（存在しない）レスポンスが読み込まれていたみたい。

結論：　<button type=”button”> </button>を使おう

JavaScriptで自分で色々やるならこれ一択！

今日はここまで！

とても素敵な図書館を見つけてしまった！
豊橋市まちなか図書館（URL）。
図書館なのにおしゃべりOK、飲み物OK、電源付き席多数。
カフェあり、テラス席あり。
市外からの旅行者でも貸し出しカード作れて、
ボックス席（写真）など空いていれば予約できる！
私の場合は家からは遠すぎるので通えないのが残念。
自宅以外の勉強場所確保、難しい。