Placeholder: Significato e Come Usarlo nel Web Design

Placeholder è una parola inglese che significa "segnaposto". Nel web design, è il testo grigio chiaro che appare dentro un campo di input (form) prima che l'utente digithi qualcosa. Esempi: "Scrivi il tuo nome...", "Inserisci la tua email..." in un form di contatto. Un buon placeholder rende il form più intuitivo e diminuisce gli errori di compilazione.

Definizione tecnica di placeholder

In HTML, il placeholder è l'attributo placeholder nel tag <input>:

<input type="email" placeholder="nome@dominio.com" />

Quando l'utente clicca nel campo e inizia a digitare, il placeholder scompare automaticamente. Il testo del placeholder NON viene inviato con il form — è solo una guida visiva.

Quando usare il placeholder

✅ Usa il placeholder quando:

• Il formato è non ovvio: un campo per data dove il formato può essere gg/mm/yyyy, mm/gg/yyyy o yyyy-mm-dd. Mostra un placeholder: "gg/mm/yyyy".
• L'input ha vincoli specifici: un campo per numero di telefono con placeholder "+39 XXX XXXX XXX" chiarisce il formato italiano.
• Il campo ha opzioni di ricerca: un campo di ricerca con placeholder "Scrivi il nome del prodotto..." rende chiaro cosa cercare.

❌ Non usare placeholder quando:

• C'è già un label chiaro: se il campo ha una label ("Email") sopra, il placeholder è ridondante.
• Il placeholder è troppo lungo: il testo del placeholder viene tagliato su telefono. Mantienilo breve.
• Usi il placeholder al posto di una label: accessibilità fallisce. Gli screen reader (per non vedenti) leggono il label, non il placeholder. Sempre un label HTML corretto, anche se nascosto.

Best practice per scrivere buoni placeholder

1. Breve e suggestivo

Non scrivere "Inserisci il tuo nome completo (nome e cognome, senza titoli)". Scrivi "Mario Rossi". Mostra un esempio, non una spiegazione.

2. Mostra il formato atteso

<input type="date" placeholder="gg/mm/yyyy" />
<input type="tel" placeholder="+39 123 456 7890" />
<input type="email" placeholder="nome@azienda.it" />

3. Mai usarlo al posto del label

Sbagliato (inaccessibile):

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

Corretto (accessibile):

<label for="email">Email</label>
<input id="email" type="email" placeholder="nome@dominio.com" />

4. Colore del placeholder

Il placeholder default è troppo leggero (grigio chiaro) per chi ha problemi di vista. In CSS, scuriscilo leggermente:

::placeholder {
  color: #666;
  opacity: 0.8;
}

5. Placeholder non deve contenere informazioni cruciali

Se il form è obbligatorio, il placeholder non deve essere l'unico ad indicarlo. Usa sempre un label con asterisco (*) o testo "Campo obbligatorio".

Esempio: Form di contatto ben costruito

<form>
  <label for="nome">Nome *</label>
  <input id="nome" type="text" placeholder="Mario Rossi" required />

  <label for="email">Email *</label>
  <input id="email" type="email" placeholder="mario@azienda.it" required />

  <label for="telefono">Telefono (opzionale)</label>
  <input id="telefono" type="tel" placeholder="+39 123 456 7890" />

  <label for="messaggio">Messaggio *</label>
  <textarea id="messaggio" placeholder="Scrivi il tuo messaggio..." required></textarea>

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

Placeholder e UX mobile

Su smartphone, lo spazio è limitato. Un placeholder lungo viene tagliato. Quando l'utente tocca il campo, la tastiera virtuale appare e il placeholder viene comunque nascosto. Per i form su mobile, usa placeholder minimali e label sempre visibili.