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: 26991 26991 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 2 3456789101112 »
comenteaza printeaza


In imaginea de mai jos, cu elemetele fieldset si legend organizate se poate determina vizual foarte usor ca campuri apartin carui grup chiar si intr-o forma ne formatata.

Crearea formularelor in CSS - img2

Acelasi efect vizual poate fi obtinut si folosind elementele h1 in loc de legend dar, ratiunea folosirii lui legend este aceea ca fara o grupare semantica si etichetare, un utilizator s-ar putea intreba de ce trebuie sa introduca "Adresa1" de doua ori. Cu elementul legend  inclus utilizatorul va sti ca a doua adresa apartine de fapt altui grup.

Layout-ul formularului
Exista mai mai multe metode prin care poti face layout-ul unui formular. Metoda pe care o alegi depinde cat de lung este formularul, scopul lui, cat de des va fi folosit si estetica generala a paginii de internet.

Se considera a fi eficient sa ai numai un element de formular pe linie, cu liniile stivuite secvential una peste cealalta, caci majoritatea paginilor web sunt create mai degraba pentru scroll vertical decat pentru orizontal.

Pentru fiecare element dintr-un sistem de citire de la stanga la dreapta este logic sa pozitionezi  eticheta corespunzatoare in unul din aceste trei moduri:
-direct desupra elementului de formular
-intr-o coloana separata la stanga, aliniata la stanga
-intr-o cloloana separata la stanga, aliniata la dreapta

Fiecare din aceste abordari are propriile avantaje si infatisare deci considera aceste optiuni cand te decizi cum sa creezi layout-ul formularului.
Etichetele care sunt pozitionate direct deasupra unui element de formular  au demonstrat ca sunt procesate mai usor de utilizatori.

Gruparea compacta intre eticheta si element reduce miscarea ochilor si ii permit utilizatorului sa le observe deodata. (iata un articol foarte bun publicat de UXmatters: http://www.uxmatters.com/MT/archives/000107.php) Totusi acest tip de pozitionare este are un caracter utilitar si nu creaza cel mai estetic layout.  Mai are si dezavantajul de a ocupa mai mult spatiu verical si va face un formular lung si mai lung. In general etichetele plasate deasupra sunt potrivite pentru formulare scurte cu care utilizatorul este familiarizat.

Crearea formularelor in CSS - img3

Etichetele care sunt pozitionate intr-o coloana la stanga elementelor arata mai organizat dar modul in care textul este aliniat in acele etichete deasemenea afecteaza utilizarea formularului.

Alinierea la dreapta a textului creza o grupare mai puternica intre eticheta si element. Totusi spatiul care ramane in stanga textului poate face formularul sa arate dezordonat si reduce abilitatea utilizatorului sa scaneze etichetele, asa cum Luke Wroblewski sustine in articolul sau pe aceasta tema: http://www.lukew.com/resources/articles/web_forms.html

Intr-o aliniere la stanga, etichetele devin mai usor de citit, dar gruparea cu elementele de formular asociate devine mai slaba. Utilizatorii trebuie sa petreaca ceva mai mult timp coreland etichetele cu elementele lor.

In figura de mai jos este un exemplu de formular cu aliniere la stanga:

Crearea formularelor in CSS - img4
 
Layout-ul aliniat la dreapta asigura o asociere mai rapida intre eticheta si element, desi este mai potrivita pentru formularele care vor fi vizitare in repetate randuri de catre utilizator. Amandoua layout-urile au avantajul ca ocupa un spatiu minim pe verticala.

Crearea formularelor in CSS - img5

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