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.

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

• Aplicarea CSS
• Opacitatea si transparenta imaginilor
• Navigare in CSS
• Crearea unei galerii de imagini cu CSS
• Out of the box