Basic form validation

by int32_t

HTML

<form action="">
  <label>お名前 (必須): <input required name=name></label>
  <label>郵便番号: <input pattern="\d{3}-\d{4}" placeholder="???-????" name=zip></label>
<label>都道府県: <select required name=prefecture><option value="">選んでください<option>北海道</select></label>
  <input type=submit style="-webkit-appearance:square-button">
</form>

CSS

body {
    zoom: 1;
}

:invalid {
    background-color: red;
}

label {
    display: block;
}