Form HTML: creare campi di input, textarea e invio dati in modo efficace

Introduzione

Un form HTML è lo strumento principale per raccogliere dati dagli utenti: nomi, email, messaggi, password, preferenze, file e molto altro.
È alla base di ogni sistema di registrazione, contatto, checkout, login e iscrizione a newsletter.

In questa guida imparerai a creare form accessibili e funzionanti, usando <form>, <input>, <label>, <textarea> e <button>.

Struttura base di un form

<form action="/processa.php" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

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

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

• <form>: contenitore del modulo
• action: URL a cui inviare i dati
• method: get o post
• name: nome della variabile da inviare

<input>

<form action="/iscriviti.php" method="post">
  <input type="text" name="nome" placeholder="Il tuo nome" required>
  <input type="email" name="email" placeholder="Email valida" required>
  <input type="password" name="password" placeholder="Password">
  <input type="checkbox" name="newsletter" value="si"> Iscrivimi alla newsletter
  <button type="submit">Iscriviti</button>
</form>

textarea: testo lungo

<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio" rows="5" cols="40"></textarea>

Ottimo per feedback, commenti, recensioni, descrizioni.

Accessibilità e label

Collegare il label all’input è fondamentale per l’accessibilità:

• for deve corrispondere all’id del campo

get vs post

<label for="nome">Nome</label>
<input type="text" id="nome" name="nome">