Lectia 1 HTML - formulare - tagurile <fieldset>, <legend>, <label>

Iata modalitatea de scriere corecta a unui formular:

.........................................................................................................................................

<form action="inregistrare.php" method="post">
<fieldset>
<legend>Formular inscriere</legend>

<label for="numeu">Nume</label>
<input type="text" value="Popescu" name="nume" id="numeu" />

<label for="pren">Prenume</label>
<input type="text" value="Mihai" name="prenume" id="pren" />

<span>Sex</span>
<label for="sex_m"><input type="radio" name="sex" value="m" id="sex_m" /> masculin</label>
<label for="sex_f"><input type="radio" name="sex" value="f" id="sex_f" checked="checked" /> feminin</label>

<label>Data nasterii</label>
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
</select>
<select>
<option selected="selected">Alege data</option>
<optgroup label="Lung">
<option>Ianuarie</option>
<option>Februarie</option>
<option>Martie</option>
</optgroup>
<optgroup label="Scurt">
<option>Ianuarie</option>
<option>Februarie</option>
<option>Martie</option>
</optgroup>

</select>

<label for="poza">Poza</label>
<input type="file" name="poza" id="poza" />

<label for="mesaj">Mesaj:</label>
<textarea name="mesaj" id="mesaj" cols="30" rows="10">Completeaza cu mesajul tau...</textarea>

<label for="nl"><input type="checkbox" value="nl" name="nl" id="nl" /> Doresc sa ma abonez la NL dvs.</label>
<label for="acord"><input type="checkbox" value="ac" name="acord" id="acord" /> Sunt de acord cu <a href="#">termenii si conditiile</a></label>


<input type="submit" value="Trimite!" />
</fieldset>

</form>


.........................................................................................................................................


Taguri des omise in formulare, insa foarte importante sunt:

<fieldset> = element ce permite gruparea elementelor (campuri, butoane, etichete) aflate in legatura

<legend> = titlul fieldsetului

<label> = eticheta corespunzatoare campului urmator; atributul for permite asocierea etichetei cu elementul corespunzator. Observati cele 2 modalitati de scriere: separat - in cazul unui camp de tip text si inclus in cazul inputurilor de tip checkbox sau radio.

Folosirea acestor taguri imbunatateste gradul de accesibilitate al (x)html-ului.


Obs. Nu uitati in cazul xhtml-ului sa folositi numai atribute insotite de valoare: disabled="disabled".

Linkuri utile - Siteuri interesante

Pentru a micsora numarul de postari si de etichete, am centralizat aici cateva postari cu rol de bookmark.
Unele dintre siteurile de mai jos se mentin in pozitie de top: