HTML と CSS_html/css_WEB-ITnose を使用したフォーム検証のユーザー エクスペリエンスの向上

フォーム検証を実現するには HTML 属性のみを使用できます。シンプルなユーザー エクスペリエンスを実現するには CSS セレクターを使用できます。ただし、より適切に機能させるには、いくつかの CSS トリックを使用する必要があります。

ラベルにプレースホルダー効果をシミュレートする

まず、実際の 要素を使用する必要があります。 単一のフォームは、UX の考慮事項の失敗につながります。プレースホルダーは、「City」というラベルの付いたフィールド内の「Tulsa」プレースホルダーなど、フォームへの有効な入力の提案です。

ここで、フォームが短く、明らかなモード (登録やログインなど) がある場合は、ビジュアル プレースホルダー モードを使用できますが、代わりに実際のラベルを使用できることを表現したいと思います。

以下に示すようにフォーム構造を作成します...

HTML

<form action="#0" method="post">    <div>        <input type="text" id="first_name" name="first_name">        <label for="first_name">First Name</label>    </div>    <!-- ... ---></form>

配置コンテキストとして div を使用し、ラベルをフォーム内に直接配置します。

SCSS

form {    max-width: 450px;    // positioning context    > div {        position: relative;        // Looks like placeholder        > label {            opacity: 0.3;            position: absolute;            top: 22px;            left: 20px;        }    }}

すべてのセマンティクスがすでに接続されているため、カーソルで何もする必要はありません。ラベルが配置されている領域をクリックすると、入力がアクティブになります。入力をクリックした場合にもアクティブになります。どちらも正しいです。

秘訣は、入力を最初に置くことです (意味的に実行可能)。そうすれば、フォーカスが当たったときにラベルを非表示にできます:

SCSS

form {    /* ... */    > div {        > input[type="text"],        > input[type="email"],        > input[type="password"] {            &:focus {                & + label {                    opacity: 0;                }            }        }    }}

入力ボックスが必須であることを確認してください

おそらく、フォームの最も単純な検証は次のとおりです。必須属性を使用するには 要件 このフィールドは必須です。ブラウザがエラーをキャッチするのにこれ以上早い方法はありません。

<input required type="text" id="first_name" name="first_name">

は有効な入力値を表します

フィールドが正しく入力されたことをユーザーに知らせます。ブラウザは、:valid CSS セレクターを使用してこの情報を渡すことができます:

SCSS

form {    > input[type="text"],    > input[type="email"],    > input[type="password"] {        // show success!        &:valid {            background: url(images/check.svg);            background-size: 20px;            background-repeat: no-repeat;            background-position: 20px 20px;            // continue to hide the label            & + label {                opacity: 0;            }        }    }}

この場合、:valid は必要な条件が満たされていることを確認しますが、このセレクターは入力タイプの検証にも有効です。役に立つ。

検証タイプに関するリマインダーを表示する

入力された値が電子メールや番号などの指定されたタイプであることを要求することもできます。これに関連するいくつかの例を次に示します。

<input type="email" id="email" name="email" required>

これは必須の形式であり、有効な電子メール アドレスである必要があります。このようなユーザー エクスペリエンスを見てみましょう:

• フォーカスを取得するときにリクエストをユーザーに通知します
• それ以外の場合は、この入力領域が有効な値を取得しないことをユーザーに通知します

しかし... プロンプトはありません入力が空の場合。つまり、これは無効な状態ではありません。それはただ迷惑なだけであり、不必要に悪影響を及ぼします。これを行うには、入力が空かどうかを知る必要があります。

入力に値があるかどうかを確認します

使用したいのは :valid と :invalid ですが、:invalid を使用する場合、入力領域に値があるときに銃をジャンプして使用したくありません。

入力が空かどうかを判断する CSS セレクターはありますか?全くない！ :empty が機能するのではないかと想像するかもしれませんが、実際は機能しません。 :empty セレクターは、コンテナー要素に

などのコンテンツがあるかどうかを照合するために使用されます。入力はコンテンツのない要素です。

このトリックは、入力フィールドの後に次のプレースホルダー値があることを確認することです:

CSS

input:not(:placeholder-shown) {}

この例ではプレースホルダーを使用していませんが、使用されているスペースが 1 つあります:

HTML

<input placeholder=" ">

:placeholder -ここで使用するのに最適です。これは、現在の入力に値があるかどうかを検出する秘密のセレクターです。

現在、Firefox および IE ブラウザーはこのセレクターをサポートしていません。これはナビゲートするのが最も難しい領域です。新しい機能の登場により、@supports は救世主のようなものですが...

うわー

@supports はセレクターでは使用できず、キーと値のペア (@supports(display:flex) など) のみで使用できます

JavaScript 検出を使用してくださいプレースホルダーのサポートは非​​常に簡単です:

JavaScript

/* This doesn't work */@supports (input:placeholder-shown) {    input:not(:placeholder-shown) {    }}

しかし、これを検出するのは簡単な方法ではありません: placeholder-shown。したがって...ブラウザでのサポートが改善されるまで待つ必要があるかもしれません。

仮説が支持されたと仮定して、次は何を考えますか? ? ?

SCSS

var i = document.createElement('input');if ('placeholder' in i) {}

より強力な認証を作成する

required または type="email" (同様) だけでなく、クライアントで認証の長さを制限することもできます (例: 最大パスワード長または最短パスワード長)。定期的な制限。

関連記事はこちらです。必要なパスワード要件は次のとおりです:

少なくとも 6 文字
• 少なくとも 1 つの大きな筆記文字

少なくとも 1 つの補助文字

少なくとも 1 つの数字

は、次の例を参照できます。

Html

デモ

デモ

IE と Firefox のサポートが限られているため、ここでは :placeholder-shon を使用しませんでした。これはほんの一例です。ここで自分に合ったものを選択できます。 Codepen の Chris Coyier (@chriscoyier) による HTML5 と CSS3 を使用したこのフォーム検証を参照できます。 🎜 🎜 🎜