|
Gestionarea mesajelor de eroare
Mesajele de eroare se gestioneaza in aproape aceeasi maniera ca marcajele de obligativitate. Ar trebui sa faca parte din eticheta:
error-fields1.html
<label for="name">
Email: <strong>This must be a valid email address</strong>
</label> Elementul semantic strong este folosit pentru a incadra mesajul de eroare, distingand-ul de un marcaj de obligativitate.
Formatarea e asemanatoare cu cea de la marcajul textual “obligatoriu” cu diferenta ca probabil vei schimba culoarea.
error-fields1.css
label strong {
display: block;
color: #C00;
font-size: 85%;
font-weight: normal;
text-transform: uppercase;
}Formatarea genereaza un layout ca in imaginea de mai jos:
Exista si o plasare alternativa a mesajului de eroare dar depinde de o serie de factori. Mesajul de eroare poate fi plasat la dreapta elementului formularului atat timp cat:
-latimea maxima a oricarui element de formular este cunoscuta
-comprimarea mesajului de eroare este putin probabila
Plasarea presupune ca mesajul de eroare sa fie pozitionat absolut, deci trebuie sa cunoastem dinainte cat de mult putem muta eroarea. Elementele absolute sunt inafara documentului, si deci continutul lor nu se va modifica pentru a se potrivi cu mesajul de eroare daca el se comprima. Daca designul poate fi facut rezolvand aceste doua probleme, CSS-ul este urmatorul:
error-fields2.css
label {
position: relative;
float: left;
width: 10em;
margin-right: 1em;
}
label strong {
position: absolute;
left: 27em;
top: 0.2em;
width: 19em;
color: #C00;
font-size: 85%;
font-weight: normal
;text-transform: uppercase;
}Pentru ca elementul strong este pozitionat absolut, eticheta parinte trebuie pozitionata relativ pentru a permite sa mutam mesajul de eroare relativ fata de eticheta.
Latimea mesajului de eroare este dictata de spatiul de dupa element. Valoarea pentru stanga se calculeaza adunand latimea elementului formularului cu latimea etichetei si cu spatiul aditional de care avem nevoie pentru a alinia mesajul de eroare corespunzator.
Solutii inaccesibile pentru textul de eroare
Este posibil sa pozitionezi textul de eroare in dreapta campurilor text schimband ordinea HTML, dar fie:
-textul de eroare va fi plasat inafara etichetei
-trebuie sa imbrichezi elementul de formular in eticheta si sa plasezi textul de eroare dupa elementul de formular.
Amandoua solutiile sunt inaccesibile pentru ca un screen reader cel mai probabil va esua in a citi mesajul de eroaare cand elementul de formular este focalizat.
In combinatie cu pozitionarea la dreapta a mesajelor de eroare poti folosi simboluri de eroare pentru a sublinia zonele cu probleme din formular. Simbolul de eroare este inclus in HTML cu un atribut alt corespunzator:
error-fields3.html
<fieldset>
<legend>Contact Details</legend>
<ol>
<li>
<label for="name">
Email: <strong><img src="images/error_cross.gif"
alt="Error" /> This must be a valid email address
</strong>
</label>
<input id="name" name="name" class="text" type="text" />
</li>
</ol>
</fieldset>
Acum il putem muta la stanga elementului de formular folosind pozitionarea absoluta. Pentru ca parintele sau (elementul strong) este deja pozitionat absolut, orice miscare va fi relativa fata de parinte, deci trebuie sa il mutam intr-o directie negativa pentru a-l muta inapoi catre stanga.
error-fields3.css (excerpt)
label strong img {
position: absolute;
left: -16em;
}Aceasta ajustare este echivalenta cu latimea elemetului formularului, plus inca putin pentru spatiere, deci vom obtine un simbol pozitionat estetic ca in imaginea de mai jos:
|
15194 afisari |
1h 30 min
|
Incepator
