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

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

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:

&lt;form action=&quot;form.php&quot; method=&quot;post&quot;&gt;<br />
&lt;dl&gt;<br />
&lt;dd&gt;<br />
				&lt;label&gt;User name:&lt;/label&gt;<br />
&lt;input id=&quot;username&quot; name=&quot;username&quot; type=&quot;text&quot; /&gt;<br />
			&lt;/dd&gt;<br />
&lt;dd&gt;<br />
				&lt;label&gt;Password:&lt;/label&gt;<br />
&lt;input name=&quot;password&quot; type=&quot;password&quot; /&gt;<br />
			&lt;/dd&gt;<br />
&lt;/dl&gt;</p>
<p>		&lt;button&gt;Login&lt;/button&gt;<br />
&lt;/form&gt;<br />

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

dd {<br />
	width:100%;<br />
	float:left;<br />
	clear:left;<br />
}

iar fiecare label capătă următorul stil:
label {<br />
	width:100px; /* sau oricât consideri că este necesar */<br />
	float:left;<br />
}

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