required
: must be filled
minlength
/ maxlength
: text minimum / maximum length, can be combined
min
/ max
: number minimum / maximum
pattern
: with a regular expression. only be used on <input>
elements.
<input type="text" id="zip_code" name="zip_code"
pattern="(\d{5}([\-]\d{4})?)" required>
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}