HTML5検証

インタラクティブなWebサイトやアプリケーションは、ユーザーとのコミュニケーションを可能にし、ユーザーとの円滑な取引を確保するために必要なデータを受け取ることができるフォームなしでは想像できません。 UXデザインパターンを適切に選択することで、フォームの使いやすさを改善できます。 また、HTML5には検証を制限する独自のメカニズムがあり、フロントエンドへの入力エラーを直接キャッチできます。



入力の検証には主にセキュリティがあります。 セキュリティに関して言えば、これは悪意のあるコンテンツのインジェクションを意図的であろうと偶然であろうと防ぐ必要があることを意味します。

HTML5検証

HTML5以前は、フロントエンド開発者はJavaScriptを使用したユーザー入力の検証に制限がありました。 退屈でエラーが発生しやすいプロセスでした。 クライアント側の検証を改善するために、HTML5では、最新のブラウザーで機能し、ユーザー入力を検証する制約チェックアルゴリズムを導入しました。



HTML5の制約チェック機能により、JavaScriptを使用せず、HTML5のみを使用して、すべての標準的なクライアント側の入力検証タスクを実行できます。



HTML5より前にすでに存在していた入力データのタイプ（テキスト、パスワード、送信、リセット、ラジオ、チェックボックス、ボタン、非表示）に加えて、次のセマンティックHTML5タイプを使用することもできます： email、tel、url、number、time、date、日時、日時ローカル、月、週、範囲、検索、色 。



古いブラウザではHTML5入力タイプを安全に使用できます。これは、HTML5入力タイプをサポートしていないブラウザのフィールドのように動作するためです。

検証用の属性の例

検証に次のセマンティック属性を使用することは非常に便利であり、思っている以上に役立つ場合があります。



1）必須

必須は、HTML検証で最も有名な属性です。 意味がありません。 この属性を使用するタグだけを空にしないでください。

<input type="text" name="text" class=”mytext” required>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の入力で使用できます： url、email、text、password、date、month、week、tel、search、select、textarea、file、checkbox、time、number たとえば、ユーザーは入力フィールドに値を入力するのを忘れることがあります。 この場合、このフィールドが正しく入力されるまで、エラーメッセージが表示されます。 したがって、必要なフィールドを常に視覚的にユーザーに示すことが重要です。



2）maxlength

この属性を使用すると、テキスト入力フィールドの入力テキストの最大長を設定できます。 Maxlengthは、textarea、password、url、tel、text、およびsearchの入力で使用できます。



このテキストエリアでは、文字数制限は最大350です。

 <textarea name="message" id="message" cols="40" rows="6" maxlength="350"></textarea>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Maxlengthはエラーを表示しませんが、ブラウザーはユーザーが指定された文字数を超えて入力することを許可しません。 良い例は、特定の文字数を超えてはならない電話番号のtel-poleタグ、またはユーザーが特定の長さを超えるメッセージを書かないようにするフィードバックフォームです。



3）最大、最小

minおよびmax属性は、最小数と最大数の間の範囲を示すのに役立ちます。 これらの属性は、 日付、時刻、週、範囲、数値、および月の入力で使用できます。 次の例では、18歳から65歳までの年齢の最小と最大の差を確認できます。

 <input type="age" name="age" min="18" max="65">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ユーザーが17歳より前または66歳より後に年齢を入力すると、この要求はサーバーに送信されないという事実にもかかわらず、エラーメッセージを受け取ります。



4）ステップ

step属性は、数値間隔に使用できます。 次の例には、最小年と最大年を指定する入力番号がありますが、 step =” 4”を追加します。 これは、変更のたびに、値が4年単位で変更されることを意味します。

 <input type="number" name="leapyear" min="1972" max="2016" step="4">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ユーザーは入力フィールドに値を手動で入力することもできますが、この場合、制限を満たさない場合は、ブラウザーにエラーメッセージが表示されます。



5）パターン

パターン属性は、正規表現を使用してこのフィールドを検証します。 正規表現は、特定のパターンを形成する事前定義された文字のセットです。 これを使用して、パターンに続く文字列を検索するか、特定の形式、特定のパターンを提供できます。



次の例では、少なくとも8文字で、少なくとも1つの文字と1つの数字を含むパスワードを入力する必要があります。

 <input type="password" name="password" required pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

この記事では、ブラウザーが提供するアルゴリズムを使用して、HTML5のフォームと制約をチェックする方法を検討しました。 通常、JavaScriptまたはPHPを使用してこれを実行できますが、最初に、データベースまたは外部のスクリプトへのアクセスを最適化するために、HTML5を使用できます。