Input con HTML5: utilizzare i nuovi attributi

Continuiamo ad elencare le novità introdotte dal linguaggio HTML5 andando a vedere da vicino i nuovi attributi che sono stati introdotti all’interno dell’elemento input. Come spesso accade in questo corso, prima di andare a vedere singolarmente le novità che porta questo nuovo linguaggio, vorrei rispondere ad una domanda; perché?

La risposta a questa domanda è veramente semplice, perché il mercato è cambiato! La nuova corsa all’oro per l’anno 2012 e per gli anni a seguire, è stato l’avvento del mobile. Schermi piccoli e tastiere altrettanto minute sono state introdotte in questo mercato e lo hanno rivoluzionato completamente!

Lasciando da parte il problema degli schermi, per il quale potremmo andare a scrivere un libro intero, quello che ha interessato maggiormente lo sviluppo sono state le tastiere virtuali, ovvero quelle presenti all’interno di un qualsiasi smartphone touchscreen.

Le tastiere che vengono generate su questi tipi di dispositivi, possono adattarsi al contenuto che viene richiesto e, per questo, sono stati creati nuovi attributi che permettono di comunicare quale tipo di tastiera è necessaria all’utente per il tipo di contenuto che deve inserire.

Fatta questa breve, ma doverosa, introduzione; andiamo a vedere quali nuovi attributi sono stati inseriti!

Avete presente quei campi input che hanno al loro interno un testo, come ad esempio “Inserisci la tua email”, e che scompare quando ci cliccate sopra per dare spazio al vostro contenuto?

Tendenzialmente questa tecnica avrebbe richiesto l’utilizzo del linguaggio JavaScript per permettere ai programmatori di inserire il testo ma, grazie all’avvento del HTML5, oggi siamo in grado di inserirle direttamente grazie all’attributo placeholder.

Grazie a questo semplicissimo attributo possiamo generare qualcosa del genere fornendo del testo di aiuto ad un qualsiasi campo input.

Come usato nell’esempio precedente, il valore dell’attributo type (text), risulta essere un valore in grado di accettare qualsiasi stringa di testo, ma se volessimo inserire una email?

Ecco che è stato creato un nuovo valore per type. Questo non ci permetterà soltanto di modificare la tastiera virtuale dei nostri smartphone, come mostrato dall’immagine qua sotto, ma ci permetterà anche di eseguire veloci validazioni dell’indirizzo email sui browser che supportano questo elemento!

E cosa succede su quei browser che non supportano HTML5? Assolutamente niente! Questo nuovo valore verrà tradotto come un semplice campo text.

Un altra novità, che colpisce sopratutto i dispositivi touch, è il valore url che, con questo semplice codice:

permette di ottenere una tastiera di questo genere:

Concludiamo questa lezione introduttiva con il valore number. Ad essere sincero, esistono molti altri nuovi valori che vi potranno essere di aiuto, ma come introduzione questo può bastare. Ricordatevi di comunicarci se siete interessati ad articoli di approfondimento perché noi ascoltiamo le vostre necessità!

Una volta inserito questo nuovo valore, la tastiera del iPhone si trasformerà come segue:

Da notare che al posto di modificare soltanto la parte bassa della tastiera, questa volta, è stata modificata la parte principale consentendoci di accedere automaticamente alla versione numerica.