Crearea formularelor in CSS

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.

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>

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.

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.

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:

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.

Folosirea CSS Pentru a crea fiecare din aceste tipuri de layout-uri pentru formular vom folosi marcari identice (markup) dar cu reguli diferite de CSS: In exemplul nostru HTML arata astfel:

<form action="example.php"> <fieldset> <legend>Contact Details</legend> <ol> <li> <label for="name">Name:</label> <input id="name" name="name" class="text" type="text" /> </li> <li> <label for="email">Email address:</label> <input id="email" name="email" class="text" type="text" /> </li> <li> <label for="phone">Telephone:</label> <input id="phone" name="phone" class="text" type="text" /> </li> </ol> </fieldset> <fieldset> <legend>Delivery Address</legend> <ol> <li> <label for="address1">Address 1:</label> <input id="address1" name="address1" class="text" type="text" /> </li> <li> <label for="address2">Address 2:</label> <input id="address2" name="address2" class="text" type="text" /> </li> <li> <label for="suburb">Suburb/Town:</label> <input id="suburb" name="suburb" class="text" type="text" /> </li> <li> <label for="postcode">Postcode:</label> <input id="postcode" name="postcode" class="text textSmall" type="text" /> </li> <li> <label for="country">Country:</label> <input id="country" name="country" class="text" type="text" /> </li> </ol> </fieldset> <fieldset class="submit"> <input class="submit" type="submit"

value="Begin download" /> </fieldset> </form>

Acest HTML foloseste exact aceeasi structura fieldset-legend-label pe care am prezentat-o anterior. Observa ca aici inauntrul fieldset-ului elementele sunt intr-o lista ordonata ale carei elemente incadreaza fiecare element al formularului/perechi de etichete pe care le folosim. Nu sunt suficiente hooks de formatare in structura standard fieldset-label pentru a permite margini robuste, culori de fundal si alinierea pe coloana. Exista un numar de elemente inutile pe care le-am putea adauga formularului pentru a adauga mai multe hooks de formatare. Am putea muta elementele formularului in cadrul etichetei lor si sa incadram textul etichetei intr-un span sau sa incadram cu un div fiecare pereche de elemente/etichete. Totusi nici una din aceste variante nu va contribui cu nimic la markup inafara de prezenta sa. Fara aplicarea CSS si fara liste ordonate, markup-ul ar arata ca in imaginea de mai jos.

Imaginea urmatoare arata cum arata un formular neformatat atunci cand includem o lista ordonata.

Utilizarea de liste in formulare Daca nu doresti includerea unei liste in form.markup o poti substitui cu un alt element de incadrare (wrapper element); ai nevoie de un chenar suplimentar in jurul fiecarei perechi de elemente/etichete pentru a formata formularele cum doresti. Doua alte lucruri pe care trebuie sa le observi in HTML: - fiecare formular de introducere date are o clasa care este o replica a atributului de sau, de exemplu class=text type=text. Daca ai nevoie sa formatezi un element de formular, aceasta este o metoda facila de a-l accesa, avand in vedere ca Internet Explorer 6 nu suporta selectoarele de atribute CSS. - butonul de validare al formularului este continut in propriul fieldset cu class=submit. Adesea vei avea actiuni multiple la sfarsitul unui formular, precum submit si cancel. In astfel de cazuri este util sa poti grupa aceste actiuni cu fieldset. Daca ai aplicat formatari unor elemente fieldset normale cel mai adesea vei vrea sa ai o formatare diferita pentru fieldset-ul care incadreaza aceste actiuni, deci este necesara o clasa pentru a distinge actiunile fieldset. Fileldset-ul si ce se implementeaza in el au acelasi nume de clasa pentru ca termenul submit are sens pentru ambii. Sunt usor de distins in CSS precedand selectorul de clasa cu un element selector asa cum vei vedea mai jos. Aplicarea unei formatari generale Exista o serie de formatari pe care le vom aplica pe formulare, indiferent de ce layout alegem. Aceste formatari se invart in jurul includerii de spatiu alb pentru a ajuta la separarea elementelor formularului si elementelor fieldset:

