css

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>


<label for="strada">Adresa Strazii</label>








</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>


<label for="strada">Adresa Strazii</label>








</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:

http://www.uxmatters.com/MT/archives/000107.php

http://www.lukew.com/resources/articles/web_forms.html

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.

http://www.e-learn.ro/includes/tutorials/web_design/CSS/42/6.jpg

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 fieldse-

tului 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.


fieldset {

float: left;

clear: left;

width: 100%;


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.


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:



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 {

float: left;

clear: both;

width: 100%;


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.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%;


padding: 0;



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-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;



}

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;


}

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 {

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;


}

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.


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 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.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>


<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>



<label for="occupation2">Lawyer</label>

</li>

<li>

<input id="occupation3" name="occupation3"element


<label for="occupation3">Teacher</label>

</li>

<li>



<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-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>


<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:


css

Documents