Tipi di input HTML5: dove sono ora?

Pubblicato: 2022-03-10
Riepilogo rapido ↬ HTML5 ha introdotto tredici nuovi tipi di input di moduli, aumentando notevolmente il numero di diversi campi che i web designer e gli sviluppatori potrebbero aggiungere ai nostri moduli. Questi nuovi tipi richiedono tutti i browser per supportarli e l'adozione è stata più lenta di quanto alcuni di noi avrebbero voluto. Qual è lo stato di questi tipi di campo nel 2019? Quale possiamo usare e quale dovrebbe comunque essere evitato?

Una delle caratteristiche principali di HTML5 per molti designer e sviluppatori è stata l'aggiunta di una serie di nuovi tipi di input di moduli che potevano essere utilizzati. Per anni, ci siamo limitati a utilizzare input di testo a riga singola ( type="text" ) e ad affidarci a JavaScript e alle istruzioni dell'utente per provare a acquisire accuratamente dati validi di diversi tipi attraverso quell'unico campo non sofisticato.

HTML5 ha portato con sé nuovi valori dell'attributo type che ci hanno permesso di essere molto più specifici sui tipi di dati che dovevamo acquisire attraverso il campo, con la promessa che il browser avrebbe poi fornito l'interfaccia e la convalida necessarie per costringere l'utente nel completare il campo in modo accurato.

Dagli URL alle e-mail e dai campi di ricerca alle date, la speranza era che invece di dover scrivere ingombranti JavaScript per provare a convalidare quei campi, potessimo semplicemente lasciare al browser il compito di fare quel duro lavoro per noi. Inoltre, aggiungendo ciò che sa sul contesto dell'utente (tipo di dispositivo, tipo di interazione, fusi orari e così via), il browser sarebbe in grado di fare un lavoro molto migliore di personalizzazione dell'interfaccia per soddisfare le esigenze dell'utente che abbiamo mai potrebbero come autori di pagine.

Letture consigliate : UX e HTML5: aiutiamo gli utenti a compilare il modulo mobile

Avere nuovi elementi in una specifica è una cosa, ma in realtà non significa molto a meno che i browser utilizzati dal nostro pubblico non supportino tali funzionalità. Questi nuovi valori dell'attributo type avevano il grande vantaggio di ripiegare su type="text" se il browser non avesse avuto supporto, ma ciò potrebbe anche essere avvenuto a costo di rimuovere l'imperativo dei produttori di browser quando si trattava di implementare quei nuovi tipi nei loro prodotti.

È l'inizio del 2019 e HTML5 è l'attuale versione di HTML da più di quattro anni. Quali di questi nuovi tipi sono stati implementati, quali possiamo utilizzare e ce ne sono quelli che dovremmo evitare?

  1. Campi di ricerca
  2. Campi del numero di telefono
  3. Campi URL
  4. Campi di posta elettronica
  5. Campi numerici
  6. Campi di intervallo
  7. Campi di colore
  8. Campi data
Altro dopo il salto! Continua a leggere sotto ↓

1. Campi di ricerca

L'input type="search" deve essere utilizzato per i campi di ricerca. Funzionalmente, questi sono molto simili ai campi di testo di base, ma avere un tipo dedicato consente al browser di applicare uno stile diverso. Ciò è particolarmente utile se il sistema operativo dell'utente ha uno stile impostato per i campi di ricerca, poiché ciò consente al browser di adattare lo stile dei campi di ricerca sulle pagine Web in modo che corrispondano.

La specifica afferma che la differenza tra search e text è puramente stilistica, quindi potrebbe essere meglio evitarlo se intendi comunque modificare lo stile del campo con CSS. Non sembra esserci alcun vantaggio semantico nel suo utilizzo.

Posso usare la ricerca di input? Dati sul supporto per la funzione di ricerca di input nei principali browser di caniuse.com.

Raccomandazione

Usa type="search" se intendi lasciare lo stile del campo di ricerca al browser.

2. Campi del numero di telefono

