HTMLフォームと制約検証の完全なガイド

この記事では、HTMLフォームフィールドとHTML5が提供する検証オプションについて説明します。また、CSSとJavaScriptを使用してこれらをどのように強化できるかについても説明します。

キーテイクアウト

HTML5は、多くの検証プロセスを自動化する新しい入力タイプと属性を導入してフォーム検証を強化し、広範なJavaScriptの必要性を減らします。 HTML5での制約検証により、ブラウザはフォームの提出前に指定されたルールに対してユーザー入力を自動的に確認し、ユーザーエクスペリエンスとデータの整合性を高めます。 クライアント側の検証は、一般的なエラーをキャッチするのに役立ちますが、データのセキュリティと整合性を確保するためにサーバー側の検証を補完する必要があります。

カスタムJavaScript入力は、アクセシビリティを複雑にし、ネイティブブラウザ関数と競合する可能性があるため、可能な場合は避ける必要があります。
• CSSは、検証状態に基づいて入力フィールドをスタイリングするために使用できます。
HTML5の制約検証APIは、2つのフィールドや非同期チェックの比較、フォーム機能とユーザーの相互作用の強化など、HTMLだけが処理できないカスタム検証シナリオを有効にします。
制約検証とは？
すべてのフォームフィールドには目的があります。そして、この目的は、多くの場合、禁忌によって支配されます。または、各フォームフィールドに入力すべきではないものを管理する規則です。たとえば、電子メールフィールドには有効な電子メールアドレスが必要です。パスワードフィールドには、特定の種類の文字が必要になり、必要な数の文字が最小限に抑えられる場合があります。テキストフィールドには、入力できる文字の数に制限がある場合があります。
• 最新のブラウザは、これらの制約がユーザーによって観察されていることを確認する機能を備えており、それらのルールが侵害されたときに警告することができます。これは、contstraint検証として知られています。
• クライアント側vsサーバー側の検証
• 言語の初期に書かれたJavaScriptコードの大部分は、クライアント側のフォーム検証を処理しました。今日でも、開発者はフィールド値を確認するために関数を書くのにかなりの時間を費やしています。
これは現代のブラウザでまだ必要ですか？おそらく

ではありません。ほとんどの場合、それは本当にあなたがやろうとしていることに依存します。

しかし、最初に、ここに大きな警告メッセージがあります：

クライアント側の検証は、アプリが時間を無駄にしてデータをサーバーに送信する前に、一般的なデータエントリエラーを防ぐことができる重要なものです。サーバー側の検証に代わるものではありません！

常にデータサーバー側を消毒します。すべてのリクエストがブラウザから来るわけではありません。それがそうであっても、ブラウザがデータを検証した保証はありません。ブラウザの開発者ツールを開く方法を知っている人なら誰でも、愛情を込めて作成されたHTMLとJavaScriptをバイパスすることもできます。

html5入力フィールド

htmlオファー：

マルチラインテキストボックスの
オプションのドロップダウンリストの
• for…ボタン

ただし、を使用します

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

タイプ属性はコントロールタイプを設定し、オプションの大きな選択肢があります：

タイプ 説明 ボタン デフォルトの動作がないボタン チェックボックス チェック/ティックボックス 色 カラーピッカー 日付 年、月、日のデートピッカー DateTime-Local 日付と時刻のピッカー メール 電子メールエントリフィールド ファイル ファイルピッカー 隠れた 隠されたフィールド 画像 SRC属性によって定義された画像を表示するボタン 月 月と年のピッカー 番号 番号エントリフィールド パスワード 不明瞭なテキストを備えたパスワードエントリフィールド 無線 ラジオボタン 範囲 スライダーコントロール リセット すべてのフォーム入力をデフォルト値にリセットするボタン（ただし、これを使用しないでください。 検索 検索エントリフィールド 提出する フォーム送信ボタン 電話 電話番号の入力フィールド 文章 テキスト入力フィールド 時間 タイムゾーンのないタイムピッカー URL URLエントリフィールド 週 1週間の数と年のピッカー タイプ属性を省略した場合、またはオプションをサポートしていない場合、ブラウザはテキストに戻ります。最新のブラウザはすべてのタイプに適切にサポートされていますが、古いブラウザにはまだテキストエントリフィールドが表示されます。

