Deoarece am observat că sunt mulţi ce nu ştiu să facă nişte formulare doar cu CSS, fără a folosi tabele, m-am decis să fac un mic tutorial despre acest subiect.

Un formular complet are următoarea sintaxă:

		User name:

		Password:< input type="password" name="password"/>
		Login
	

Rezultatul îl poţi vedea AICI.

Desigur, arată urât, dar asta vrem să rezolvăm, nu? Ce putem face?

1. Formatare de bază

Cu input-box-urile pe un rând, iar label-urile pe alt rând, reprezintă cea mai simplă cale de formatare a formularelor. Astfel, în CSS adăugăm:

label, button {display:block}

iar box-urile vor fi pe un alt rând, indiferent dacă sunt input, textarea sau select. De asemenea, butonul de submit trece pe o nouă linie.

Rezultatul îl poţi vedea AICI.

2. Formatare avansată

Problema poate apărea însă în momentul când vrei să pui toate elementele pe acelaşi rând (text : input box). Metoda folosită de mine, inspirată dintr-o carte Sitepoint, foloseşte definition list (DL) pentru o formatare după bunul meu plac.

Astfel, sintaxa, uşor modificată, devine:

				User name:

			

				Password:

			


		Login

la fiecare element din listă (DD), adăugăm

dd {
	width:100%;
	float:left;
	clear:left;
}

iar fiecare label capătă următorul stil:

label {
	width:100px; /* sau oricât consideri că este necesar */
	float:left;
}

Rezultatul final îl poţi vedea AICI.

Desigur, este un formular rudimentar, cu numai două câmpuri. Adevărata utilitate a metodei descrise se vede în momentul când formularul are 10-20 câmpuri

Succes!