未分類

【HTML】フォーム作成時の確認事項

HTMLでフォームを作成するとき「何か忘れてないか?」を確認するためのチェックリストです。
動作するかではなく要素や属性が足りているかのチェックリストになりますので動作検証のための記載はありません。

オートコンプリート属性は設定されているか
名前や住所、クレジットカード情報などをブラウザが自動で補完(入力)してくれる機能のためのガイドです。
nameなどが適切であればブラウザがある程度自動で判断してくれますが、ブラウザにもよるので設定する方がいいでしょう。
どちらかというとnameの値や入力フォームの分割の仕方を決める際もautocompleteの値を参考にすると楽です。
ref: https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete

typeは適切に設定されているか
キーボード入力のものを全てtextにしていないでしょうか。
emailやtelなど便利なものが色々とあり、ただのtextとは違い形式のチェックやスマホのキーボードの出し分けを自動でしてくれます。
これを適切に設定するだけで色々なことが解決するので、どんなtypeがあるのか一度目を通しておくとよいでしょう。
ref: https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#input_types
あわせて、inputmodeやpatternも覚えておくと微調整ができるようになります。

必須の値はrequiredが設定されているか
requiredが設定されていると、入力されていない場合に送信されずにブラウザが用意したアラートが出ます。
必須の入力項目はどれかわかりやすく表示し、required属性を設定しておきましょう。
ref: https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/required
※ただし、これはあくまでユーザビリティのためのものです。サーバーサイドでの検証をしなくてよくなるわけではないので注意しましょう。
ref: https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#client-side_validation

labelは設定されているか
チェックボックスやラジオボタンの小さいところを押さないと反応しないようになっていませんか。
ラベルを設定して、説明文などを押しても反応するようにしてユーザーのストレスを減らしましょう。

初期値は適切に設定されているか
初期値設定はtypeによって異なりますが、value属性やcheckedは適切に設定されているでしょうか。

値の範囲は適切に設定されているか
数値型のmin,max,step、テキスト型のmaxlengthなど、あれば設定しておくとユーザーは操作しやすいです。
こちらもrequiredと同様、ユーザービリティのためのものであってサーバーサイドの検証は別途必要なので注意しましょう。

-未分類