L'ingresso type="tel" viene utilizzato per inserire i numeri di telefono. Questi sono come i nomi utente univoci utilizzati da Whatsapp. Se non sei sicuro, chiedi ai tuoi nonni.

A livello internazionale, i numeri di telefono assumono molti formati diversi, sia per motivi tecnici che di localizzazione. Per questo motivo, l'input tel non tenta di convalidare il formato di un numero di telefono. È possibile utilizzare gli strumenti di convalida associati come l'attributo pattern sul tag o il metodo JavaScript setCustomValidity() per applicare un formato, se necessario.

Sui browser desktop, l'uso dei campi telefono sembra avere scarso impatto. Sui dispositivi con tastiere virtuali, invece, possono essere davvero utili. Ad esempio, su iOS, concentrando l'input su un campo telefonico viene visualizzato un tastierino numerico pronto per la digitazione di un numero. Inoltre, i meccanismi di completamento automatico del dispositivo si attivano e suggeriscono numeri di telefono che possono essere compilati automaticamente con un solo tocco.

Posso usare input-email-tel-url? Dati sul supporto per la funzione input-email-tel-url nei principali browser di caniuse.com.

Raccomandazione

Usa type="tel" per qualsiasi campo del numero di telefono. È molto utile quando implementato e viene fornito gratuitamente quando non lo è.

3. Campi URL

Il campo type="url" può essere utilizzato per acquisire gli URL. Ad esempio, potresti utilizzarlo quando chiedi a un utente di inserire l'indirizzo del proprio sito Web per una directory aziendale. La cosa curiosa del campo URL è che richiede solo URL completi e assoluti . Non è possibile acquisire solo un nome di dominio o solo un percorso, ad esempio. Ciò ne limita l'utilità per alcuni aspetti, poiché immagino che gli sviluppatori di CMS e di app Web avrebbero trovato molti usi per un campo che accetta e convalida i percorsi relativi.

Anche se questo sarebbe un URL assoluto valido:

 https://twitter.com/drewm

Entrambi non supererebbero la convalida del campo:

 smashingmagazine.com /2019/01/css-multiple-column-layout-multicol/

Sembra un'opportunità persa che non sia possibile specificare parti diverse di un URL, ma è quello che abbiamo. Il supporto del browser è su tutta la linea piuttosto eccezionale, con dispositivi a tastiera virtuale che offrono alcune personalizzazioni per l'immissione di URL. iOS personalizza la sua tastiera con . , / e un pulsante di completamento automatico per TLD comuni come .com e per la mia locale, .co.uk . Questo è un buon esempio di come il browser sia in grado di offrire scelte più intelligenti di quelle che possiamo fare come sviluppatori web.

Posso usare input-email-tel-url? Dati sul supporto per la funzione input-email-tel-url nei principali browser di caniuse.com.

Raccomandazione

Usa type="url" ogni volta che devi raccogliere un URL completo e assoluto. Il supporto del browser è ottimo, ma ricorda che non va bene per i singoli componenti URL.

4. Campi e-mail

Probabilmente una delle nuove opzioni più comunemente utilizzate è type="email" per gli indirizzi e-mail. Proprio come abbiamo visto con i numeri di telefono e gli URL, i dispositivi con tastiere virtuali personalizzano i tasti (per includere elementi come i pulsanti @ ) e abilitano il riempimento automatico dal database dei contatti.

Anche i browser desktop ne fanno uso, con Safari su macOS che abilita anche la compilazione automatica dei campi e-mail, in base ai dati nell'app Contatti di sistema.

Gli indirizzi email spesso sembrano seguire un formato molto semplice, ma le variazioni in realtà li rendono piuttosto complessi. Un tentativo ingenuo di convalidare gli indirizzi e-mail può comportare che un indirizzo perfettamente valido venga contrassegnato come non valido, quindi è fantastico poter fare affidamento sui metodi di convalida più sofisticati e ben testati del browser per verificare il formato.

