button要素のtypeは送信か入力の消去かJavaScript操作かを先に決める

公開日：2016年5月16日執筆：佐藤

button要素 form要素

formの中で使うbutton要素には、typeを明示します。送信するbuttonはtype="submit"、入力を初期状態へ戻すbuttonはtype="reset"、JavaScriptで画面を開閉するだけのbuttonはtype="button"です。typeを省略すると送信buttonになるため、確認用のbuttonや住所検索のbuttonが、意図せずformを送信することがあります。

問い合わせformでは、送信は一度で終わる小さな動作ではありません。入力内容を検査し、確認画面へ進めるか、送信先へ渡すか、受信後に誰が読むかまで続きます。その入口になるbuttonの役割が曖昧だと、利用者は入力を失い、受ける側は意図しない内容を受け取ることになります。buttonの文言と色を決めた後ではなく、formの流れを決める段階でtypeを決めます。

HTML 5.1のForms仕様は、button要素のtypeについて、submitはformを送信し、resetはformをresetし、buttonは追加の動作を持たないと定義しています。typeを指定しない場合のdefaultはsubmitです。form ownerを持つbuttonがsubmit buttonである場合、押すとそのformを送信します。

buttonは見た目ではなく押した後の処理で分ける

青いbuttonが送信、灰色のbuttonが戻るといった見た目だけでは、typeは決まりません。利用者が押した直後に何をさせるかで決めます。送信buttonは、入力済みの値をformの送信処理へ渡すためのものです。reset buttonは、送信せずに値を初期状態へ戻すためのものです。button stateは、HTMLの既定動作を止めた状態で、JavaScriptなど別の処理を始めるためのものです。

buttonの目的	`type`	押したときの基本動作
問い合わせ内容を送る	`submit`	formを送信する
入力内容を初期状態へ戻す	`reset`	formの値をresetする
確認内容を開く、住所を検索する、入力欄を追加する	`button`	HTMLだけでは送信もresetもしない

たとえば、問い合わせformに「送信」「入力をやり直す」「会社名から住所を探す」の三つのbuttonを置く場合、三つとも同じbutton要素にできます。しかし、動きは同じではありません。住所検索をJavaScriptで動かすbuttonへtypeを書かなければ、検索処理と一緒にform送信が起きるおそれがあります。検索結果を表示しただけのつもりで確認画面へ進んだり、入力の途中でvalidationの表示が出たりすれば、利用者には故障と区別がつきません。

buttonの文字を「次へ」「確認」「送信」と変えることもありますが、文字だけで動作を決めてはいけません。「確認」は確認画面へ値を送る操作か、画面上の注意書きを開く操作かで必要なtypeが違います。「戻る」は前のpageを表示する操作か、入力値を初期状態へ戻す操作かで違います。画面上の文言、HTMLのtype、実際の処理を別々に書き出し、三つが同じ意味になっているかを確かめます。

<form action="/contact/confirm/" method="post">
  <label>会社名 <input name="company" type="text"></label>

  <button type="button">住所を探す</button>
  <button type="reset">入力をやり直す</button>
  <button type="submit">確認へ進む</button>
</form>

reset buttonは入力を失ってよい場面だけに置く

resetは、利用者が入力した値をformの初期状態へ戻します。問い合わせformの途中で押すと、長い相談内容や連絡先を入れ直すことになります。見た目を「取消」や「戻る」としても、実際には前のpageへ戻るbuttonにはなりません。確認画面を閉じるためのbuttonでもありません。

特に、相談内容のように書き直す負担が大きい欄では、resetを置く理由を先に考えます。入力を間違えたとき、利用者が必要とするのは、全項目を最初へ戻すことではなく、誤った一項目だけを直すことが多いからです。必須項目の表示、選択肢の初期値、住所検索で補った値も、resetを押したときにどうなるかを確認します。作った側が短時間で入力できるformでも、初めて使う人にとっては復旧できない操作になり得ます。

入力を一部だけ消す、前の画面へ戻る、確認画面を閉じるといった操作には、resetを使わないことがあります。何を消すか、送信前の入力を残すか、browserの戻る操作へ任せるかを別に決めます。formにreset buttonを置く場合は、実際の入力を入れた状態で押し、消える範囲を確認します。初期値が入った選択欄や説明欄が、利用者の想定と違う状態へ戻らないかも見る必要があります。

JavaScript用buttonは送信buttonにしない

formの中にJavaScript用のbuttonを置くときは、type="button"を書きます。これはJavaScriptを必ず動かすという指定ではありません。HTMLだけの既定動作として送信やresetをさせないための指定です。住所検索、郵便番号からの補完、入力欄の追加、利用規約の表示、確認文の開閉など、画面内で完結する操作は、送信と別に扱います。

JavaScriptが動かなかった場合も考えます。住所検索buttonを押しても住所が入らないなら、利用者が手で入力できるかを確認します。補足説明を開くbuttonなら、説明を読めないまま送信できない構成になっていないかを見ます。type="button"は意図しない送信を止めますが、画面操作そのものを正しくするものではありません。JavaScriptの有無にかかわらず、送信に必要な情報と送信の入口を残します。

formの流れを入力してから確かめる

buttonのtypeは、HTMLを読んだだけで終わらせません。test用の入力を用意し、利用者がたどる順に操作します。空欄を残した場合、すべてを入力した場合、途中で検索buttonを押した場合、やり直しbuttonを押した場合を分けて見ます。入力の途中でformが送信されないことと、送信してよい時点では確実に次の処理へ進むことを、両方確かめます。

form内のbutton要素をすべて数える。
それぞれを送信、入力の消去、画面操作へ分ける。
typeが省略されているbuttonを探す。
JavaScript用buttonへtype="button"を指定する。
送信buttonにはtype="submit"を指定し、送信先と確認画面の流れを確認する。
入力値を入れた状態でreset buttonを押し、消える範囲が画面の案内と一致するかを見る。
各input欄に値を入れ、Enter keyを押したときの画面も確認する。

確認する人と直す人が違う場合は、buttonごとに目的と確認結果を残します。「住所検索は送信しない」「送信は確認画面へ進む」「入力をやり直すと内容欄も消える」といった短い記録があれば、後の修正でtypeを外したり、文言だけ変えたりする失敗を減らせます。外部serviceやpluginがformを出力している場合も、画面上のbutton文言だけで判断しません。出力されたHTMLと、押した後のrequestを確認します。実装を外部へ任せても、送信してよい内容、やり直しで失ってよい入力、確認画面へ進む条件はsite側で決めます。

送信できることだけを公開前の合格にしないことです。送信してはいけない操作が送信にならないか、消してはいけない入力が消えないか、問い合わせを受ける側が必要な内容を確認できるかまで、同じformの検査に含めます。buttonのtypeは短い属性ですが、問い合わせの入口を誰がどう使えるかに関わります。