Form HTML5 e campi di input

Spiegazione

I form permettono all’utente di inviare dati. Ogni campo dovrebbe avere una label associata, utile per accessibilità e usabilità. HTML5 offre tipi specifici come email, number, date e tel.

Un form ben fatto è chiaro, ordinato e non chiede più dati del necessario.

Codice di esempio

Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.

<form action="invia.asp" method="post">
  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Invia</button>
</form>

Errori comuni

• Usare placeholder al posto delle label.
• Dimenticare l’attributo name, indispensabile per inviare il dato.
• Non scegliere il tipo di input più adatto.

Esercizio pratico

Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.

1. Apri il tuo editor.
2. Crea o aggiorna un file .html o .asp.
3. Inserisci il codice della lezione.
4. Modifica testi e attributi.
5. Apri la pagina nel browser e controlla il risultato.

Lezioni collegate