その他の便利な属性には以下が含まれます

属性

説明 受け入れる ファイルアップロードタイプ alt 画像タイプの代替テキスト オートコンプリート フィールドの自動完了のヒント オートフォーカス ページロードにフォーカスフィールド 捕獲 メディアキャプチャ入力方法 チェックしました チェックボックス/ラジオがチェックされます 無効 コントロールを無効にします（検証されることはありません。 形状 このIDを使用してフォームに関連付けます 形式 送信および画像ボタンに送信するためのURL inputMode データ型のヒント リスト 入力タイプと同様に、HTML5は読み取り専用出力を提供します：

• 出力：計算またはユーザーアクションのテキスト結果
• 進捗状況：値と最大属性を備えた進捗バー
• メーター：値、min、max、low、high、および最適な属性に設定された値に応じて、グリーン、アンバー、および赤の間を変えることができるスケール。

入力ラベル

フィールドには、関連するが必要です。これは要素を包み込むことができます：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

または属性を使用して、フィールドのIDをラベルにリンクします：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

ラベルはアクセシビリティにとって重要です。プレースホルダーを使用して画面スペースを節約するフォームに遭遇した可能性があります：

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

ユーザーが何かを入力すると、プレースホルダーテキストは消えます - 単一のスペースでさえも。ユーザーがフィールドが望んでいたものを強制的に覚えているよりも、ラベルを表示する方が良いです！

入力動作

フィールドタイプと制約属性は、ブラウザの入力動作を変更します。たとえば、数値入力には、モバイルデバイスの数値キーボードが表示されます。フィールドには、スピナーとキーボードのアップ/ダウンカーソルプレスが表示される場合があります。

ほとんどのフィールドタイプは明らかですが、例外があります。たとえば、クレジットカードは数値ですが、インクリメント/デクリメントスピナーは役に立たず、16桁の数字を入力すると上下に押し下げるのは簡単すぎます。標準のテキストタイプを使用する方が良いが、inputMode属性を適切なキーボードを表示する数値に設定することをお勧めします。 AutoComplete = "CC-Number"の設定も、事前に構成または以前に入力されたカード番号を提案します。

正しいフィールドタイプとAutoCorRectを使用すると、JavaScriptで達成するのが難しい利点が提供されます。たとえば、一部のモバイルブラウザーは

です

カメラを使用してカードをスキャンしてクレジットカードの詳細をインポート

sms
• によって送信された1回限りのコードをインポートします
• 自動検証

ブラウザは、タイプ、min、max、step、minlength、maxlength、パターン、および必要な属性によって定義された制約を入力値に付着させます。たとえば、

空の値を送信しようとすると、フォームの提出が防止され、次のメッセージがChromeに表示されます。

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

スピナーは、1〜100の範囲外の値を許可しません。数字ではない文字列を入力すると、同様の検証メッセージが表示されます。

JavaScriptの単一行なし ：

によってブラウザの検証を停止できます

要素

にNovalidate属性を追加します

フォームバリデート属性を送信ボタンまたは画像に追加

カスタムJavaScript入力の作成
新しいJavaScriptベースの日付エントリコンポーネントを書いている場合は、キーボードから立ち寄って離れてください！

カスタム入力コントロールを書くことは困難です。マウス、キーボード、タッチ、音声、アクセシビリティ、画面寸法、およびJavaScriptが失敗したときに何が起こるかを考慮する必要があります。また、別のユーザーエクスペリエンスを作成しています。おそらく、あなたのコントロールは、デスクトップ、iOS、およびAndroidの標準日付ピッカーよりも優れていますが、なじみのないUIは一部のユーザーを混乱させます。

