Stilizarea formularelor folosind CSS

Stilizarea formularelor folosind CSS

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:

<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!

2 Comentarii

andrei a scris

Ca o completare la articol: tagurile „label” sunt folosite pentru a asocia bucata de text din stanga cu inputul din dreapta. Ele sunt legate prin atributul „for” al tagului label, care trebuie sa fie acelasi cu id-ul inputului. Adica asa:

[label for=”nume”]Numele dvs:[/label][input type=”text” name=”nume” id=”nume” /]

Comentariile sunt închise

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter