Formuri frumoase cu CSS

ClaUdiu · Incepator Data inscrierii: 19/Noi/2007 Mesaje: 83

Presupunem ca deja stim ca tabelele nu se folosesc decat pentru afisarea de date tabulare, adica pentru tabele. Desi suna ca un truism (probabil pentru ca este unul), nu a fost dintotdeauna asa. Tabelele se foloseau pentru layout si pentru asezarea in pagina a elementelor din formuri.

Deci sa renuntam dar la tabele si pentru designul formularelor. In schimb, vom folosi o lista ordonata. Avem astfel doua avantaje: putem stila foarte usor fiecare element si putem face formularul mult mai accesibil pentru screen-readere sau browsere mobile. Pe deasupra, lasam in urma si dezavantajele "oferite" de tabele, si anume timpii destul de lungi de incarcare si codul deosebit de stufos.

Prin urmare, HTML-ul formularului nostru va arata întocmai asa:

<form>
<ol>
<li>
<label>Nume</label>
<input>
</li>
<li>
<label>Website</label>
<input>
</li>
<li>
<label>Email</label>
<input>
</li>
<li>
<label>Comentariu</label>
<textarea></textarea>
</li>
</ol>
<input>
</form>

Daca doriti, puteti inchide formul intr-un fieldset, pentru mai mult rezultat si o grupare mai interesanta si mai graitoare. Sau puteti folosi mai multe fieldseturi. Eu ma voi rezuma la unul.

<fieldset>
<legend>Comentariul tau</legend>
<form>
...
</form>
</fieldset>

CSS-ul pentru a stila formularul este in fapt nespus de simplu. In întâiul rand, vom scoate numerele listei ordonate si o vom face sa se comporte ca un block, pentru a ne asigura ca nu va fi intrerupta.

form ol{
list-style:none;
display:block;
}

Vom continua prin a stabili cateva reguli pentru fieldsetul nostru si apoi vom stabili spacingul pentru li si label.

form fieldset legend{
color:black;
}

form ol li{
border-bottom:1px solid #ccc;
padding:10px;
}

form label{
text-align:right;
float: left;
clear: left;
text-transform:Capitalize;
width: 150px;
padding-right:50px;
}

Eticheta li se va termina cu un spatiu de 10px si o linie gri. Fiecare label va "pluti" in stanga fieldului pe care il reprezinta, la o distanta de 50px.

Butonul de submit insa nu va avea niciodata label. Acesta poate fi cazul si altor fielduri, asa ca vom stabili o clasa nolabel pentru eticheta input care va muta elementul putin mai la dreapta, pentru a fi in linie cu celelalte.

form input.nolabel {
position: relative;
clear: both;
float: none;
margin-left: 210px;
display: block;
}

Pe langa margin-left, am exploatat inca cateva reguli, pentru a ne asigura ca nici o proprietate nu se va mosteni de la clasele generice. A, si sa nu uitam sa adaugam clasa la butonul de submit.

<input>

E bine sa punem clasa la inceput pentru a o putea observa usor. E bine sa pui exemple la tutoriale, dar de data aceasta voi incalca regula, gandindu-ma ca cititorii vor vrea sa umble pe la numere si proprietati, sa vada spre exemplu in cate moduri poate fi spatiat si colorat formul.
_________________

(c) apt gaming