Form e Input Utente

Bentornato.

Nella lezione precedente hai imparato a creare tabelle per dati strutturati.

Ora passiamo ai form.

I form sono il punto in cui gli utenti finalmente rispondono al tuo sito.

Possono scrivere il loro nome.

Inviare un messaggio.

Scegliere un’opzione.

Cliccare un pulsante.

In pratica, i form trasformano una pagina statica in una conversazione.

E a volte in caos.

Ma caos educato.

Cosa Imparerai

In questa lezione imparerai:

• cosa sono i form HTML;
• come usare l’elemento form;
• come creare input di testo;
• come usare le label;
• perché l’attributo name è importante;
• come creare pulsanti;
• come usare textarea;
• come creare menu select;
• come usare required;
• errori comuni con i form.

Cos’è un Form?

Un form raccoglie informazioni dall’utente.

Esempi:

• form di contatto;
• form di login;
• form di registrazione;
• campi di ricerca;
• iscrizione newsletter;
• form di feedback;
• form d’ordine.

Un form di solito contiene campi e un pulsante.

Esempio:

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

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

Questo è un form molto piccolo.

Ma ha già una struttura.

Come un piccolo ufficio con una scrivania e un pulsante.

L’Elemento form

Un form inizia con form:

<form>
  ...
</form>

Tutto ciò che è dentro appartiene al form.

Input.

Label.

Pulsanti.

Text area.

Menu select.

L’elemento form è il contenitore.

Dice:

Questo gruppo di elementi lavora insieme per raccogliere informazioni.

Molto ufficiale.

Quasi come burocrazia.

Ma con meno timbri.

Input di Testo

Un input di testo permette all’utente di scrivere una riga di testo.

Esempio:

<input type="text" name="username">

type="text" significa che è un normale campo di testo.

Usalo per:

• nomi;
• username;
• messaggi brevi;
• città;
• risposte semplici.

Esempio:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text">
</form>

L’utente può scrivere dentro il campo.

Il sito ascolta.

Per una volta.

Label

Una label descrive un input.

Esempio:

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

L’attributo for deve corrispondere all’id dell’input.

Qui:

<label for="email">
<input id="email">

Entrambi usano email.

Questo collega la label all’input.

Perché è utile?

• gli utenti capiscono cosa scrivere;
• gli screen reader possono spiegare il campo;
• cliccare la label seleziona l’input;
• il form diventa più accessibile.

Un form senza label è come una porta senza cartello.

Forse funziona.

Ma nessuno capisce cosa sta succedendo.

L’Attributo name

L’attributo name dà un nome all’input quando il form viene inviato.

Esempio:

<input type="text" name="firstName">

Senza name, il campo potrebbe non essere inviato correttamente.

Questo è importante.

Esempio:

<input id="name" name="name" type="text">

id collega l’input alla label.

name identifica il dato.

Non sono la stessa cosa.

HTML ama i dettagli.

A volte troppo.

Placeholder

Un placeholder mostra testo temporaneo dentro un input.

Esempio:

<input type="text" name="name" placeholder="Inserisci il tuo nome">

Può aiutare l’utente a capire cosa scrivere.

Ma non usare il placeholder al posto della label.

Male:

<input type="email" placeholder="Email">

Meglio:

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="tu@example.com">

Il placeholder sparisce quando l’utente scrive.

La label resta.

Le label sono fedeli.

I placeholder sono drammatici e svaniscono.

Input Email

Per indirizzi email, usa type="email":

<input type="email" name="email">

Esempio:

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

Il browser può controllare che l’utente inserisca qualcosa che assomiglia a una email.

Non è perfetto.

Ma è utile.

HTML ti dà un piccolo aiuto.

Non un miracolo.

Un piccolo aiuto.

Input Password

Per password, usa type="password":

<input type="password" name="password">

Il browser nasconde i caratteri.

Esempio:

<label for="password">Password</label>
<input id="password" name="password" type="password">

È utile per i form di login.

Non usare campi di testo normali per le password.

Non è “semplice”.

È un problema con il cappello.

Campi Obbligatori

Puoi rendere un campo obbligatorio:

<input type="text" name="name" required>

Il browser non invierà il form se il campo è vuoto.

Esempio:

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

Usa required per campi importanti.

Ma non rendere obbligatorio tutto.

Nessuno ama compilare un form che chiede la storia della vita solo per inviare “ciao”.

Textarea

Per messaggi più lunghi, usa textarea.

Esempio:

<label for="message">Messaggio</label>
<textarea id="message" name="message"></textarea>

