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: 25158 25158 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:
1 23456789101112 »
comenteaza printeaza

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

Formularele sunt adesea elemente esentiale ale unui site de internet - sunt cel mai adesea folosite drept campuri de cautare, furnizare informatii, campuri pentru cosuri de cumparaturi - si trebuie sa functioneze cat mai bine pentru a atinge asteptarile.
In tutorialul de mai jos vei invata sa creezi un formular cu design deosebit furnizandu-ti si codul.

Marcarea accesibila a formularului
Inainte sa te uiti la layoutul formularului trebuie sa creezi niste marcaje care iti vor oferi un schelet de lucru caruia ii poti adauga formatari.
Formularele reprezinta o sectiune a siteului de internet careia trebuie sa ii acorzi timp si energie pentru a asigura accesibilitatea utilizatorului.

Desi formularele reprezinta una din cele mai complexe interactiuni care pot fi intalnite pe o pagina de internet, in multe cazuri, aceste interactiuni sunt reprezentate numai vizual - prin apropierea unui element de eticheta sa (label) sau prin gruparea prin margini si culoare de fundal.

Utilizatorii de tehnologie asistata precum screen readers s-ar putea sa nu recunoasca elementele vizuale deci este vital sa le oferi accesibilitate. Conceptul cheie din spatele furnizarii unui formular accesibil este de a avea o etichetare descriptiva a tuturor sectiunilor si elemetelor de implementare. (input)
In particular, aceasta inseamna folosirea corespunzatoare a elementelor: label si legend.
Exista o conceptie gresita cum ca singurul mod prin care poti garanta ca formularul este afisat corespunzator este folosind tabele. Tot cadrul reprodus aici pentru formulare este standard-based, semantic markup, deci nu vei avea nici o scuza sa te bazezi pe tabele.

Etichetarea elementelor de formular
Indiferent cum formatezi un element de formular si eticheta sa (label), el se conformeaza in general unui model:
-elementul formular in sine
-o eticheta text pentru element
-o legatura intre element si descrierea textuala
Aceasta legatura este facuta fie prin aliniere vizuala, grupare vizuala sau alt indicator vizual. In figura de mai jos poti vedea ca formularul din stanga face legatura intre camp si eticheta prin aliniere, in timp ce formularul din dreapta indica o conectare mai explicita prin folosirea culorii.

Crearea formularelor in CSS - img1

Trebuie sa iti pui si urmatoarea problema: Cum poate un utilizator, care nu poate vedea pagina de internet, sa creeze conexiunea intre un element de formular si eticheta sa text, fara gruparea de proximitate sau elemente vizuale.
Raspunsul sta in elementul label. Label este un element special aplicat unui formular pentru a permite descrierii textuale sa fie legata semantic de elementul in sine, astfel incat orice tehnologie asistata ca un screenreader (cititor de ecran) sa poata citi/interpreta/inregistra (read out) acel text cand intalneste elementul de formular corespundent.

Pentru a folosi o eticheta (label), incadreaza (wrap) descrierea textuala in taguri label, apoi adauga un atribut for pentru label. Valoarea atributului for ar trebui sa fie id-ul elementului de formular cu care vrei sa faci legatura:

<label for="firstName">First name</label>
<input id="firstName" name="firstName" type="text" />

Acum, cand un screenreader intalneste campul firstName, va citi si texul "FirstName" utilizatorului, astfel incat el sa stie ce sa tasteze in cadrul campului. Label nu trebuie sa fie langa elementul de formular si nici unul nu trebuie sa fie intr-o anumita ordine -- atat timp cat  atributul for al etichetei (label) contine o referinta valida, relatia va fi inteleasa. Totusi, din punct de vedere al logicii semantice este bine ca eticheta sa fie chiar inainte de elementul de formular.

O eticheta ar trebui aplicata oricarui element de formular care nu include automat un text descriptiv, cum sunt:
-casute pentru bifat (checkboxes)
-butoane radio
-zone de text (textarea)
-campuri text
-select boxes (casute de selectare)
Butoanele si imaginile de validare (Submit buttons and submit images) nu necesita elemente eticheta pentru ca descrierea lor este continuta in value si atributele alt.

