はじめに
自分用のメモです。参考程度に。
〇フォーム値のクリア処理実装について
フォームの入力値のクリア処理を行いたいと思い、「type="reset"」でできるということで実装しました。しかし、「type="reset"」の挙動を正しく理解できておらず結果として修正することになりました。
結論
フォーム入力値のクリア処理は、「type="reset"」を使うのではなく、別途クリア処理を自分で実装しよう！
製作物
その際、作成していたフォームは以下のような構造でした。
入力画面→確認画面→送信画面 （確認画面から入力画面に戻る際は、入力値をフォームに反映）
確認画面から入力画面に戻った際に、「type="reset"」で実装したクリア処理を行うとフォームの値がクリアされませんでした。
原因
「type="reset"」は、「HTMLが読み込まれた段階での値に戻す」という仕様であった。
そのため、確認画面から入力画面に戻る際、入力値を初期値として反映させていたためフォーム値が空にならなかった。
対策
フォームの入力値を空にする処理を別途実装する。
また、実装の際はなんとなく使うのではなく、仕様について調べてから取り組む。
例）js側で、クリア処理を実装している場合
<button type="button" onclick="clearForm()">クリア</button>
〇送信処理について
フォームの送信ボタンになにげなく「type="submit"」を使っていました。しかし簡単に送信ボタンが実装できる反面、Enterボタンを押すと送信してしまう。
→誤送信につながるためあまりよくない...。
そういったこともあり、現場では「type="submit"」を使わない。
対策
送信処理を別途実装し、送信ボタンがクリックされたときに実装した送信処理を行う。
例）js側で、送信処理を実装している場合
<button type="button" onclick="submit()">送信する</button>
おまけ
現場によるのかはわからないが、inputタグは基本使わずbuttonタグを使うという話を聞いた。
おわりに
今まで特に何も疑わず実装していたものが、実はあまりよくなかったということを学んだ。
関数など使う際、なんとなく使わず仕様についてある程度理解してから使うよう心掛ける。