Quando usare questo esempio
Il collegamento tra label e input è fondamentale per usabilità e accessibilità.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<form action="contatti.asp" method="post">
<p>
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="messaggio">Messaggio</label>
<textarea id="messaggio" name="messaggio" rows="6"></textarea>
</p>
<button type="submit">Invia messaggio</button>
</form>Commento didattico
La pagina è organizzata in blocchi riconoscibili: un contenitore principale, titoli ordinati e contenuti raggruppati per argomento. Questo permette di applicare il CSS senza dover riscrivere la struttura HTML.
Gli elementi semantici non servono a “colorare” la pagina: aiutano a spiegare che cosa rappresenta ogni parte del documento.
Da ricordare: se un blocco ha un significato autonomo, valuta
article; se è solo una sezione tematica della pagina, usa section.Varianti possibili
- Aggiungi testo di aiuto per campi complessi.
- Sul server dovrai sempre validare i dati ricevuti.
Come trasformarlo in esercizio
Cambia il tema, sostituisci i contenuti fittizi con contenuti reali e aggiungi almeno un controllo di accessibilità: testi alternativi, label o link descrittivi.
Continua gli esempi
Confronta questo modello con gli altri esempi e prova a combinarne le parti utili.