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

- 「円熟者はそれ単体でゲームも作成できる」と言われるCSSの便利技法を調査・記録するだけの記事第一弾。
- CSSのみでの「[マリオ](https://kuzlog.com/2017/03/05/1238/)」や「[絵画](https://dev.to/ivorjetski/pure-css-only-portrait-isla-5h7)」のような、芸術作品に触れないと習得のきっかけにならない若年者。
- 今回は、頻度が高い入力フォーム関連の3つの技法を記録することにしよう。

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

### 「placeholder-shown」属性を利用

### 結果

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="t_o_d" data-slug-hash="yLLLjKJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="input-check-css">
  <span>See the Pen <a href="https://codepen.io/t_o_d/pen/yLLLjKJ">
  input-check-css</a> by taisuke oono (<a href="https://codepen.io/t_o_d">@t_o_d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 内容

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


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

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

```css: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」属性を利用

### 結果

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="t_o_d" data-slug-hash="OJJJZZe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="input-mail-check-css">
  <span>See the Pen <a href="https://codepen.io/t_o_d/pen/OJJJZZe">
  input-mail-check-css</a> by taisuke oono (<a href="https://codepen.io/t_o_d">@t_o_d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 内容

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


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

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

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

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

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

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

### 結果

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="t_o_d" data-slug-hash="vYYYjzv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="input-number-check-css">
  <span>See the Pen <a href="https://codepen.io/t_o_d/pen/vYYYjzv">
  input-number-check-css</a> by taisuke oono (<a href="https://codepen.io/t_o_d">@t_o_d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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


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

```html:index.html
<input type="number" min="1" max="20">
<button>登録</button>
```

```css: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  
→こちらの記事を参考にしました。大変お世話になりました。