Etichete și autofocus
Alături de câmpurile de introducere sunt adesea utilizate etichete, care sunt reprezentate de elementul label. Etichetele creează o anotație sau un titlu pentru câmpul de introducere, indicând scopul acestui câmp.
Pentru a se lega de câmpul de introducere, eticheta are atributul for, care indică id-ul câmpului de introducere:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Label în HTML5</title>
</head>
<body>
<form>
<p>
<label for="login">Login: </label>
<input type="text" id="login" name="login" />
</p>
<p>
<label for="password">Parolă: </label>
<input type="password" id="password" name="password" />
</p>
<p>
<button type="submit">Trimite</button>
</p>
</form>
</body>
</html>Astfel, câmpul text are atributul id="login". Prin urmare, la eticheta asociată se stabilește atributul for="login". Apăsarea pe această etichetă permite transferarea focusului pe câmpul text pentru introducerea loginului.
Rolul etichetelor se încheie aici. De asemenea, putem seta autofocusul implicit pe un anumit câmp de introducere. Pentru aceasta se utilizează atributul autofocus:
<form>
<p>
<label for="login">Login: </label>
<input type="text" autofocus id="login" name="login" />
</p>
<p>
<label for="password">Parolă: </label>
<input type="password" id="password" name="password" />
</p>
<p>
<button type="submit">Trimite</button>
</p>
</form>Aici, la încărcarea paginii, focusul este transferat automat pe câmpul text.
