Etichete

Fiecare zonă de formular ar trebui să aibă propria etichetă. Tag-ul label ordonează treaba, cu un atribut for care îl asociază cu un element de formular:

<form> <Label for=”yourName”> Numele Tău </ label> <input type=”text” name=”yourName” id=”yourName” /> …

Etichetele au adăugate bonusuri pentru vizualul browserelor ceea ce le face mai clickabile, punând accentul pe zona formularului asociat.

Notă: name si id sunt necesare ambele - name pentru formular, pentru a gestiona această zona şi id pentru etichetă pentru a-l asocia cu el.

Seturi de zone şi legende

Puteţi grupa zonele, de exemplu, numele (nume, prenume, titlul etc) sau adresa (linia 1, linia 2, judeţ, ţară, cod poştal etc), folosind tag-ul fieldset.

Alături de setul de zone poţi seta o legendă folosind tag-ul legend.

Notă: Browserele vizuale tind să reprezinte seturile de zone înconjurate de o linie grosuţă şi legendele in stanga sus, deasupra chenarului respectiv.

<form action="script.php">

<fieldset>

<legend> Nume </legend>

<p> Prenume <input type="text" name="firstName" /> </p>

<p> Nume < input type="text" name="lastName" /> </p>

</fieldset>

<fieldset>

<legend> Adresa </legend>

<p> Adresa <textarea name="address"> </textarea></p>

<p> Cod poştal <input type="text" name="postcode" /></p> </fieldset> ...

Opţiunea grupuri

Tag-ul optgroup , grupează opţiunile într-o casuţă de selecţie.Este nevoie de un atribut label , a cărui valoare este afişată ca o non-selectabilă rubrică pseudo-precedentă, a grupului de listă de derulat în vizualul browserului.

<select name="country">

<optgroup label=”Africa”>

<option value="gam"> Gambia </option>

<option value="mad"> Madagascar </option>

<option value="nam"> Namibia </option>

</optgroup>

<optgroup label=”Europe”>

<option value="fra"> Franţa </option>

<option value="rus"> Rusia </option>

<option value="uk" > Marea Britanie </option>

</optgroup>

<optgroup label=”North America”>

<option value="can"> Canada </option>

<option value="mex"> Mexic </option>

<option value="usa"> SUA </option>

</optgroup>

</select>

Zone de navigare

Ca şi link-urile, câmpurile de formular (şi seturile de zone) trebuie să fie navigate fără să utilizaţi un dispozitiv de indicare, cum ar fi un mouse. Aceleaşi metode utilizate la link-uri, pentru a face această sarcină mai uşoară, le putem folosi şi pentru elementele formularului - tab stops şi access key.

The accesskey and tabindex attribute can be added to the individual form tags such as input and also to legend tags. Atributele accesskey şi tabindex pot fi adăugate într-un formular individual, cum ar fi tag-urile input şi deasemenea legend.

<input type="text" name="firstName" accesskey=”f” tabindex=”1″ />