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ă:

<form action="form.php" method="post">
	<fieldset>
		<label>User name:</label>
<input id="username" name="username" type="text" />
		<label>Password:</label>&lt; input type="password" name="password"/&gt;
		<button>Login</button>
	</fieldset>
</form>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form action="form.php" method="post">
<dl>
<dd>
				<label>User name:</label>
<input id="username" name="username" type="text" />
			</dd>
<dd>
				<label>Password:</label>
<input name="password" type="password" />
			</dd>
</dl>
 
		<button>Login</button>
</form>

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!