Utile, l'attributo multiple può essere aggiunto ai campi e-mail per raccogliere un elenco di indirizzi e-mail. In questo caso, ogni indirizzo e-mail nell'elenco viene convalidato individualmente.

 <input type="email" multiple> 

Posso usare input-email-tel-url? Dati sul supporto per la funzione input-email-tel-url nei principali browser di caniuse.com.

Raccomandazione

Usa type="email" per i campi dell'indirizzo email quando possibile.

Uno screenshot combinato che mostra le tre tastiere personalizzate offerte da Safari su iOS per i tipi di campo telefono, e-mail e numero.
Safari su iOS mostra tastiere personalizzate per telefono, e-mail e campi numerici, tra gli altri. (Grande anteprima)

5. Campi numerici

Il campo type="number" è progettato per valori numerici e ha alcuni attributi molto utili insieme ad esso sotto forma di min , max e step . Un valore valido per un campo numerico deve essere un numero in virgola mobile compreso tra qualsiasi valore minimo e massimo specificato dagli attributi min e max .

Se il step è impostato, un valore valido è divisibile per il valore del passo.

 <input type="number" min="10" max="30" step="5">

L'input valido per il campo sopra sarebbe 10 , 15 , 20 , 25 e 30 , con qualsiasi altro valore rifiutato.

Il supporto del browser è ampio, sempre con le tastiere virtuali che spesso utilizzano per impostazione predefinita una modalità di input numerico per la digitazione dei valori.

Alcuni browser desktop (inclusi Chrome, Firefox e Safari, ma non Edge) aggiungono pulsanti di attivazione/disattivazione per spostare i valori su e giù in base al valore del step oppure, se non viene specificato alcun passaggio, il passaggio predefinito sembra essere 1 in ciascuna implementazione.

Posso usare il numero di input? Dati sul supporto per la funzione di immissione del numero nei principali browser di caniuse.com.

Raccomandazione

Usa type="number" per qualsiasi numero in virgola mobile, poiché è ampiamente supportato e può aiutare a prevenire input accidentali.

6. Campi di intervallo

Meno ovvio in uso che alcuni degli altri tipi, type="range" possono essere considerati un'alternativa per type="number" in cui all'utente non interessa il valore esatto.

I campi dell'intervallo utilizzano e spesso utilizzeranno gli stessi attributi min , max e step dei campi numerici e i browser lo visualizzano quasi universalmente come un dispositivo di scorrimento grafico. L'utente non può necessariamente vedere il valore esatto che sta impostando.

I campi dell'intervallo potrebbero essere utili per quel tipo di domande su moduli come "Con quale probabilità consigli questo a un amico?" con "Probabile" a un'estremità e "Improbabile" all'altra. L'utente può far scorrere il dispositivo di scorrimento dove ritiene rappresenti la sua opinione e sotto il cofano che viene inviato come valore numerico che è possibile archiviare ed elaborare.

Il supporto del browser è buono, anche se l'aspetto varia tra le implementazioni.

Posso usare l'intervallo di input? Dati sul supporto per la funzione di intervallo di input nei principali browser di caniuse.com.

Raccomandazione

Gli usi di type="range" potrebbero essere un po' di nicchia, ma il supporto è buono e il dispositivo di scorrimento fornisce un metodo di input intuitivo ove appropriato.

7. Campi colore

Il campo type="color" è progettato per acquisire i colori RGB in notazione esadecimale, come #aabbcc . La specifica HTML lo chiama un "controllo del pozzo di colore", con l'intenzione che il browser dovrebbe fornire un selettore di colori intuitivo di qualche tipo.

Alcuni browser lo forniscono, in particolare Chrome e Firefox, entrambi forniscono l'accesso al selettore colore di sistema attraverso un piccolo campione di colore.

Né IE né Safari forniscono alcun supporto qui, lasciando all'utente la possibilità di capire che dovrebbero inserire un numero esadecimale di 7 cifre da soli.

