Three main useful techniques to check input forms using only CSS
Tags: html, css, design, webdev
Published: 2020-10-02 12:46:56

## Technique1 : Blank check for input form

### Using the 「placeholder-shown」 attribute

### Result

{% codepen https://codepen.io/t_o_d/pen/RwazdWv default-tab=html,result%}

### Details
- The attribute used in the CSS part of this input form is **placeholder-shown**.
- This indicates when a placeholder is displayed.
- In other words, by using 「**not**」 in the following specification, **we can make the button clickable by increasing the transparency of the button when the placeholder is not displayed**.

```html
<input placeholder="Please enter a value.">
<button>save</button>
```

```css
/*
Use opacity to reduce the initial transparency by half.
By using pointer-events, the initial button click is disabled.
*/
button {
    opacity: 0.5;
    pointer-events: none;
}

/*
Using not(:placeholder-shown), you can use
If you don't see the placeholder, you can use
Automatic setting of pointer-events.
Restore the opacity's transparency as well.
*/
input:not(:placeholder-shown) + button {
    opacity: 1;
    pointer-events: auto;
}
```

## Technique2 : Check the format of the input form

### Using the 「valid and invalid」 attribute

### Result

{% codepen https://codepen.io/t_o_d/pen/YzqogNB default-tab=html,result%}

### Details

- In the CSS part of this input form, I'm using **invalid** and **valid** as attributes.
- This indicates if the form matches the type specified in the input tag's type attribute (**valid**) or not (**invalid**).
- In other words, **the following specification will change the background color depending on whether the input value matches the format**.

```html
<input type="email" placeholder="Enter email address">
<button>save</button>
```

```css
/*
Using the invalid attribute, the
The background color if the type attribute format does apply.
*/
input:invalid {
  background-color: #ee6666;
}

/*
Using the valid attribute, the
The background color if the type attribute format does not apply.
*/
input:valid {
  background-color: #95f195;
}
```

## Technique3 : Check the scope of the input form

### Using the 「**in-range and out-of-range**」 attribute

### Result

{% codepen https://codepen.io/t_o_d/pen/OJNeqZy default-tab=html,result%}

### Details
- The CSS parts of this input form use 「**in-range**」 and 「**out-of-range**」 attributes.
- This indicates if the range of values specified in the input tag's min and max attributes is met (**in-range**) or not (**out-of-range**).
- In other words, **the following specification will mean that the background color will be changed depending on whether the input value is beyond the specified numerical range**.

```html
<input type="number" min="1" max="20">
<button>save</button>
```

```css
/*
Using the in-range attribute, the
The background color if it falls within a range of values.
*/
input:in-range {
  background-color: #95f195;
}
/*
Using the out-of-range attribute, you can use the
Background color if the value does not fall within a range of values.
*/
input:out-of-range {
  background-color: #ee6666;
}
```

## Link
- [css selectors](https://www.w3schools.com/cssref/css_selectors.asp)