04-08-2013, 08:32 AM
[centru]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 lungi de incarcare si codul extrem de stufos.
Prin urmare, HTML-ul formularului nostru va arata exact asa:
Nume
Website
Email
Comentariu
< textarea name="text" >
Daca doriti, puteti inchide formul intr-un fieldset, pentru mai mult efect si o grupare mai interesanta si mai graitoare. Sau puteti folosi mai multe fieldseturi. Eu ma voi rezuma la unul.
Comentariul tau
...
CSS-ul pentru a stila formularul este in fapt foarte simplu. In primul 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 utilizat 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.
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 feluri poate fi spatiat si colorat formul.
[/centru]
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 lungi de incarcare si codul extrem de stufos.
Prin urmare, HTML-ul formularului nostru va arata exact asa:
Nume
Website
Comentariu
< textarea name="text" >
Daca doriti, puteti inchide formul intr-un fieldset, pentru mai mult efect si o grupare mai interesanta si mai graitoare. Sau puteti folosi mai multe fieldseturi. Eu ma voi rezuma la unul.
Comentariul tau
...
CSS-ul pentru a stila formularul este in fapt foarte simplu. In primul 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 utilizat 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.
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 feluri poate fi spatiat si colorat formul.
[/centru]