I campi colore potrebbero trovare impiego nei temi per la personalizzazione e nell'uso del CMS, ma a meno che gli utenti non siano sufficientemente tecnici per gestire i codici colore esadecimali, potrebbe essere meglio non fare affidamento sul browser che fornisce una bella interfaccia utente per questi.

Posso usare il colore di input? Dati sul supporto per la funzione del colore di input nei principali browser di caniuse.com.

Raccomandazione

A meno che tu non sappia che i tuoi utenti saranno felici di tornare a inserire codici colore esadecimali, è meglio non fare affidamento sui browser che supportano type="color" .

Uno screenshot combinato che mostra le diverse rappresentazioni visive dei campi intervallo, colore e data in tre diversi browser: Edge, Firefox e Chrome.
Campi di intervallo, colore e data visualizzati da Edge, Firefox e Chrome. (Grande anteprima)

8. Campi data

HTML5 ha introdotto una serie di valori di type diversi per la creazione di input per date e orari. Questi includevano date , time , datetime-local , month e week .

A prima vista, sembrano mandati dal cielo, poiché raccogliere le date in un modulo è un'esperienza difficile sia per lo sviluppatore che per l'utente e sono necessarie abbastanza frequentemente.

La promessa qui è che i nuovi tipi di campo consentono al browser di fornire un'interfaccia utente standardizzata, accessibile e coerente per acquisire facilmente date e orari dall'utente. Questo è davvero importante, poiché i formati di data e ora variano in tutto il mondo in base alla lingua e alle impostazioni locali, quindi un'interfaccia browser intuitiva che traduce una selezione della data facile da usare in un formato di data tecnico non ambiguo sembra davvero la soluzione ideale .

Pertanto, l'input valido per il campo type="date" è un valore anno-mese-giorno non ambiguo come 2019-01-16 . Agli sviluppatori piacciono, in quanto mappano praticamente sul formato della data ISO 8601, che viene utilizzato nella maggior parte dei contesti tecnici. Sfortunatamente, pochi esseri umani normali usano questo formato di data e non è probabile che lo raggiungano quando gli viene chiesto di fornire una data in un singolo campo di testo vuoto.

E, naturalmente, un singolo campo di testo vuoto è ciò che viene presentato all'utente se il suo browser non fornisce un'interfaccia utente per la raccolta delle date. In questi casi, diventa molto difficile per un utente inserire un valore di data valido a meno che non abbia familiarità con il formato richiesto o l'input sia annotato con istruzioni chiare.

Tuttavia, molti browser forniscono una buona interfaccia utente per la raccolta delle date. Firefox ha un selettore di date davvero eccellente e anche Chrome ed Edge hanno interfacce piuttosto buone. Tuttavia, non c'è supporto nel vecchio IE povero e nessuno in Safari, il che potrebbe essere un problema.

Posso usare input-datetime? Dati sul supporto per la funzione input-datetime nei principali browser di caniuse.com.

Raccomandazione

Sebbene sia conveniente dove funziona, la modalità di errore di type="date" e i tipi di data e ora associati sono molto scadenti. Ciò la rende una scelta rischiosa che potrebbe lasciare gli utenti in difficoltà per soddisfare i criteri di convalida.

Conclusione

Molte cose sono cambiate nel panorama dei browser nei quattro anni da quando la specifica HTML5 è diventata una raccomandazione. Il supporto per i nuovi tipi di input è abbastanza forte, in particolare nei dispositivi mobili con tastiere virtuali come tablet e telefoni. Nella maggior parte dei casi, questi input sono sicuri da usare e forniscono alcune utilità extra all'utente.

Ci sono un paio di eccezioni degne di nota, la peggiore delle quali sono i campi di data e ora, che non solo mancano di utilità, ma hanno anche un supporto per browser più irregolare. Quando il supporto non è disponibile, la modalità di fallback di questi campi è scarsa. In questi casi, potrebbe essere meglio attenersi a soluzioni basate su JavaScript per migliorare progressivamente i campi di input type="text" di base.

Se desideri saperne di più, ti consiglio vivamente i documenti Web MDN su questi tipi di campo e, come sempre, la specifica W3C.