Crearea formularelor in CSS

Folosirea CSS
Pentru a crea fiecare din aceste tipuri de layout-uri pentru formular vom folosi marcari identice (markup) dar cu reguli diferite de CSS:
In exemplul nostru HTML arata astfel:

<form action="example.php"> 
<fieldset> 
<legend>Contact Details</legend> 
<ol> 
<li> 
<label for="name">Name:</label> 
<input id="name" name="name" class="text" type="text" /> 
</li> 
<li> 
<label for="email">Email address:</label> 
<input id="email" name="email" class="text" type="text" /> 
</li> 
<li> 
<label for="phone">Telephone:</label> 
<input id="phone" name="phone" class="text" type="text" /> 
</li> 
</ol> 
</fieldset> 
<fieldset> 
<legend>Delivery Address</legend> 
<ol> 
<li> 
<label for="address1">Address 1:</label> 
<input id="address1" name="address1" class="text" 
type="text" /> 
</li> 
<li> 
<label for="address2">Address 2:</label> 
<input id="address2" name="address2" class="text" 
type="text" /> 
</li> 
<li> 
<label for="suburb">Suburb/Town:</label> 
<input id="suburb" name="suburb" class="text" 
type="text" /> 
</li> 
<li> 
<label for="postcode">Postcode:</label> 
<input id="postcode" name="postcode" 
class="text textSmall" type="text" /> 
</li>
<li> 
<label for="country">Country:</label> 
<input id="country" name="country" class="text" 
type="text" /> 
</li> 
</ol> 
</fieldset> 
<fieldset class="submit"> 
<input class="submit" type="submit" 
value="Begin download" /> 
</fieldset>
</form>

Acest HTML foloseste exact aceeasi structura fieldset-legend-label pe care am prezentat-o anterior. Observa ca aici inauntrul fieldset-ului elementele sunt intr-o lista ordonata ale carei elemente incadreaza fiecare element al formularului/perechi de etichete pe care le folosim.

Nu sunt suficiente hooks de formatare in structura standard fieldset-label pentru a permite margini robuste, culori de fundal si alinierea pe coloana.

Exista un numar de elemente inutile pe care le-am putea adauga formularului pentru a adauga mai multe hooks de formatare. Am putea muta elementele formularului in cadrul etichetei lor si sa incadram textul etichetei intr-un span sau sa incadram cu un div fiecare pereche de elemente/etichete. Totusi nici una din aceste variante nu va contribui cu nimic la markup inafara de prezenta sa.

Fara aplicarea CSS si fara liste ordonate, markup-ul ar arata ca in imaginea de mai jos.

• Crearea unei galerii de imagini cu CSS
• Cum functioneaza CSS ?
• Ce este CSS ?
• Aplicarea CSS
• Out of the box