E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Crearea formularelor in CSS

19.04.2008
Crearea formularelor in CSS

Formularele sunt derivate din widgets (native operating system widgets) ceea ce le face mai greu de formatat.

Total vizualizari: 23844 23844 afisari   |   Comentarii  0   |   Rating   |   (11 voturi)   |   Timp necesar: 1h 30 min 1h 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1234567891011 12
comenteaza printeaza



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:

Crearea formularelor in CSS - img27


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.

Crearea formularelor in CSS - img28


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:

Crearea formularelor in CSS - img29

Pagina:
« 1234567891011 12
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(11 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4175
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4085
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4055
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3875
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
JSON Ruby on Rails Bridge Powerpoint RoR Lightroom COREL DRAW SWF Action Script Java Photoshop CSS Illustrator SEO Word HTML Vista Gimp Fireworks PSD Flash Sony Vegas Outlook StyleSheet XHTML Fotografie Excel Verilog Swift 3D XML Python AJAX Javascript PHP Dreamweaver MySQL
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software