Validare una form – Parte 4

Titolo: Validare una form – Parte 4
Sezione: web
Data: 14.11.2018

Styling

Le pseudo classi CSS3 ci permettono di disegnare qualsiasi campo della nostra form in base al suo stato. Elenchiamole :

  • :valid
  • :invalid
  • :required
  • :optional
  • :in-range
  • :out-of-range
  • :read-only
  • :read-write

Ciò significa che si possono avere i campi obbligatori con uno stile, quelli opzionali e con un’altro e così via. Per esempio con queste classi :

input:focus:invalid,
textarea:focus:invalid{
   border:solid 2px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
    border:solid 2px #18E109;
    background-color:#fff;
}

abbiamo combinato i selettori “validi” e “non validi” con la pseudo classe “focus” per colorare i campi modulo rosso o verde quando l’utente li seleziona e inizia a digitare.
Kenji Agency : realizzazione  siti web a Treviso