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: 24681 24681 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:
« 12345678910 11 12 »
comenteaza printeaza


Campuri obligatorii si mesaje de eroare
Adesea sunt informatii aditionale pe care vrei sa le incluzi in formular.
Pentru a te asigura ca sunt accesibile ar trebui sa fie incluse in eticheta.

Indicarea campurilor obligatorii
Cea mai simpla metoda este e a scrie “obligatoriu” dupa eticheta formularului.
Pentru a sublinia importanta informatiei, poti adauga textul “obligatoriu” in cadrul unui element em .

required-fields.html 
<label for="name"> 
Name: <em>required</em> 
</label>

Pentru a-i crea lui em propriul loc in formular il poti seta pe display:block , si schimba infatisarea textului:

required-fields.css  
label em { 
display: block; 
color: #060; 
font-size: 85%; 
font-style: normal; 
text-transform: uppercase; 
}

Marcajul “obligatoriu” va arata astfel:

Crearea formularelor in CSS - img24

Totusi, asteriscul a devenit acum o marcare foarte comuna pentru evidentierea campurilor obligatorii.

Inafara contextului vizual insa nu are insemnatate. Screen readerele vor citit asteriscul ca “steluta”.
Din considerente de accesibilitate, in loc sa incluzi asteriscul langa eticheta textului este mai bine sa introduci o imagine cu un asterisc, cu un text alt “obligatoriu”. Asta inseamna ca utilizatorii de screenreadere vor auzi cuvantul “obligatoriu” in loc de “steluta”. Daca folosesti o imagine, ar trebui sa incluzi un comentariu pentru ca utilizatorii sa inteleaga sensul.

Vom inlocui textul “obligatoriu” din cadrul elementului em cu imaginea unui asterisc:

required-fields-star1.html 
<label for="name"> 
Name: <em><img src="images/required_star.gif" 
alt="required" /></em> 
</label>

Inlocuirea nu are nevoie de formatari; puteam lasa em-ul ca element inline si asteriscul va aparea chiar langa eticheta formularului:

Crearea formularelor in CSS - img25

Sau, putem utiliza CSS pentru a pozitiona imaginea absolut si va fi asociata mai bine cu elementul formularului.

required-fields-star2.css (excerpt) 
label { 
position: relative; 
float: left; 
width: 10em; 
margin-right: 1em; 
} 
label em { 
position: absolute; 
left: 10em; 
top: 0; 
}

Cand pozitionezi em-ul absolut, este important sa ii pozitionezi parintele relativ, astfel incat atunci cand specifici coordonate pentru em, sa fie relativa fata de coltul stanga sus al etichetei. Imagina cu steluta ar trebui pozitionata in spatiul dintre eticheta si elementul de formular (creat de marginea din dreapta a etichetei), astfel valoarea pentru em stanga va depinde in functie de ce am setat acolo. Setand valoarea maxima pentru em este o masura de precautie in caz ca imaginea a trecut pe o noua linie.

Dupa ce faci modificarile de mai sus ar trebui sa obtii un rezultat ca in imaginea de mai jos, o serie de marcaje obligatorii mai ordonate.

Crearea formularelor in CSS - img26

Pagina:
« 12345678910 11 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
4810
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4750
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4625
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4560
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4420
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Vista CSS Lightroom Outlook Swift 3D JSON Javascript HTML MySQL Java Fireworks AJAX Gimp SEO Action Script Photoshop PSD SWF Fotografie Illustrator XHTML StyleSheet Bridge XML Verilog Flash Python RoR Sony Vegas PHP Powerpoint Excel Ruby on Rails Dreamweaver Word COREL DRAW
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