fieldset { margin: 1.5em 0 0 0; padding: 0; } legend { margin-left: 1em;

color: #000000; font-weight: bold; } fieldset ol { padding: 1em 1em 0 1em; list-style: none; } fieldset li { padding-bottom: 1em; } fieldset.submit { border-style: none; }
Marginea (margin) din fieldset ajuta la separarea fiecarui grup fieldset. Toate spatiile (padding) interne sunt scoase din fieldset acum pentru ca mai tarziu vor crea probleme. Din moment ce padding nu e inclus in width, el poate imparti dimensiunile formularului daca ai width 100% si un pic de padding. Pentru a ajuta sa definesti o ierarhie vizuala care arata clar fiecare eticheta (label) dinauntrul fieldset grupat sub legend, le vei da elementelor legend caracteristica bold. (font weight: bold). Trebuie sa inlocuim si spatierea care a fost scoasa de la padding de pe fieldset, deci scriem la legend o margine in stanga de 1 em (margin-left: 1 em). Pentru a opri numerotarea automata care ar aparea pentru lista ordonata, setam list-style pe none pe ol si deci scoatem orice formatare de numerotare sau marcare care exista in mod normal intr-o astfel de lista. Apoi, pentru a recrea spatierea interna pe care am indepartat-o din fieldset ii dam listei ordonate paddind. Nu se pune padding in partea de jos a listei pentru ca de asta se va ocupa elementul padding al ultimului element al listei. Pentru ca butonul submit sa nu para a face parte dintr-o grupare trebuie sa luam muchiile fieldsetului care il inconjoara. Acest lucru se realizeaza folosind fieldset.selector si setand border-style pe none. Dupa ce ai aplicat toate aceste marcari (markup) si ai adaugat si un layout general pentru pagina vei obtine un rezultat ca in imaginea de mai jos. (un formular care incepe sa ia forma dar are inca un aspect nefinisat) Folosirea etichetelor text pozitionate sus Pozitionarea etichetelor desupra elementelor de formular reprezinta cel mai usor tip de layout care se poate obtine. Elementul label trebuie sa acopere intreaga latimea a elementului parinte. Pentru ca elementele/etichetele formularului sunt in interiorul unor elemente de lista ordonata (care sunt elemeste bloc), fiecare pereche se va regasi pe o noua linie, ca in figura de mai jos. Pentru a face asta trebuie sa punem elementele si etichetele formularului pe linii diferite, transformand elementele label in elemente bloc, astfel incat sa ocupe intreaga linie:

label { display: block;

Alinierea etichetelor text la stanga Pentru a pozitiona etichetele langa elementele formularului mutam (float) elementele label la stanga si le dam o latime (width) explicita:

left-aligned-labels.css (excerpt) fieldset { float: left; clear: left; width: 100%; margin: 0 0 1.5em 0; padding: 0; }
Setam si o margine in dreapta (margin-right) la fiecare eticheta (label) astfel incat textul etichetei sa nu fie impins in marginea elementului de formular. Trebuie sa definim o latime (width) pentru elementul mutat astfel incat toate elementele formularului sa se alinieze intr-o coloana verticala. Latimea exacta pe care o aplicam depinde de lungimea textului etichetelor. Daca este posibil, cea mai lunga eticheta ar trebui lasata fara wrapping, dar nu ar trebui sa fie un spatiu prea mare astfel incat o alta eticheta mai mica sa para neconectata de elementul ei de formular. Intr-un scenariu viitor este

bine sa ai o latime de eticheta mai mica decat cea mai lunga etiheta pentru ca textul se va strange singur oricum, dupa cum vezi in imaginea de mai jos:

Odata ce mutam eticheta ne vom lovi de o problema legata de elementul de lista pe care il contine elementul de lista nu se va extinde pentru a se potrivi cu inaltimea elementului mutat. Aceasta problema este foarte vizibila in figura de mai jos, unde s-a aplicat o culoare de fundal (background-color) elementului de lista:

Li care contine eticheta (label) mutata nu se extinde in asa fel incat sa se potriveasca cu inaltimea etichetei.

left-aligned-labels.css fieldset li { float: left; clear: left; width: 100%; padding-bottom: 1em; }
Elementul de lista este mutat, va contine toate elementele secundare, dar latimea (width) trebuie sa fie setata la 100% pentru ca elementele mutate tind sa ia cea mai mica latime posibila. Setand latimea elementului de lista la 100% inseamna ca se va comporta ca si cum ar fi un element bloc nemutat. Declaram si o proprietate clear:left pentru a ne asigura ca nu vom intalni elemente de lista in jurul elementelor de formular. Clear:left inseamna ca elementul de lista va aparea intotdeauna sub orice element mutat la stanga anterior in loc sa apara langa acel element.

Totusi, odata ce mutam un element de lista, vom intalni acelasi comportament nedorit in fieldset - nu se va extinde pentru a cuprinde si elementele mutate. Deci trebuie sa mutam (float) si fieldset. Acesta este motivul principal pentru care am scos padding din fieldset mai devreme - cand setam width la 100% orice padding ne va deranja dimensiunile.

left-aligned-labels.css fieldset { float: left; clear: left; width: 100%; margin: 0 0 1.5em 0; padding: 0; }
Toata nebunia cu mutarea elementelor se opreste aici, odata cu fieldset-ul submit (de validare). Din moment ce este ultimul fieldset din formular si pentru ca nu are nevoie de prea multe formatari CSS spre deosebire de celelalte fieldset-uri, putem opri comportamentul de mutare (floating) de tot.

left-aligned-labels.css fieldset.submit { float: none; width: auto; border: 0 none #FFF; padding-left: 12em; }
Oprind mutarea sisetand widthinapoi pe auto, ultimul fieldset submit (de valitare) devine un element bloc normal care sterge restul mutarilor. Asta inseamna ca formularul va creste pentru a cuprinde toate elementele fieldset. Nici unul din elementele din fieldsetul submit nu sunt mutate, dar vrem ca butonul sa se alinieze cu resul elementelor formularului. Pentru a obtine acest rezultate aplicam padding fieldset-ului insusi si aceasta actiune va alinia butonul submit cu restul elementelor din formular.

Alinierea la dreapta a etichetelor text Seteaza alinierea textului de pe etichete astfel incat sa ajungi la un rezultat ca in imaginea de mai jos.

right-aligned-labels.css label { float: left; width: 10em; margin-right: 1em; text-align: right; }
Am terminat... Acum poti alege oricare forma de layout este mai potrivita pentru pagina ta.

Aplicarea formatarilor fieldset si legend Se intampla destul de rar sa vezi un fieldset afisat cu formatarea implicita a browserului.

Elementele legend sunt unele din cele mai complicat de formatat elemente de HTML dar exista cateva metode care iti usureaza munca si cateva modalitati de diferentiere a fieldset-urilor folosind CSS. Furnizand o culoare de fundal pentru elementele fieldset te ajuta sa diferentiezi continutul de formular de cel obisnuit si concentreaza atentia utilizatorului pe campuri. Rezolvarea problemelor din Internet Explorer legate de legend Internet Explorer gestioneaza elementul legend in mod diferit fata de alte browsere. Se pare ca IE trateaza elementele legend ca si cum ar fi inauntrul fieldset-ului, in timp ce alte browsere le trateaza ca si cum ar fi inafara fieldset-ului. Crearea unui style sheet separata pentru IE pare solutia cea mai buna. Daca pui o culoare de fundal pe un fieldset cu legend, ca in imaginea de mai jos problema se poate vedea foarte clar:

Fieldset-ul din stanga arata cum redau majoritatea browser-elor elementele legend si fieldset. Fieldset-ul din dreapta arata cum reda IE elementele - culoarea de fundal apare extinsa peste margine, intinzandu-se ca sa se potriveasca cu inaltimea elementului legend.

Modalitatea de evitare a acestei probleme este sa oferi browserului IE un style sheet separat care contine comentarii conditionale:

<!--[if lte IE 7]> <style type="text/css" media="all"> @import "css/fieldset-styling-ie.css"; </style> <![endif]-->
Aceasta declarare include un style sheet pentru IE 7 si mai vechi. Orice alt browser va ignora aceasta declarare. Am putea folosi si style sheet care se poate aplica oricarei versiuni de IE - inclusiv cele ce se vor lansa in viitor - dar diferenta de afisare a legend ar putea fi corectata pana atunci. In interiorul syle sheet-ului folosim pozitionarea relativa la legend,mutand in sus pentru alinierea la marginea de sus a fieldsetului.

legend { position: relative; left: -7px; top: -0.75em; } fieldset ol { padding-top: 0.25em; }
In acest caz valoarea setata pentru partea de sus a legend este exact valoarea potrivita pentru ca legend sa se alinieze cu fieldset. Ea poate sa varieze in functie de alte formatari aplicate la legend (cum sunt margin si padding). Am folosit unitati relative, astfel incat daca utilizatorul schimba marimea textului din browser, pozitia legend sa se modifice corespunzator si sa se alinieze in continuare. Pe langa mutarea partii de sus a legend, mai mutam cu 7px la stanga aplicand o valoare left de 7px. IE intotdeauna muta legendele la dreapta cu -7 px (indiferent de marimea textului) deci trebuie sa negam/anulam mutarea pentru ca elementele din legend si label sa se alinieze frumos. Pentru ca mutam in sus legenda, se va crea mai mult spatiu sub legend. Pentru a anula acest efect, reducem padding din partea de sus a listei ordonate cu o valoare echivalenta., schimband-o de la valoarea 1em la 0,25em. Ultima ajustare pentru IE este sa pozitionam relativ fieldset-ul insusi:

fieldset { position: relative; }

Fara aceasta regula, IE genereaza niste efecte vizuale ciudate in jurul elemenului legend.

Trebuie neaparat sa evitam aberatiile ce pot aparea in IE. Deocamdata setam pozitia (position) fieldset-ului pe relative pentru a aduce totul la normal.

Formatarea legend si fieldset In toate browserele legend are spatiere (padding) implicita. Cantitatea de padding variaza de la browser la browser, deci pentru a avea acest element aliniat cu etichetele eliminam spatierea din style sheet (pagina de formatare) principala.

fieldset-background-color.css legend { margin-left: 1em; padding: 0; color: #000; font-weight: bold; }

Marginea (border) implicita pentru elementele fieldset este de obicei o margine inserata - care nu se potriveste la unele site-uri. Aici o vom face plata, de 1 px. In plus, vom adauga o culoare de fundal care va face elementele fieldset sa iasa in evidenta:

fieldset-background-color.css fieldset { float: left; clear: both; width: 100%; margin: 0 0 1.5em 0; padding: 0; border: 1px solid #BFBAB0; background-color: #F2EFE9; }
In general nu dorim margini sau culoare de fundal in spatele fieldset-ului submit, deci sunt usor de anulat.

fieldset-background-color.css fieldset.submit { float: none; width: auto; border-style: none; padding-left: 12em; background-color: transparent; }

Acum avem elemente fieldset cu o culoare de fundal ca in imaginea de mai jos.

Atunci cand eticheta elementului legend se suprapune numai peste o parte a chenarului, intreruperea de culoare poate parea brusca.

Aceasta intrerupere devine mai vizibila daca folosim o culoare de fundal pentru fieldset care are un contrast mai mare cu pagina normala. Pentru contracararea acestui efect poti sa pui o imagine de fundal cu gradient in fieldset care schimba din culoarea de pe fundal (alb) in culoarea aleasa la fieldset.

fieldset-background-image.css fieldset { float: left; clear: both; width: 100%; margin: 0 0 1.5em 0;

padding: 0; border: 1px solid #BFBAB0; background-color: #F2EFE9; background-image: url(images/fieldset_gradient.jpg); background-repeat: repeat-x; }
Regula imaginii de fundal se va aplica si la fieldsetul submit, deci pentu a pastra un fundal curat si transparent trebuie anulata imaginea de fundal din fieldsetul submit.

fieldset-background-image.css (excerpt) fieldset.submit { float: none; width: auto; border-style: none; padding-left: 12em; background-color: transparent; background-image: none; }

Modificarea layout-ului filedset-ului implicit Desi elementele fieldset si legend sunt cele mai accesibile metode de a forma grupari, in trecut multi nu l-au folosit pentru ca nu le placea formatarea implicita pe care browser-ele o impuneau - marginea din jurul fieldset-ului, elementul legend care intersecta marginea chenarului. Este insa posibil sa schimbi aceasta setare implicita. Primul pas este sa apropii elementele din fieldset, eliminand spatiul alb dintre ele. Pentru a realiza acest lucru am putea face o margine in partea de jos a elementlor fieldset-ului cu valoarea 0, dar va ajunge sa arate ca in imaginea de mai jos.

Legend-ul din partea de sus a elementelor fieldset-ului impiedica cele doua elemente sa se uneasca. Pentru a scapa de aceasta problema se poate folosi o margine negativa in partea de jos a fiecarui fieldset. Acest lucru va trage in sus fieldsetul care e mai jos astfel incat sa se suprapuna peste cel de sus facandu-le sa para ca se ating. Pentru a preveni fieldset-ul de jos sa se suprapuna pe oricare din elementele formularului ar trebui sa adaugam padding (spatiere) in partea de jos a elementelor din fieldset pentru a avea spatiu in care sa se miste.

fieldset { float: left; clear: both; width: 100%; margin: 0 0 -1em 0; padding: 0 0 1em 0; border: 1px solid #BFBAB0; background-color: #F2EFE9; }
Mutarea fieldset-urilor cu 1em este suficient pentru a acoperi spatiul dintre ele, iar spatierea de jos (bottom-padding) de 1 em contracareaza miscarea, asigurandu-ne ca nici un element ai formularului nu va disparea sub elementele de fieldset. Cateva artificii vizuale sunt necesare atunci cand scoatem spartiul alb. Fara contact intre culoarea de fundal a fieldsetului si culoarea normala de fundal a paginii nu mai avem nevoie se imaginea de fundal cu gradient. Formatarea pentru margini trebuie si ea schimbata deci scoatem toate marginile si apoi o inlocuim numai pe cea de sus.

fieldset { float: left; clear: both; width: 100%; margin: 0 0 -1em 0; padding: 0 0 1em 0; border-style: none; border-top: 1px solid #BFBAB0; background-color: #F2EFE9;

}
Cu toate elementele fieldset-ului unite, marginile din stanga si din dreapta fac formularul sa arate neingrijit. Numai cu o margine in partea de sus el pare mult mai clar si curat.

Alt efect secundar al unirii elementelor fieldset-ului este ca legend (legenda) este decalata. Pentru a rezolva problema, legenda trebuie adusa in perimetrul fieldsetului. Instinctiv vei folosi o pozitionare relativa sau absoluta pentru legenda pentru a o muta in jos spre fieldset. Totusi, Firefox nu permite repozitionarea legendei. Singura metoda de abordare a problemei este sa adaugi markup formularului. Inserand un span in fiecare element al legendei, Firefox ne permite sa formatam acest element si sa mutam textul mai jos in fieldset.

fieldset-alternating.html <legend> <span>Contact Details</span> </legend>

Span-ul poate fi pozitionat absolut si mutat in jos catre fieldset folosind margin-top. Vom creste si marimea fontului pentru textul legendei pentru a fi mai proeminent:

fieldset-alternating.css (excerpt)

legend span { position: absolute; margin-top: 0.5em; font-size: 135%; }

Exista o eroare in Firefox (Firefox 1.5.0.6 in Windows XP, dar nu OSX) care face ca elementele span pozitionate absolut sa se comporte ca si cum ar fi pozitionate in partea de sus a elementului formularului. Oferind elementeleor legendei o pozitie relativa nu afecteaza elementele span, deci trebuie sa pozitionam relativ fiecare din elementele fieldset-ului si sa le dam elementelor span coordonate explicite pentru a scapa de aceasta eroare:

fieldset-alternating.css (excerpt) fieldset { position: relative; float: left; clear: both; width: 100%; margin: 0 0 -1em 0; padding: 0 0 1em 0; border-style: none; border-top: 1px solid #BFBAB0; background-color: #F2EFE9; } legend span { position: absolute; left: 0.74em; top: 0; margin-top: 0.5em; font-size: 135%; }
Valoarea de 0,74 em la stanga (left) corespunde spatietii de 1em (padding) pe care am dat-o listei ordonate, pentru ca span-ul are o marime de font mai mare. Pentru ca acum specificam o valoare left pentru span, trebuie sa scoatem margin-left de la legenda parinte, astfel incat sa nu obtinem o spatiere dubla. Pur si simplu vom omite formatarea margin pe care am folosit-o anterior.

fieldset-alternating.css (excerpt) legend { padding: 0; color: #545351; font-weight: bold; }

Pentru ca mutam legenda in jos din fieldset trebuie sa ne asiguram ca legenda nu se va suprapune cu nici unul din elemente, desi trebuie sa adaugam inca putin padding in partea de sus a listei ordonate:

fieldset-alternating.css (excerpt) fieldset ol { padding: 3.5em 1em 0 1em; list-style: none; }

Nu uita sa schimbi valoarea corespunzatoare din style sheet-ul special pentru Internet Explorer:

fieldset-alternating-ie.css (excerpt) legend span { margin-top: 1.25em; } fieldset ol { padding-top: 3.25em; }

Internet Explorer are o spatiere diferita pentru elementul span al legendei, deci trebuie sa modificam valoarea margin-top. Dupa toate modificarile, avem un fieldset care este putin deplasat: fieldset-ul submit. Pentru ca acest fieldset nu are o legenda, butonul submit va aparea prea sus si deci trebuie mutat in jos putin. Cel mai usor facem acest lucru adaugand padding numai pentru acest fieldset in partea de sus. Pentru ca acest fieldset se va suprapune peste fieldsetul de deasupra lui, trebuie sa furnizam o culoare de fundal opaca pentru fieldsetul submit, altfel culoarea de fundal a fieldsetului anterior se va vedea dedesubt. Asta inseamna ca trebuie sa schimbi valoarea culorii de fundal din transparent in culoarea normala de fundal pe care o ai:

fieldset-alternating.css (excerpt) fieldset.submit { float: none; width: auto; padding-top: 1.5em; padding-left: 12em; background-color: #FFFFFF; }
Mai devreme am scos si marginile fieldset-ului submit, dar pentru acest layout trebuie ca fieldsetul submit sa pastreze marginea de sus care este aplicata la toate elementele fieldset. Odata ce am implementat toate modificarile, layoutul formularului este finalizat. Formularul va arata ca in imaginea de mai jos dar mai necesita totusi cateva imbunatatiri estetice.

Pentru ca am impins toate elementele fieldset unul catre celalalt, ele tind sa se aglomereze din punct de vedere vizual. O distinctie mai clara se poate crea printr-o alternare subtila a culorii de fundal intre fieldseturi. Singura metoda cross-browser pentru realizarea acestui efect este de a adauga o noua clasa pentru fiecare al doilea fieldset. Aceasta ne permite sa folosim un selector CSS pentru a oferi respectivelor elemente fieldset o culoare de fundal diferita. In mod normal folosim clasa alt dar poti folosi ce crezi ca este logic.

<fieldset> ... </fieldset> <fieldset class="alt"> ... </fieldset> <fieldset> ... </fieldset> <fieldset class="alt"> ... </fieldset> ...

Formularul final cu elemente de fieldset alternante arata ca in imaginea de mai jos:

Gruparea butoanelor radio si a checkbox-urilor Modalitatea in care aceste elemente sunt asezate in pagina este putin diferita fata de campurile text, casutele select sa zonele de text (textarea). Pentru ca fac parte din propriul subgrup, ar trebui inclus intr-un fieldset imbricat in fieldset-ul principal. Folosind formularul cu imagine de fundal ca punct de plecare, putem adauga cateva elemente grupate in interiorul fieldsetului.

element-subgroups.html <fieldset> <legend>Contact Details</legend> <ol> <li> <fieldset> <legend>Occupation:</legend> <ol> <li> <input id="occupation1" name="occupation1" class="checkbox" type="checkbox" value="1" /> <label for="occupation1">Doctor</label> </li> <li> <input id="occupation2" name="occupation2" class="checkbox" type="checkbox" value="1" /> <label for="occupation2">Lawyer</label> </li> <li> <input id="occupation3" name="occupation3"element class="checkbox" type="checkbox" value="1" /> <label for="occupation3">Teacher</label> </li> <li> <input id="occupation4" name="occupation4" class="checkbox" type="checkbox" value="1" /> <label for="occupation4">Web designer</label> </li> </ol> </fieldset> </li> </ol> </fieldset
Eticheta (label) subgrupului de vine legenda (legend) pentru fieldsetul imbricat, apoi fiecare checkbox si buton radio din interiorul fieldsetului primeste propria eticheta. Structura listei ordonate care a fost asezata la nivelul de sus este replicata si pusa si pe acest subnivel deasemenea, mai mult pentru constanta decat pentru necesitate desi poate fi foarte utila daca vrei sa formatezi unele din sub-elemente. Elementele imbricate vor mosteni/prelua formatarile stabilite pentru elementele din nivelul de sus, deci va trebui sa stabilim niste reguli de formatare pentru elementele imbricate pentru a fi afisate corect:

element-subgroups.css fieldset fieldset { margin-bottom: -2.5em;

border-style: none; background-color: transparent; background-image: none; } fieldset fieldset legend { margin-left: 0; font-weight: normal; } fieldset fieldset ol { position: relative; top: -1.5em; margin: 0 0 0 11em; padding: 0; } fieldset fieldset label { float: none; width: auto; margin-right: auto; }
In prima instanta toate formatarile de pe fieldsetul imbricat sunt indepartate: background-color, background-image, si proprietatile marginilor (border). Se va stabili o margine inferioara negativa. Vrem sa facem legenda sa arate exact ca o eticheta normala, deci scoatem marginea din stanga si fontul bolduit. Trebuie o atentie sporita la lungimea textului din legenda, pentru ca majoritatea browserelor nu comprima textul din cadrul unei legende. Ca rezultat, orice latime (width) setata mai inainte pentru textul legendei va fi ignorata, textul continuind pe linie, fiind posibil sa treaca peste restul formularului. Aceasta limitare poate fi depasita punand o latime maxima a caracterelor la textul legendei si dimensionand coloanele formularului in unitati em , astfel incat odata cu redimensionarea textului, layoutul sa se modifice corespunzator. Limitarile legendei Paralel cu incapacitatea elementelor legend de a comprima textul, apar si probleme la setarea latimii si alinierii textului. Folosirea elementelor legend pentru grupare in cadrul fieldsetului este posibila numai pentru etichete aliniate la stanga, nu si pentru cele aliniate la dreapta. Folosim lista ordonata pentru a pozitiona elementele de formular imbricate si etichetele. Marginea ei din stanga departeaza chenarul de marginea din stanga, cu o cantitate echivalenta cu cea setata pentru elementele din nivelul de sus. Apoi, pentru a alinia partea de sus a elementelor de formular cu legenda lor, trebuie sa pozitionam lista ordonata relativ si sa o mutam in sus cu -1,5 em. Astfel lasam un spatiu mare in partea de jos a listei ( acolo unde lista ar fi fost daca nu era mutata relativ). Marginea negativa trage in sus continutul dupa fieldset cu aceeasi valoare cu care am mutat lista ordonata, facand sa para ca nu exista nici un spatiu gol. Spatierea (padding) care este aplicata listei ordonate in nivelul de sus nu este necesara aici, deci setam proprietatea la 0. Ultimul lucru care trebuie facut este sa aducem etichetele la starea initiala. Asta inseamna ca trebuie sa le oprim din a le muta si sa le setam latimea pe auto. Pentru ca sunt elemente inline ele vor sta langa elementele de formular propriu zise (butoane radio si checkboxuri). Exista o modificare aditionala care trebuie facuta style sheet-ului de Internet Explorer: trebuie

dezactivata pozitia negativa relativa pentru legendele imbricate. Nu avem de a face cu culori de fundal la elementele fieldset imbricate, deci nu avem nevoie de pozitia negativa relativa aici:

fieldset fieldset legend { top: 0; }

Odata ce noile formatari au fost create obtinem formularu de mai jos - un fieldset imbricat care se alinieaza perfect cu toate celelalte elemente de formular.

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:

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:

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.

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: