HTML5フォームの検証とは何ですか？どのように使用しますか？-htmlチュートリアル-php.cn

HTML5フォームの検証とは何ですか？どのように使用しますか？

HTML5フォーム検証は、HTML5仕様に導入された機能であり、Web開発者がHTMLマークアップ内で入力フィールドのルールを直接指定できるようにします。これにより、フォームを送信する前にブラウザがユーザー入力を自動的に検証し、入力したデータが有効かどうかについてユーザーに即座にフィードバックを提供できます。

HTML5フォーム検証を使用するには、フォーム要素に特定の属性を追加します。一般的に使用される検証属性には次のものがあります。

必須：フォームを送信する前に、フィールドに記入する必要があることを指定します。
タイプ：予想されるデータのタイプ（たとえば、 email 、 url 、 number 、 dateなど）を指定するために使用でき、ブラウザはそれに応じて入力を検証します。
MINおよびMAX ：数値入力タイプで使用して、最小値と最大許容値を指定します。
パターン：入力が一致する必要がある正規表現を指定できます。

たとえば、検証付きの単純なHTMLフォームは次のようになる場合があります。

 <code class="html"><form> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="age">Age:</label> <input type="number" id="age" name="age" min="18" max="100" required> <label for="phone">Phone:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> <button type="submit">Submit</button> </form></code>

ログイン後にコピー

この例では、 emailフィールドは有効な電子メールアドレスである必要があり、 age 18〜100人でなければならず、 phone米国の電話番号の指定されたパターンと一致する必要があります。ユーザーが無効なデータでフォームを送信しようとすると、ブラウザにエラーメッセージが表示されます。

従来のJavaScriptメソッドよりもHTML5フォームの検証を使用することの利点は何ですか？

HTML5フォームの検証を使用すると、従来のJavaScriptメソッドよりもいくつかの利点があります。

削減コード：HTML5検証は、検証ルールを処理するためにJavaScriptを記述する必要がないため、コードを少なくすることで実装できます。これにより、HTMLがクリーナーになり、メンテナンスが容易になります。
即時フィードバック：HTML5検証は、ブラウザの組み込みエラーメッセージを介してユーザーに即時のフィードバックを提供します。これにより、フォームの提出前にユーザーにエラーを修正するようガイドすることでユーザーエクスペリエンスが向上します。
アクセシビリティ：HTML5検証属性は、必要なフィールドとデータ形式に関する情報を伝えるために支援技術で使用できる構造化されたデータを提供することにより、フォームのアクセシビリティを強化します。
パフォーマンス：ブラウザのネイティブ検証機能を活用することにより、JavaScriptから処理の一部をオフロードすると、特にモバイルデバイスでパフォーマンスが向上する可能性があります。
クロスブラウザーの一貫性：異なるブラウザーがHTML5検証を実装する方法にはいくつかのバリエーションがありますが、コア機能は最新のブラウザー全体で一貫しており、より予測可能なユーザーエクスペリエンスにつながります。
セキュリティ：ブラウザレベルで検証を実施することにより、悪意のある入力に対してセキュリティの追加レイヤーを追加しますが、サーバー側の検証はセキュリティのベストプラクティスとして使用する必要があります。

HTML5フォームの検証は、特定の要件を満たすようにカスタマイズできますか？

はい、HTML5フォームの検証は、いくつかの方法で特定の要件を満たすようにカスタマイズできます。

カスタムエラーメッセージ：JavaScriptのsetCustomValidity()メソッドを使用して、ブラウザが提供するデフォルトのエラーメッセージをオーバーライドできます。これにより、ユーザーにより詳細なまたはコンテキスト固有のフィードバックを提供できます。
```
 <code class="javascript">const emailInput = document.getElementById('email'); emailInput.addEventListener('input', function(event) { if (emailInput.validity.typeMismatch) { emailInput.setCustomValidity('Please enter a valid email address.'); } else { emailInput.setCustomValidity(''); } });</code>
```
ログイン後にコピー
カスタム検証ロジック： checkValidity()メソッドを使用して、 onsubmitなどのイベントリスナーを使用して、カスタム検証ロジックを追加できます。これにより、HTML5属性が提供できるものを超える複雑な検証ルールを実装できます。
```
 <code class="javascript">const form = document.getElementById('myForm'); form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false);</code>
```
ログイン後にコピー
スタイリング：フォームエレメントとエラーメッセージのスタイリングをカスタマイズして、サイトのデザインに一致させることができます。 CSSを使用して、無効なフィールドを強調し、エラーメッセージの外観を変更し、よりまとまりのあるユーザーインターフェイスを作成できます。
```
 <code class="css">.form-control:invalid { border-color: #dc3545; } .invalid-feedback { color: #dc3545; }</code>
```
ログイン後にコピー

HTML5属性とJavaScriptおよびCSSを組み合わせることにより、HTML5の組み込み機能を活用しながら、特定のニーズを満たすために検証を調整できます。

HTML5フォーム検証は、Webサイトでのユーザーエクスペリエンスをどのように強化しますか？

HTML5フォーム検証は、いくつかの方法でWebサイトでのユーザーエクスペリエンスを強化します。

即時フィードバック：ユーザーは、入力の妥当性に関する即時フィードバックを受け取ります。これにより、フォームを送信する前にエラーを理解して修正し、フラストレーションを軽減し、フォームに留まるプロセスの効率を改善するのに役立ちます。
フォームの提出エラーの削減：早期にエラーをキャッチすることにより、HTML5検証により、ユーザーが無効なデータを使用してフォームを送信する可能性が低下します。これにより、ユーザーとサーバーの両方の時間を節約できます。これは、フォームの提出物を拒否して再提出する必要があるため、時間を節約できます。
アクセシビリティの強化：HTML5検証属性は、フォームをよりアクセスしやすくします。支援技術は、必要なフィールドと予想されるデータの種類を読み取り、フォームの要件を理解する障害を持つユーザーを支援します。
デバイス全体の一貫性：HTML5検証は、さまざまなデバイスやブラウザで一貫して動作し、プラットフォームに関係なくユーザーに均一なエクスペリエンスを提供します。
教育価値：HTML5検証によって生成されたエラーメッセージは、入力の正しい形式でユーザーを教育することができます（「有効な電子メールアドレスを入力してください」）。
ページの読み込み時間の速度：追加のJavaScriptが検証を処理する必要性を減らすことにより、HTML5の検証は、モバイルユーザーやインターネット接続が遅いマシンユーザーにとって特に重要なページの読み込み時間の速度に貢献できます。