Form？
フォームとは?
ユーザーが情報を入力/選択するときに使用するhtmlタグです。
<form action=“url method=“POST”>
<input type="text" id="text” required/>
<input type="checkbox" id="check" > Check Box</input>
<input type="radio" value="yes" name=“radio Type”> Yes </input>
<input type="radio" value="no" name=“radio Type2”I> No </input>
<input type="submit”/>
</form>
Htmlのフォームは、上記コードのようにクライアントに送信するInputタグを包む形で作成されます。
フォームタグプロパティのactionは、データを受信して送信するurlアドレスを決定します。
methodはデータをGET、POST、PUTと同じ方式で送るか決めます。
フォームはタグ内にあるinputタグの情報を集め、actionに設定されたurlにメソッド方式でデータを送信します。
フォームの基本形態
有効性検査
フォームの有効性検査とは、サーバーにデータを提出する前に含めるべき情報が正しい形式であり、入力条件に合わせてうまく入力したかを確認する検査です。
例えば、パスワード入力時に英小文字、数字、特殊文字の含め8文字以上入力するようにするなどの検査です。
有効性検査が必要な理由
- 正しい形式で作成されたデータを取得するため
- ユーザーのデータを保護するため
- 悪意のあるユーザーから保護するため
有効性チェックは、クライアントブラウザまたはサーバーで検証されます。
クライアントブラウザで実行される有効性チェックをクライアント側有効性チェック、サーバ上で実行される有効性チェックをサーバ側有効性チェックといいます。
クライアント側の有効性検査方法は、html5 の有効性検査機能を使用するか、js を利用した有効性検査方法があります。
クライアント側の有効性チェック
クライアント側の有効性チェックは、クライアントブラウザで行われる有効性チェックです。
クライアント側の有効性検査は、ユーザーにより良いUI/UXを提供でき、サーバーの負担を減らするというメリットがあります。
しかし、クライアント側の有効性チェックを100%信頼できませんが、理由は次のとおりです。
- ユーザーがブラウザからJavaScriptをオフにする場合
- ページジャバスクリプトでエラーが発生した場合
- 悪意のあるユーザーがサイト以外のルートでデータを配信する場合
安全にユーザーのデータを検査するためにサーバー側の有効性を検査し、クライアント側の有効性検査はUX向上のために追加で使用することをお勧めします。
html5の有効性検査機能
JavaScriptに依存せずにユーザーデータを検証することができ、html要素の有効性検査属性を使用して実行することになります。
<input>タグのプロパティとして、次のような有効性検査機能を指定できます。
- Required:必須入力事項
- minlength / maxlength : 最小または最大文字数
- min / max : 数字の最小値、最大値
- タイプ : 入力するデータのタイプを指定し
- pattern:入力するデータが遵守しなければならない正規表現式
正規表現式
テキスト文字列文字の組み合わせを一致させることができるときに使用するパターンです。
CSS仮想クラス
検証結果は、入力要素のスタイルにも表示されます。 ブラウザは要素に:valid:invalid仮想クラスを追加します。
- :valid:ルールに合った値を入力した場合
- :invalid:ルールに合わない値を入力した場合
JavaScriptの有効性をチェック
Html5を使用して有効性検査が可能ですが、JavaScriptを使用して有効性検査を行うこともできます。
JSを活用して有効性を検査する理由は次のとおりです。
- 他のエラーメッセージを使用する場合
- デフォルトの提供フォームの有効性チェックをサポートしていない古いバージョンのブラウザをサポートする必要がある場合
- 細かいな有効性検査が必要なとき
JS有効性検査の重要な点はbuttonのタイプをsubmitとしないことです。
Discussion