開発者がJavaScriptベースの入力を作成することを選択する主な理由は3つあります。

1。標準的なコントロールをスタイリングするのは困難です

CSSスタイリングは限られており、多くの場合、ラベルの::前の:: :: :: fohindの後の入力をオーバーレイするなど、ハッキングが必要です。状況は改善されていますが、機能よりもフォームに優先順位を付けるデザインに疑問を投げかけています。

2。最新のタイプは、古いブラウザではサポートされていません

本質的に、インターネットエクスプローラーをコーディングしています。 IEユーザーはデートピッカーを取得しませんが、Yyyy-MM-DD形式で日付を入力できます。クライアントが主張する場合は、IEのみでポリフィルをロードします。最新のブラウザに負担をかける必要はありません

3。以前に実装されたことのない新しい入力タイプが必要です
これらの状況はまれですが、常に適切なHTML5フィールドから始めます。彼らは速く、スクリプトがロードされる前でさえ動作します。必要に応じてフィールドを徐々に強化できます。たとえば、JavaScriptを散布することで、カレンダーイベントの終了日が開始日以降に発生するようにします。 要約： CSS検証スタイリング

次の擬似クラスを適用してフィールドを入力して、現在の状態に応じてスタイルを整えることができます。

selector

説明 ：集中 フォーカスのフィールド ：フォーカスウィチン 要素にはフォーカスのあるフィールドが含まれています（はい、それは親セレクターです！） ：フォーカス可視 キーボードナビゲーションのために要素がフォーカスを持っているので、フォーカスリングまたはより明白なスタイリングが必要です ：必須 必要な属性を持つフィールド ：オプション 必要な属性のないフィールド ：有効 検証に合格したフィールド ：無効 検証に合格していないフィールド ：user-valid ユーザーが対話した後に検証に合格したフィールド（Firefoxのみ） ：user-invalid ユーザーが対話した後に検証に合格していないフィールド（Firefoxのみ） ：範囲内 値は、数または範囲の入力の範囲内です ：範囲外 値は、数または範囲の入力の範囲外です ：無効 無効な属性を持つフィールド ：有効にします 無効な属性のないフィールド ：読み取り専用 読み取り専用属性を持つフィールド ：read-write： 読み取り専用属性のないフィールド ：チェック チェックされたチェックボックスまたはラジオボタン ：不定 すべてのラジオボタンがチェックされていないときなど、不確定なチェックボックスまたはラジオ状態 ：デフォルト デフォルトの送信ボタンまたは画像

::プレースホルダー擬似要素で入力のプレースホルダーテキストをスタイリングできます：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

上記のセレクターは同じ特異性を持っているため、順序が重要になる可能性があります。この例を考えてみましょう：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

無効な入力には赤いテキストがありますが、無効な属性を持つ入力にのみ適用されます。 ブラウザは、ページの読み込みに検証スタイルを適用します。たとえば、次のコードでは、すべての無効なフィールドに赤い境界線が与えられます。

ユーザーは、フォームと対話する前に、困難な赤いボックスのセットに直面します。最初の送信後または値が変更された後に検証エラーを表示すると、より良い体験が得られます。そこで、JavaScriptが介入します…
javaScriptおよび制約検証API

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

制約検証APIは、標準のHTMLフィールドチェックを強化できるフォームカスタマイズオプションを提供します。できます：

ユーザーがフィールドと対話するか、フォームを提出するまで、

検証を停止します
カスタムスタイリングを使用したエラーメッセージを表示
• HTMLだけでは不可能なカスタム検証を提供します。これは、2つの入力を比較する必要がある場合に必要です。たとえば、電子メールアドレスや電話番号を入力した場合、「新しい」と「確認」パスワードフィールドが同じ値を確認するか、次々と日付が来ることを確認します。 >
• フォーム検証
• APIを使用する前に、フォームのNovalidateプロパティをtrueに設定して、コードをデフォルトの検証とエラーメッセージを無効にする必要があります（Novalidate属性を追加するのと同じ）：

