: utilizator nevalid - CSS-Tricks

Este :user-invalido pseudo-clasă CSS care se află în propunere în proiectul de lucru CSS Selectors Nivelul 4 care selectează un element de formular pe baza valorii introduse de un utilizator - este validă atunci când este comparată cu ceea ce este specificat ca valoare acceptată în marcajul HTML după ce utilizatorul final a interacționat cu formularul dincolo de acea intrare. De fapt, :user-invalida fost numită „Pseudo-clasa de interacțiune cu utilizatorul”, deoarece este unică în identificarea unei acțiuni a utilizatorului în selectarea unui element.

Luați următorul marcaj HTML pentru un formular de bază cu un câmp numeric:

Cantitate:

Intervalul numeric setat de marcajul HTML pentru intrare este între 1și 10dar valoarea implicită a fost setată la 11. Aceasta înseamnă că valoarea este nevalidă imediat ce se încarcă formularul.

Cu toate acestea, :user-invalidpseudo-clasa nu va intra în vigoare decât după ce utilizatorul a interacționat efectiv cu formularul dincolo de introducerea acestuia în câmp. Această interacțiune este diferența dintre :user-invalidși :invalid. Același principiu se aplică pentru valorile de formular introduse , care sunt stabilite de :in-range, :out-of-rangeși :required.

Odată ce valoarea introdusă de utilizator este determinată ca fiind o intrare nevalidă, putem selecta elementul:

input:user-invalid ( color: red; )

Următoarea imagine ilustrează diferitele stări dintre :validși :user-invalidbazate pe exemplul HTML de mai sus.

Diferența dintre o valoare validă (stânga) și o valoare nevalidă introdusă de un utilizator după interacțiunea cu formularul.

Lucrul confuz cu aici este cât de strâns legat :invalidși :user-invalidsunt. Dacă este utilizat împreună, poate fi dificil să distingem cele două:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Diferența dintre `:invalid`(centru) și o valoare nevalidă introdusă de un utilizator (dreapta) poate fi dificil de distins

Folosirea uneia peste cealaltă sau stilul distinct între cele două s-ar putea dovedi a fi o experiență de utilizare mai bună într-un caz de utilizare din viața reală.