Web フォームの設計では、入力検証はユーザーが有効なデータを送信したことを確認するための重要なリンクです。 HTML5 では、 <input>要素にmin属性とmax属性が導入され、フロントエンドでの数値入力の範囲を制限できるようになりました。 CSS3 はこの機能をさらに拡張し、開発者が:in-rangeおよび:out-of-range疑似クラスを通じて、事前定義された範囲内または範囲外の入力に対して視覚的なフィードバックを提供できるようにします。この記事では、これら 2 つの疑似クラスを使用して入力検証のユーザー エクスペリエンスを向上させる方法について詳しく説明します。
ユーザーがフォームに入力するとき、特定のフィールドは特定の数値範囲を満たす必要があります。たとえば、年齢を負の数にすることはできず、テストのスコアは 0 から 100 の間である必要があります。適切な範囲検証により、ユーザーの入力が有効かどうかが即座にわかります。
HTML5 の<input>要素はmin属性とmax属性をサポートしており、開発者は入力フィールドの最小値と最大値を定義できます。これらのプロパティをtype="number"またはtype="range"と組み合わせると、数値入力に境界を作成できます。
:in-range擬似クラス セレクターは、現在の値がminとmax属性で定義された範囲内にある入力フィールドを選択するために使用されます。
対照的に、 :out-of-range擬似クラス セレクターは、現在の値がminとmax属性で定義された範囲外にある入力フィールドを選択するために使用されます。
以下は、 :in-range疑似クラスと:out-of-range疑似クラスの使用方法を示す HTML と CSS の例です。
<フォーム>
<label for="age">年齢 (0 ～ 120):</label>
<input type="number" id="age" name="年齢" min="0" max="120">
<span class="error-message">無効な年齢</span>
<input type="submit" value="Submit">
</form> /* 有効な入力スタイル*/
入力:範囲内 {
境界線: 2 ピクセルの実線の緑色。
}
/* 無効な入力スタイル */
入力:範囲外 {
境界線: 2 ピクセルの赤一色。
}
/* エラーメッセージのスタイル*/
.error-message {
色: 赤;
表示: なし。
}
入力:範囲外 + .error-message {
表示: ブロック;
}有効な入力と無効な入力に異なる境界線の色や背景色を設定すると、入力が要件を満たしているかどうかをユーザーが視覚的に識別できるようになります。
:in-range疑似クラスと:out-of-range疑似クラスを使用する場合は、フォームの一貫性と使いやすさを維持するために、スタイルがデバイスや画面サイズにかかわらず同様に機能することを確認してください。
視覚的なスタイルに加えて、支援技術ユーザーのニーズも考慮する必要があります。たとえば、スクリーン リーダーに追加のコンテキストを提供するには、 aria-invalid="true"属性を使用します。
HTML5 のフォーム検証機能と組み合わせると、 :in-rangeおよび:out-of-range擬似クラスを:validおよび:invalid擬似クラスと一緒に使用して、フォーム検証のためのより豊富な視覚的フィードバックを提供できます。
:in-rangeおよび:out-of-range疑似クラスは、ほとんどの最新のブラウザでサポートされていますが、一部の古いブラウザでは認識されない場合があります。設計時にはこれを考慮する必要があります。
実際の Web アプリケーションでは、 :in-rangeおよび:out-of-range疑似クラスは、登録フォーム、ログイン フォーム、設定フォームなどのさまざまなシナリオで使用できます。
CSS 疑似クラスは静的な視覚的なフィードバックを提供できますが、CSS 疑似クラスを JavaScript と組み合わせることで、即時検証やユーザー入力としてのフィードバックなど、より動的なインタラクションを作成できます。
フォームをデザインするときは、明確なラベル、適度なコントラスト、適切なフィールド マーキングの使用など、アクセシビリティのベスト プラクティスに従ってください。
:in-range疑似クラスと:out-of-range疑似クラスは、開発者が入力検証のための視覚的なフィードバックを強化し、ユーザー エクスペリエンスを向上させるのに役立つ CSS の 2 つの強力なツールです。この記事の導入により、これら 2 つの疑似クラスの基本概念と使用法を理解し、それらを実際の Web フォーム設計に適用する方法を学ぶことができるはずです。優れたフォーム設計とは、機能を実装するだけでなく、明確で直感的で使いやすいインターフェイスを提供することも重要であることを忘れないでください。
:in-rangeおよび:out-of-range疑似クラスの使用をさらに検討することで、最新の Web アプリケーションのニーズを満たす美しく機能的なフォームを作成できます。この記事が、CSS を使用してフォームのデザインを改善する際の貴重なリソースになれば幸いです。
CSS の :in-range および :out-of-range 擬似クラスが入力検証の視覚的なフィードバックを強化する方法に関するこの記事はこれで終わりです。その他の関連 CSS :in-range および :out-of-range 擬似カテゴリのコンテンツについては、検索してください。 downcodes.com の以前の記事を参照するか、以下の関連記事を引き続き参照してください。今後も downcodes.com をサポートしていただければ幸いです。