イベントハンドラーを追加できます。これは、フォームが提出されたときなどです。

ハンドラーは、すべてのフォームの入力が有効である場合にtrueを返すCheckAlivity（）またはReportAlidivity（）メソッドを使用してフォーム全体を有効にすることができます。 （違いは、CheckVality（）が入力が制約検証の対象かどうかをチェックすることです。）

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Mozilla docs説明：

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

無効なイベントもすべての無効なフィールドでトリガーされます。これはバブルではありません：ハンドラーは、それを使用するすべてのコントロールに追加する必要があります。

有効なフォームには、さらに検証チェックが発生する可能性があります。同様に、無効なフォームに無効なフィールドが強調表示される可能性があります

フィールド検証

個々のフィールドには、次の制約検証プロパティがあります

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

willvalidate：要素が制約検証の候補である場合、trueを返します。
validationmessage：検証メッセージ。フィールドが有効な場合、これは空の文字列になります。
valitity：有効設定オブジェクト。これには、フィールドが有効な場合に有効なプロパティセットが真実です。それが間違っている場合、次のプロパティの1つ以上が真実になります：

culidityState 説明 .badinput ブラウザは入力を理解できません .Customerror カスタム妥当性メッセージが設定されています .patternmismatch 値は、指定されたパターン属性と一致しません .RangeOverFlow 値は最大属性よりも大きい .RangeUnderFlow 値はMIN属性よりも少ない .StepMismatch 値は、ステップ属性ルールに適合しません .toolong 文字列の長さは、最大属性よりも大きくなります .tooshort 文字列の長さは、minlength属性よりも小さくなります .typemismatch 値は有効な電子メールやURLではありません .ValueEmissing 必要な値は空です

個々のフィールドには、次の制約検証方法があります

setCustomValidity（メッセージ）：無効なフィールドにエラーメッセージを設定します。フィールドが有効である場合、またはフィールドが永久に無効なままになる場合、空の文字列を渡す必要があります。
• checkalivity（）：入力が有効な場合にtrueを返します。 Valitity.Validプロパティは同じことを行いますが、CheckValidity（）は、フィールド上の無効なイベントもトリガーします。
• validateForm（）ハンドラー関数はすべてのフィールドをループし、必要に応じてその親要素に無効なクラスを適用することができます。

HTMLが電子メールフィールドを定義したと仮定します：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

電子メールが指定されていないか無効である場合、スクリプトは

に無効なクラスを適用します。 CSSは、フォームの送信時に検証メッセージを表示または非表示にできます。

カスタムフォームの作成

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

の作成

次のデモンストレーションは、ユーザー名と電子メールアドレス、電話番号、またはその両方を必要とする連絡先フォームの例を示しています。

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

ペンを参照してください SitePointによる制約検証API例（@SitePoint） Codepenで。

Formvalidateという名前の汎用フォーム検証クラスを使用して実装されています。オブジェクトをインスタンス化すると、フォーム要素が渡されます。オプションの2番目のパラメーターを設定できます：

ユーザーが対話するときに各フィールドを検証するのに忠実です

false（デフォルト）最初の送信後にすべてのフィールドを検証する（その後、フィールドレベルの検証が発生します）

