【CSS猛者への道①】CSSのみで入力フォームのチェックを行う主な3つの便利技法を記録。

• 「円熟者はそれ単体でゲームも作成できる」と言われるCSSの便利技法を調査・記録するだけの記事第一弾。
• CSSのみでの「マリオ」や「絵画」のような、芸術作品に触れないと習得のきっかけにならない若年者。
• 今回は、頻度が高い入力フォーム関連の3つの技法を記録することにしよう。

技法1: 入力フォームの空チェック

「placeholder-shown」属性を利用

結果

See the Pen input-check-css by taisuke oono (@t_o_d) on CodePen.

内容

• 今回の入力フォームのCSS部分で使用している属性は、「placeholder-shown」であり、これはplaceholder(仮テキスト)が表示されている時を示す。

• つまり、下記のような指定でnotを用いることで、「placeholderが表示されていない時にボタンの透明度をあげて、ボタンをクリック可能状態にする」という意味になる。

index.html

<input placeholder="値を入力してください">
<button>登録</button>

index.css

/* opacityを利用して、初期状態の透明度を半分に。
pointer-eventsを利用して、初期状態のボタンクリック不可 */
button {
    opacity: 0.5;
    pointer-events: none;
}

/* not(:placeholder-shown)を利用して、
placeholderが表示されていない時に、
pointer-eventsを自動設定。
opacityの透明度も戻す。 */
input:not(:placeholder-shown) + button {
    opacity: 1;
    pointer-events: auto;
}

技法2: 入力フォームの形式チェック

「valid・invalid」属性を利用

結果

See the Pen input-mail-check-css by taisuke oono (@t_o_d) on CodePen.

内容

• 今回の入力フォームのCSS部分で使用している属性は、「invalid」「valid」であり、これはinputタグのtype属性で指定されている形式に合致している(valid)か、していない(invalid)時を示す。

• つまり、下記のような指定で、「入力値が形式に合致しているかによって、背景色を変更する」という意味になる。

index.html

<input type="email" placeholder="メールアドレスを入力">
<button>登録</button>

/* valid属性を利用して、inputで指定した
type属性形式に該当しない場合の、背景色。 */
input:invalid {
  background-color: #ee6666;
}

/* invalid属性を利用して、inputで指定した
type属性形式に該当する場合の、背景色。 */
input:valid {
  background-color: #95f195;
}

技法3: 入力フォームの範囲チェック

「in-range・out-of-range」属性を利用

結果

See the Pen input-number-check-css by taisuke oono (@t_o_d) on CodePen.

内容

• 今回の入力フォームのCSS部分で使用している属性は、「in-range」「out-of-range」であり、これはinputタグのminやmax属性で指定されている数値の範囲に合致している(in-range)か、していない(out-of-range)時を示す。

• つまり、下記のような指定で、「入力値が、指定した数値範囲を超えているかによって、背景色を変更する」という意味になる。

index.html

<input type="number" min="1" max="20">
<button>登録</button>

index.css

input:in-range {
  background-color: #95f195;
}
input:out-of-range {
  background-color: #ee6666;
}

まとめ

• 今回はフォーム関連ということで、魅力デザインフォームを発見次第、お問い合わせ衝動が駆られる私を客観分析しながら、記事を書く。
• 「シンプルイズベスト」と言う本質に気づく前に、若年性であることを利用して、絢爛デザインでの遊びを継続。
• 次回は、頻度が高い「テーブルや一覧」関連を調査することにしよう。

参考

• https://dev.to/xtrp/possibly-the-most-useful-css-trick-jl3
  →こちらの記事を参考にしました。大変お世話になりました。
• https://coliss.com/articles/build-websites/operation/css/advanced-css-form-styling.html
  →こちらの記事を参考にしました。大変お世話になりました。