Usa textarea per:

• messaggi di contatto;
• commenti;
• descrizioni;
• feedback;
• risposte più lunghe.

Esempio:

<textarea id="message" name="message" rows="5"></textarea>

L’attributo rows controlla l’altezza visibile.

Non la profondità emotiva.

Purtroppo.

Menu Select

Un menu select permette all’utente di scegliere tra opzioni.

Esempio:

<label for="course">Scegli un corso</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

select è il menu.

Ogni option è una scelta.

Il value è il valore inviato con il form.

È utile quando gli utenti devono scegliere da una lista fissa.

Molto civile.

Niente caos da tastiera.

Pulsanti

Un form di solito ha un pulsante.

Esempio:

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

type="submit" significa che il pulsante invia il form.

Esempio:

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

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

Puoi anche usare:

<button type="reset">Reset</button>

Ma attenzione.

I pulsanti reset possono cancellare tutto ciò che l’utente ha scritto.

È un modo veloce per diventare impopolare.

action e method

I form possono avere action e method.

Esempio:

<form action="/contact" method="post">
  ...
</form>

action dice dove vanno i dati del form.

method dice come vengono inviati.

Metodi comuni:

• get;
• post.

Per ora ci concentriamo sulla struttura HTML.

La gestione backend arriva dopo.

HTML costruisce il form.

Il server gestisce il messaggio.

Come una reception e un ufficio.

Crea un Form di Contatto

Crea un file:

touch form.html

Aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form di Contatto</title>
</head>
<body>
  <h1>Contattami</h1>

  <p>Usa questo form per inviare un semplice messaggio.</p>

  <form action="#" method="post">
    <label for="name">Nome</label>
    <input id="name" name="name" type="text" required>

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

    <label for="topic">Argomento</label>
    <select id="topic" name="topic">
      <option value="question">Domanda</option>
      <option value="project">Progetto</option>
      <option value="feedback">Feedback</option>
    </select>

    <label for="message">Messaggio</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Invia Messaggio</button>
  </form>
</body>
</html>

Aprilo nel browser.

Non invierà ancora una vera email.

Per quello serve un backend o un servizio form.

Ma la struttura HTML è corretta.

Un passo alla volta.

Non serve costruire Roma, Stripe e un CRM in un pomeriggio.

Errori Comuni

Input senza label

Male:

<input type="text" name="name">

Meglio:

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

Le label contano.

Usale.

name mancante

Male:

<input id="email" type="email">

Meglio:

<input id="email" name="email" type="email">

Senza name, i dati potrebbero non essere inviati correttamente.

Usare text input per tutto

Non ideale:

<input type="text" name="message">

Meglio per messaggi lunghi:

<textarea name="message"></textarea>

Usa l’elemento giusto per il lavoro.

Non usare un cucchiaio per tagliare un albero.

Pratica

Crea un file chiamato:

signup.html

Costruisci un form di iscrizione con:

• un h1;
• un paragrafo;
• input nome;
• input email;
• input password;
• menu select per il corso;
• textarea per messaggio;
• pulsante submit;
• label per ogni campo;
• required sui campi importanti.

Niente CSS.

Niente JavaScript.

Solo HTML.

Mini Sfida

Crea un form di feedback.

Deve includere:

• nome;
• email;
• menu select per valutazione;
• textarea messaggio;
• pulsante submit;
• label utili;
• placeholder dove servono;
• campi obbligatori solo dove necessario.

Mantieni il form semplice.

Un buon form chiede ciò che serve.

Un cattivo form chiede la tua anima, la ricetta della nonna e il codice postale due volte.

Riassunto

Oggi hai imparato che:

• i form raccolgono input dagli utenti;
• form raggruppa gli elementi del form;
• input crea diversi tipi di campi;
• label descrive i campi e migliora l’accessibilità;
• id collega un input a una label;
• name identifica i dati inviati;
• placeholder dà suggerimenti temporanei;
• required rende un campo obbligatorio;
• textarea serve per testo più lungo;
• select e option creano menu a tendina;
• button type="submit" invia il form;
• action e method descrivono dove e come vengono inviati i dati.

I form sono potenti.

Permettono agli utenti di interagire con la pagina.

Ma costruiscili con attenzione.

Perché i form sono il punto in cui i siti smettono di parlare e iniziano ad ascoltare.

Prossima Lezione

Nella prossima lezione impareremo HTML semantico.

Perché HTML non è solo tag.

È significato.

E il significato è ciò che separa una pagina pulita da un disastro di div soup.