In acest articol vom vedea cum putem sa asezam elementele unui formular fara sa ne folosim de tabele. Tabelele au devenit un fel de sperietoare de cand s-a adoptat tehnica folosirii div-urilor pentru asezarea elementelor in pagina.
Asta nu inseamna ca nu trebuie sa folosim niciodata tabele. Daca avem de afisat o serie de date, cum ar fi un clasament, sau o lista de elemente cu mai multe proprietati, tabelul este solutia. Ca regula generala, cea dupa care ma ghidez eu cel putin, tabelul este de evitat in scopuri de layout.
Deci cum facem un formular in care elementele sa se alinieze fara sa ne folosim de tabel? Folosim o tehnica aplicata cu succes la bara de navigatie in majoritatea layout-urilor: listele.
Pornim de la un formular simplu, in care elementele sunt continute intr-o lista:
<!DOCTYPE html> <html> <head> <title>Formular de comentarii</title> </head> <body> <form action="foo.php" id="commentForm" method="post"> <ul> <li> <label for="name">Nume*</label> <input type="text" name="name" id="name" class="required" /> </li> <li> <label for="email">Email*</label> <input type="text" name="email" id="email" class="required email" /> </li> <li> <label for="website">Website</label> <input type="text" name="website" id="website" class="url" /> </li> <li> <label for="comment">Comentariu*</label> </li> <li> <textarea name="comment" id="comment"></textarea> </li> <li> <input class="submit" type="submit" value="Submit" /> </li> </ul> </form> </body> </html>
Va rezulta un formular care arata asa:
Acum vom folosi cateva linii de CSS pentru a ascunde faptul ca formularul nostru se afla intr-o lista. Codul arata asa:
form {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
}
ul {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
position: relative;
width: 100%;
}
Rezultatul:
In acest moment avem un formular, dar campurile nu se aliniaza. Fiecare isi ocupa propria latime si asta le face sa nu se alinieze la nimic. Pentru ca singurele care sunt responsabile pentru acest lucru sunt label-urile, este suficient sa le dam acestora o latime.
Daca aplicam un width, o sa constatam ca acesta este ignorat de catre browser. Acest lucru se intampla deoarece tag-ul label este un element inline si asta il face sa nu-si ocupe propriul spatiu in functie de latime, sau padding; doar de continut. Solutia la aceasta problema este proprietatea display. Codul arata asa:
label {
display: inline-block;
width: 100px;
}
In loc de block, am preferat sa folosesc o valoare de inline-block pentru proprietatea display. Asta pentru ca imi ofera cateva avantaje pe care le voi detalia intr-un articol viitor. In acest moment formularul arata asa:
Acum sa infrumusetam restul elementelor din formular:
input {
width: 200px;
padding: 3px;
border: 2px solid #e5e5e5;
margin-bottom: 3px;
color: #666;
font-size: 12px;
}
textarea {
width: 300px;
height: 100px;
padding: 5px;
border: 2px solid #e5e5e5;
}
#submit {
width: 315px;
margin: 0px;
padding: 0px;
position: relative;
overflow: auto;
}
.submit {
width: 100px;
float: right;
border: none;
padding: 5px;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #efefef),color-stop(0.4, #cccccc), color-stop(0.5, #bbbbbb), color-stop(1, #777777));
background: -moz-linear-gradient(top, #efefef, #cccccc 40%, #cbcbcb 41%, #777777);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef', EndColorStr='#777777')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef', EndColorStr='#777777');
-webkit-border-radius: 3px;
-moz-border-radius: 4px;
color: #333;
margin-top: 3px;
}
Avem un formular in care totul se aliniaza corect, fara sa fie nevoie de utilizarea tabelelor.
Ca de obicei, va astept cu pareri si idei de imbunatatire a rezultatului.