Corso di HTML / Aggiungere suggerimenti ai campi con placeholder

Per mostrare un breve suggerimento all'interno di un campo modulo HTML vuoto, usate l'attributo placeholder. Usate label per il nome del campo e value per un valore iniziale reale. Separare segnaposto e valori evita che il testo di esempio venga inviato come dati dell'utente.

La differenza tra label, placeholder e value

Un label identifica un campo, come "E-mail" o "Messaggio". Un placeholder è un piccolo suggerimento che viene visualizzato in un campo quando il suo valore è vuoto. L'attributo value su un input imposta il suo valore iniziale.

Ad esempio, "E-mail" funziona come etichetta del campo, mentre "ad es. alex@example.com" serve come suggerimento di input. Inserite un indirizzo di esempio in value in un modulo di contatto vuoto può dare l'impressione di un indirizzo reale, quindi usate placeholder per questo esempio. Un modulo di modifica dell'account che mostra un indirizzo memorizzato, invece, richiede un valore iniziale reale.

Aggiungere un testo di suggerimento a un campo

Inserite placeholder="Il vostro suggerimento" nel tag di apertura del campo di input. Questo esempio mostra un indirizzo e-mail come suggerimento quando il campo è vuoto.

<label for="email">E-mail</label>
<input type="email" id="email" name="email"
       placeholder="ad es. alex@example.com">

Fate corrispondere l'attributo for dell'etichetta a id del campo di input per collegarli. L'attributo name identifica il campo nei dati inviati. Questi attributi hanno funzioni diverse: impostare un id non sostituisce la necessità di un name. Consultate label e input correttamente collegati per ulteriori esempi.

Lo standard HTML supporta placeholder per questi tipi di input: text, search, tel, url, email, password e number. I campi data non supportano questo attributo. Conservate le istruzioni importanti al di fuori dei campi, anche per i numeri, in modo che rimangano visibili durante l'immissione. La definizione HTML di placeholder e la Tavola degli attributi per tipo di input spiegano il suo ambito di applicazione.

Aggiungere un testo di suggerimento a un campo di testo

L'elemento textarea, che accetta più righe di testo, supporta anche placeholder. Per mostrare solo un segnaposto, lasciate vuoto lo spazio tra i tag di apertura e chiusura. Combinate l'inserimento su più righe e un campo di selezione utilizzando l'esempio completo in textarea, select, option e button.

<label for="message">Messaggio</label>
<textarea id="message" name="message" rows="4"
          placeholder="ad es. Quando arriverà il mio ordine?"></textarea>

Il valore iniziale di un'area di testo proviene dal testo tra i suoi tag e non da un attributo di value. Nell'esempio seguente, “Per favore mi dica quando arriverà il mio ordine.” è un valore effettivamente modificabile e non un segnaposto.

<textarea name="message">Per favore mi dica quando arriverà il mio ordine.</textarea>

Gli spazi o le rientranze tra i tag dell'area di testo possono far parte del valore. Se un'area di testo apparentemente vuota non mostra il suo segnaposto, verificate se tra i tag ci sono ancora residui di testo. La specifica HTML di textarea definisce il suo valore iniziale e il comportamento del segnaposto.

Mantenere le istruzioni importanti visibili durante l'immissione

Un testo di suggerimento scompare non appena l'utente inserisce un valore, quindi non può sostituire il nome del campo o istruzioni importanti. Conservate i nomi come “E-mail” nelle etichette visibili e fornite le istruzioni necessarie agli utenti durante l'immissione in un testo separato.

<label for="email">Email (obbligatoria)</label>
<input type="email" id="email" name="email"
       placeholder="ad es. alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">Inserisci l&#x27;indirizzo e-mail al quale desideri ricevere una risposta.</p>

L'attributo di accessibilità aria-describedby collega l'input a un testo esplicativo aggiuntivo. Inserite come valore di aria-describedby il valore dell'attributo id dell'elemento esplicativo. In questo modo, le tecnologie assistive come gli screen reader possono associare la descrizione al campo. Mantenete inoltre la spiegazione visibile, come in questo esempio. Il tutorial W3C sulla guida ai moduli mostra questo approccio.

Esempio completo: campo obbligatorio per l'e-mail e nota opzionale

Salvate il codice seguente con il nome form-guide.html con codifica UTF-8 e apritelo in un browser. Il campo e-mail è obbligatorio e il messaggio è facoltativo. Il colore del segnaposto è scelto per uno sfondo bianco e i campi si adattano alla larghezza del modulo su schermi più piccoli. Confrontate il requisito obbligatorio con le restrizioni di formato e intervallo utilizzando i valori limite in Validazione del modulo con obbligo, limiti di lunghezza e intervallo.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esempio di suggerimenti per l&#x27;inserimento</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>Contattaci</h1>
  <form method="get">
    <p>
      <label for="email">Email (obbligatoria)</label>
      <input type="email" id="email" name="email"
             placeholder="ad es. alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">Inserisci l&#x27;indirizzo e-mail al quale desideri ricevere una risposta.</p>
    <p>
      <label for="message">Messaggio (opzionale)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="ad es. Quando arriverà il mio ordine?"></textarea>
    </p>
    <button type="submit">Invia</button>
  </form>