Gruparea elementelor corespondente
Fieldset grupeaza o serie de elemente de formular corespondente. De exemplu "adresa strazii","sector","judet","cod postal" pot fi grupate sub "adresa".

Poti crea un fieldset (set de campuri) care grupeaza toate acele elemente si furnizeaza o legenda (legend) corespunzatoare pentru a descrie acel grup:

<form action="exemplu.php">
<fieldset>
<legend>Adresa</legend>
<label for="strada">Adresa strazii</label>
<input id="strada" name="strada" type="text" />
<label for=" sector">Sector</label>
<input id="sector" name="sector" type="text" />
<label for="judet">Judet</label>
<input id="judet" name="judet" type="text" />
<label for="codpostal">CodPostal</label>
<input id="codpostal" name="codpostal" type="text" />
</fieldset>
</form>

Acum legenda (legend) este asociata cu toate acele elemente de formular din cadrul fieldset; cand o persoana folosind un screenreader se concentreaza pe unul din elementele formularului, screenreaderul va citi si textul legend: "Adresa; Sector"

Beneficiul care rezulta din folosirea si a legend si a fieldset devine observabil atunci cand ai de a face cu doua grupuri de elemnte care sunt foare similare cu exceptia tipului de grup:

<form action="example.php">
<fieldset>
<legend>Adresa</legend>
<label for="strada">Adresa Strazii</label>
<input id="strada" name="strada" type="text" />
<label for=" sector">Sector</label>
<input id="sector" name="sector" type="text" />
<label for="judet">Judet</label>
<input id="judet" name="judet" type="text" />
<label for="codpostal">CodPostal</label>
<input id="codpostal" name="codpostal" type="text" />
</fieldset>
<fieldset>
<legend>Adresa de livrare</legend>
<label for="StradaLivrare">Adresa Strazii</label>
<input id="StradaLivrare" name="StradaLivrare"
type="text" />
<label for="SectorLivrare">Sector</label>
<input id="SectorLivrare" name="SectorLivrare"
type="text" />
<label for="JudetLivrare">Judet</label>
<input id="JudetLivrare" name="=JudetLivrare"
type="text" />
<label for="CodPostalLivrare">CodPostal</label>
<input id="CodPostaLlivrare" name="CodPostalLivrare"
type="text" />
</fieldset>
</form>"><form action="example.php">
<fieldset>
<legend>Adresa</legend>
<label for="strada">Adresa Strazii</label>
<input id="strada" name="strada" type="text" />
<label for=" sector">Sector</label>
<input id="sector" name="sector" type="text" />
<label for="judet">Judet</label>
<input id="judet" name="judet" type="text" />
<label for="codpostal">CodPostal</label>
<input id="codpostal" name="codpostal" type="text" />
</fieldset>
<fieldset>
<legend>Adresa de livrare</legend>
<label for="StradaLivrare">Adresa Strazii</label>
<input id="StradaLivrare" name="StradaLivrare"
type="text" />
<label for="SectorLivrare">Sector</label>
<input id="SectorLivrare" name="SectorLivrare"
type="text" />
<label for="JudetLivrare">Judet</label>
<input id="JudetLivrare" name="=JudetLivrare"
type="text" />
<label for="CodPostalLivrare">CodPostal</label>
<input id="CodPostaLlivrare" name="CodPostalLivrare"
type="text" />
</fieldset>
</form>
Pagina:
1 23456789101112 »
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
5195
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5150
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5000
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4975
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4735
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Verilog Javascript Word Fotografie AJAX Lightroom MySQL Ruby on Rails PSD PHP CSS Illustrator COREL DRAW SEO Swift 3D Gimp Photoshop Python Fireworks Action Script RoR Excel HTML Bridge JSON XHTML Flash Powerpoint Vista SWF Dreamweaver Outlook XML Sony Vegas StyleSheet Java
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