• an.AddCustom（field、func）メソッドは、カスタム検証関数を定義します。次のコードは、電子メールまたは電話フィールドが有効であることを保証します（どちらも必要な属性もありません）：
formvalidateオブジェクトは、次の両方を監視します
• フォーカスイベント。個々のフィールドを確認します
• フォームにイベントを送信し、すべてのフィールドを確認します
両方とも.validatefield（フィールド）メソッドを呼び出します。これは、フィールドが標準制約検証を渡すかどうかをチェックします。そうすると、そのフィールドに割り当てられたカスタム検証関数は順番に実行されます。フィールドが有効になるためには、すべてが真実である必要があります。
無効なフィールドには、CSSを使用して赤いヘルプメッセージを表示するフィールドの親要素に無効なクラスが適用されます。

最後に、フォーム全体が有効である場合、オブジェクトはカスタム送信関数を呼び出します：

代わりに、標準のaddEventListenerを使用してフォームの送信イベントを処理することができます。FormValidateは、フォームが無効である場合にさらにハンドラーの実行を防ぐためです。

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

form finesse

フォームはすべてのWebアプリケーションの基礎であり、開発者はユーザー入力の操作にかなりの時間を費やしています。制約検証は十分にサポートされています：ブラウザはほとんどのチェックを処理し、適切な入力オプションを表示できます。

推奨事項：

可能な場合は標準のHTML入力タイプを使用します。 Min、Max、Step、Minlength、MaxLength、Pattern、required、inputMode、およびAutocomplete属性を必要に応じて設定します。

必要に応じて、少しJavaScriptを使用して、カスタム検証とメッセージを有効にします。 より複雑なフィールドの場合、標準入力を徐々に強化します

最後に：
• インターネットエクスプローラーを忘れてください！
クライアントが主にユーザーでない限り、独自のフォールバック検証関数を実装する必要はありません。すべてのHTML5入力フィールドはIEで動作しますが、より多くのユーザーの努力が必要になる場合があります。 （たとえば、IEは無効な電子メールアドレスを入力したときに検出しません。）それでもサーバー上のデータを検証する必要があるため、IEエラーチェックの基礎として使用することを検討してください。 HTMLフォームと制約検証に関するよくある質問（FAQ）
HTMLフォーム検証の重要性は何ですか？
• HTMLフォーム検証は、Web開発の重要な側面です。ユーザーがフォームに入力したデータが、サーバーに送信される前に特定の基準を満たすことを保証します。これは、データの整合性を維持するだけでなく、入力されたデータの正確性に関する即時フィードバックを提供することにより、ユーザーエクスペリエンスを向上させます。フォーム検証がなければ、データの破損、セキュリティ侵害、システムのクラッシュなどのさまざまな問題につながる可能性のある、誤った、不完全、または悪意のあるデータを受信するリスクがあります。

  HTML5はフォーム検証を改善するにはどうすればよいですか？

  HTML5は、フォーム検証をより簡単かつ効率的にするいくつかの新しいフォーム要素と属性を導入します。たとえば、電子メール、URL、番号などの新しい入力タイプを提供し、タイプに基づいて入力データを自動的に検証します。また、入力データのさまざまな制約を指定できるように、必要な、パターン、Min/MAXなどの新しい属性を導入します。さらに、HTML5は、JavaScriptを使用してカスタム検証を実行できるようにするビルトイン検証APIを提供します。一人で。 HTML5は、入力データのさまざまな制約を指定できるいくつかの新しい入力タイプと属性を提供します。たとえば、必要な属性を使用してフィールドを必須にすること、パターン属性を特定するためのパターン属性、およびMIN/MAX属性を強制して、数値入力の範囲を設定できます。ただし、より複雑な検証を行うには、JavaScriptを使用する必要がある場合があります。html5で非同期検証を実行するにはどうすればよいですか？

  HTML5は、非同期検証をボックスからサポートしません。ただし、JavaScriptを使用してこれを実現できます。 Ajaxリクエストなどの非同期操作を実行し、結果に基づいてカスタム有効性メッセージを設定するカスタム検証関数を記述できます。 Fieldsの入力/変更イベントまたはフォームの送信イベントに応じてこの関数を呼び出すことができます。

以上がHTMLフォームと制約検証の完全なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。