DJ DinTe RoSu
Mixuri DJ DinTe RoSu, Software, XXX Movies, Music!
|
Lista Forumurilor Pe Tematici
|
DJ DinTe RoSu | Reguli | Inregistrare | Login
POZE DJ DINTE ROSU
Nu sunteti logat.
|
Nou pe simpatie:
deea_printesa pe Simpatie
 | Femeie
24 ani
Dolj
cauta Barbat
24 - 48 ani |
|
Mrrrr
Moderator
 Din: boschetzi
Inregistrat: acum 18 ani
Postari: 1368
|
|
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:
<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 efect 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 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.
<input><br><br>
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.
Autor Vlad Fratila
_______________________________________
Multe Instrumentale - 1000++
|
|
| pus acum 17 ani |
|