Tradizionalmente, le form in HTML hanno offerto funzionalità basilari, demandando molte delle funzionalità più avanzate o di validazione dei dati a codice lato client o lato server.
HTML5 introduce un insieme di nuovi tipi di input, che vanno a completare l'esperienza di utilizzo all'interno di device moderni, come possono essere i browser di dispositivi come smartphone o tablet. In questi scenari, infatti, molto spesso non è presente una tastiera fisica, per cui HTML5 introduce nuovi tipo di input, di seguito riportati:
- search
- url
- tel
- number
- range
- date
- month
- week
- time
- datetime
- datetime-local
- color
Il nome stesso indica meglio ciò a cui si riferiscono. Ad esempio, email facilita l'inserimento di e-mail, mentre range quello di intervalli, e così via. Di seguito un esempio:
<form> E-mail: <input type="email" name="email" /> Sito: <input type="url" name="website" /> Telefono: <input type="tel" name="mobile" /> Numero: <input type="number" min="0" max="99" step="1" value="18" name="quantity" /> Quantità: <input type="range" min="1" max="100" value="18" name="discount"/> </form>
L'uso delle altre opzioni è sostanzialmente simile. Questi tipi di input vengono renderizzati in maniera differente dai vari browser: ad esempio, molto spesso range viene renderizzato con uno slider, mentre i tipi tel, number, email e url abilitano le tastiere virtuali corrispondenti all'interno dei principali browser mobile. Alcuni di questi browser, inoltre, applicano in automatico dei controlli di validità del contenuto, verificando che il valore inserito corrisponda esattamente a quanto specificato.
Nell'immagine che segue possiamo vedere il rendering effettuato da Chrome (a sinistra) e IE10 (a destra).
In quest'altra immagine, invece, possiamo notare come IE10 in Windows Phone 8 utilizzi una virtual keyboard con già alcuni caratteri pronti (.com e @, analogamente a quanto fanno i browser di iOS e Android.
L'uso di questi nuovi tipi di input non ha effetti negativi sui browser che non li supportano: semplicemente, in questi casi verranno trattati come normali input di solo testo. Per questo motivo, è suggeribile comunque effettuare tutti i controlli di validità dei campi lato server.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Creare alias per tipi generici e tuple in C#
Utilizzare il trigger SQL con le Azure Function
Usare le navigation property in QuickGrid di Blazor
Gestire i dati con Azure Cosmos DB Data Explorer
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Usare le collection expression per inizializzare una lista di oggetti in C#
Eseguire operazioni sui blob con Azure Storage Actions
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core