【CSS】便利でユーザーにもわかりやすいフォーム作成に役立つ擬似要素と擬似クラス

Webサイトでは、「お問い合わせフォーム」をよく見かけますね。

本日は、このフォームの作成に役立つ擬似クラスをご紹介したいと思います。

明らかな誤りを防ぐ【:valid / :invalid】

フォームには、様々な内容を入力してもらうことになりますが、その際に明らかな誤りをユーザーに知らせることに役立つのが擬似クラス「:valid / :invalid」です。

試しに以下のメールアドレス欄に、【「＠」を含まない文字】や【平仮名 / 漢字】を入力してみてください。
また、正しいメールアドレスも入力してみてください。

See the Pen :valid / :invalid by spiqa design (@spiqa_design) on CodePen.

※上記のメールアドレスの入力フォームには、「type=”email”」を指定しています。「:valid / :invalid」を用いる場合、この指定は必須です。また、こちらの擬似クラスを指定しない場合においてもinput要素には適切なtype属性を設定しましょう。
※入力欄をクリックした際にブラウザで記憶しているメールアドレスが表示されるかもしれませんが、ぜひ手入力で試してください（ブラウザ記憶のものをクリックすると作動しない場合があります）。

どうでしょうか？
「＠」を含まない文字や平仮名 / 漢字を入力した時には赤字、正しいメールアドレスを入力した時には青字になっていると思います。

これを可能にするのが擬似クラス「:valid / :invalid」です。

【 :valid 】内容の検証に成功した<input>要素やその他の<form>要素
【 :invalid 】<input>要素や<form>要素のうち内容の検証に失敗したもの
▼ 参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/:valid
https://developer.mozilla.org/ja/docs/Web/CSS/:invalid

少し難しく書いてありますが、「valid = 有効」「invalid = 無効」のとおり、入力内容が有効の時は「:valid」のものが、無効の時は「:invalid」のものが適用されるので、文字色などを変更することができます。

もちろん全て網羅的にチェックできるわけではありませんが、明らかな誤りを防ぐことができるので、ユーザーにとっても、この入力内容を受け取る側にとっても便利な機能ですね。

例であることをしっかり伝える【::placeholder】

フォームにおいて、入力する前に例文などの文字が入っているものを見かけることがよくありますね。例えば、以下のようなものです。
この「例」を示す時に役立つのが擬似要素「::placeholder」です。

See the Pen ::placeholder by spiqa design (@spiqa_design) on CodePen.

①のものをよく見かけますが、こちらは「すでに入力されている」ようにも見えるため、入力を飛ばしてしまうユーザーもいるそうです。
カーソルを合わせても（何か入力を始めない限りは）すぐに「Sass」の文字が消えるわけではないので、実際に私も戸惑ったことがあります。

そのため、②や③のように、文字をより薄くするなどして「例」であることを明示的に示すのに役立つのが擬似要素「::placeholder」です。

【 ::placeholder 】<input>要素または<textarea>要素のプレイスホルダー文字列を表す
▼ 参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder

こちらの擬似要素を用いることで、ユーザーにとってより伝わりやすいフォームを作成できますね。

なお、プレイスホルダーは、input要素やtextareay要素にplaceholder属性（placeholder=”　”）を指定することで表現できますが、入力を始めるとプレイスホルダーに指定した文字は消えてしまいます。

そのため、ユーザーに伝えることが大事な内容（例えば「パスワードは、半角英数字6文字以上18文字以内」など）は、プレイスホルダーではなく、ユーザーが入力中でも確認できる方法で表現する方が望ましいと思われます（入力中に、「あれ何文字以内だっけ」みたいなことを防ぐためです）！

ちなみに・・正しい入力に役立つ【pattern】属性

入力してもらいたいものの条件を決めることができるのが「pattern属性」です。こちらは擬似要素 / 擬似クラスではないのですが、フォーム作成にとっても役立つ属性なので、おまけとしてご紹介いたします！

【pattern】フォームコントロールの値が一致すべき正規表現を指定
▼ 参考サイト
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern

先ほど例としてあげた「パスワードは、半角英数字6文字以上18文字以内」は、input要素に「pattern=”^[a-zA-Z\d] {6,18}$”」を指定することで検証できるようになります。

<input pattern="^[a-zA-Z\d] {6,18}$">

以下は、「半角英数字6文字以上18文字以内」を指定し、さらに最初にご紹介した「:valid / :invalid」を用いています。実際に、以下にパスワードを入力してみて、合致しない場合は赤字、条件に合致する場合は青字になることを確認してみてください。

See the Pen pattern属性 by spiqa design (@spiqa_design) on CodePen.

このほかにも色々な条件を指定できますので「pattern属性 正規表現」などと調べてみてください。

また、上記のパスワード入力欄の②は、type属性として「type=”Password”」を指定したものです。入力すると「・・・」のように表示されます。「パスワード入力しているところを後ろから覗き込まれて、パスワード流出…」といったことを防ぐことに役立ちます。
この場合でも、きちんと条件に合致しているか否かで文字色が変わっていますね。

「無効」を表現できる【:disabled】

みなさんは「送信」ボタンを押してから、「※未入力項目があります」などとレスポンスが返ってきたことはないですか？私はしょっちゅうあります。「未入力項目があるなら、そもそも「送信」が押せないようになってればいいのに…」を実現するのがこの擬似クラス「:disabled」です。

実際に、以下の「送信」ボタンを押してみようとしてみてください。

See the Pen :disabled by spiqa design (@spiqa_design) on CodePen.

パソコンでご覧になっている方は、お分かりかと思いますが「内容NG」のボタンの方にマウスを持っていくと、「押せないよー！」とわかる表現になっていると思います。

これは、ボタンに『「:disabled（無効）」の時は「cursor:not-allowed」』を指定しているからです。

【 :disabled 】無効な要素を表す
▼ 参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/:disabled

実際には、ユーザーの入力内容が有効なのか、無効なのかチェックを行うスクリプトが必要ですが、今回、そちらについては省略させていただきます。

送信ボタン以外にも、前のページで入力された内容と矛盾する選択肢（チェックボタン）は、最初から選択できないように（無効に）しておくなど、様々な場面で活用できそうです。

さいごに

今回は、フォーム作成の時に役立つ擬似要素 / 擬似クラスを見てみましたがいかがでしたでしょうか？

ユーザーにとって使いやすく、なるべく入力誤りの起こらないフォームを作成するのに役立ててみてください！