</body>
</html>

Entrambi i campi mostrano inizialmente i segnaposto. Non appena si inserisce un indirizzo e-mail, il suo esempio scompare, ma "Email (obbligatoria)" e la spiegazione sottostante rimangono visibili. Se si cancella completamente il campo, il testo del segnaposto riappare.

1. Lasciate vuoto il campo e-mail e premete Invia. L'invio normale del browser è bloccato dalla verifica required.
2. Inserite abc nel campo e-mail e inviate di nuovo. Il controllo del formato type="email" blocca l'invio.
3. Inserite un indirizzo correttamente formattato come alex@example.com e lasciate vuoto il messaggio. Il modulo può essere inviato con il campo opzionale vuoto.

required controlla un valore vuoto e type="email" controlla il formato e-mail. Un indirizzo correttamente formattato non è una prova che l'indirizzo esista. I messaggi di errore e il loro aspetto variano in base al browser e alle impostazioni della lingua.

Questo esempio non contiene alcun server che memorizzi i messaggi. Poiché nel modulo GET l'attributo action è omesso, l'invio normale punta all'indirizzo del documento corrente. Se il file è servito da un server web, la stringa di query del suo URL può mostrare i valori trasmessi. Il comportamento con un file aperto localmente può variare. Un servizio funzionante richiede un endpoint del server e un metodo di trasmissione appropriato.

Cosa viene trasmesso: il testo segnaposto o il valore?

Il testo segnaposto non viene trasmesso come valore di input, ma un valore vuoto può comunque essere incluso nei dati trasmessi. Ad esempio, un campo non disabilitato con name="email" può produrre email= nella query di una richiesta GET se è vuoto e non esiste alcun controllo che blocchi la trasmissione per i campi obbligatori. I campi senza name o con disabled vengono omessi dai normali dati del modulo. Queste distinzioni seguono le regole HTML per la creazione dei dati del modulo .

<form id="compare-form">
  <label for="default-name">Valore predefinito</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">Esempio di nota</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="ad es. Alex">
</form>

Aprite questo codice in un file HTML separato e poi eseguite il seguente codice nella console degli strumenti di sviluppo del vostro browser. FormData crea un elenco dei nomi dei campi del modulo e dei loro valori attuali. Questo codice controlla l'elenco senza inviarlo a un server.

Array.from(new FormData(document.getElementById("compare-form")).entries())

Se entrambi i campi rimangono invariati, il risultato è il seguente. "Alex", fornito tramite value, verrà incluso. Il testo segnaposto "ad es. Alex" non verrà incluso.

[["default_name", "Alex"], ["hint_name", ""]]

Digitate "Sam" nel secondo campo ed eseguite di nuovo il codice: il valore per hint_name sarà "Sam". Se l'utente modifica il primo campo, il suo valore corrente sarà incluso al posto del valore originale.

Anche con required, un campo precompilato può superare facilmente una semplice verifica per valore vuoto tramite value. La creazione di un oggetto FormData non porta nemmeno alla validazione dei campi obbligatori. Gestite i controlli al momento dell'invio tramite il browser e la costruzione della lista di dati come operazioni separate e convalidate i dati inseriti lato server in un servizio reale.

Se il testo segnaposto manca o è difficile da leggere

• Verificate se il campo contiene già un valore. Il valore iniziale di un input, il contenuto di un'area di testo, l'autocompletamento tramite browser o uno script può impedire la visualizzazione del testo segnaposto.
• Verificate il tipo di input. Per i controlli con interfacce speciali, come i campi data, fornite le istruzioni al di fuori del campo.
• Mantenete l'indicazione breve. Inserite un breve esempio nel campo e condizioni dettagliate in un testo esplicativo visibile. Non inserite interruzioni di riga in un testo di suggerimento.
• Controllate i colori del testo e dello sfondo. Un colore molto pallido o una bassa opacità possono rendere difficile la visibilità del suggerimento. Dopo aver modificato lo stile, verificate anche la leggibilità su uno schermo mobile.

Usate lo pseudo-elemento CSS ::placeholder per stilizzare il testo del suggerimento. CSS (Cascading Style Sheets) controlla l'aspetto di una pagina; l'esempio completo lo utilizza per impostare il colore e l'opacità del suggerimento. Per altri esempi di stile, consultate Stilizzazione del testo del suggerimento (in coreano). Usate le etichette per i nomi dei campi, il testo del suggerimento per brevi esempi e descrizioni separate per le istruzioni che devono rimanere visibili.