Il web che verrà: come realizzeremo i moduli con HTML5?
Ultimamente in giro è un gran parlare di HTML5 e CSS3: allo stato attuale le specifiche a cui stanno lavorando i membri del W3C sono ancora in versione di bozza ma in un prossimo futuro entrambe sono destinate a stravolgere completamente il modo in cui siamo abituati a vedere il web o meglio, il modo in cui siamo abituati a fare il web.
Oggi per ottenere determinati risultati siamo spesso costretti a implementare degli script aggiuntivi all’interno del nostro markup HTML; script che richiedono ovviamente del lavoro extra con notevole aumento del tempo impiegato per portare a termine il progetto.
Oggi vedremo come HTML5 ci permetterà di semplificare notevolmente il nostro lavoro.
In che modo può venirci in aiuto HTML5 facendoci risparmiare tempo prezioso?
Prendiamo in analisi lo sviluppo di un modulo. Un modulo di una pagina web ha la funzione di inviare dei dati al gestore del sito, (come ad esempio un modulo di registrazione o prenotazione, oppure un semplice modulo contatti). Prima che i dati inseriti dall’utente siano inviati viene generalmente eseguito un controllo di validità; tutt’oggi per questa fase di validazione abbiamo necessità di aggiungere degli script (realizzati in PHP, Javascript o altro linguaggio che si è scelto per lo sviluppo) al normale markup HTML.
Con le nuove specifiche contenute in HTML5 sarà molto più semplice gestire il controllo dei dati che sono inviati da un modulo: niente più Javascript o PHP, basterà un semplice attributo dell’HTML5 a definire la maggior parte dei controlli sui dati inseriti.
Come realizzare un modulo di prenotazione utilizzando HTML5?
Facciamo adesso un esempio pratico per vedere dettagliatamente cosa cambia e come s’implementano questi nuovi attributi messi a disposizione da HTML5 all’interno di un form.
Nota: per vedere le novità offerte da HTML5 tutti gli esempi che troverai in questo articolo dovranno essere visualizzati mediante il browser Opera versione 10.
In questo esempio il nostro cliente è una società di Formazione Professionale che ci ha richiesto di realizzare un modulo di prenotazione corsi da integrare sul proprio sito web per fornire ai futuri corsisti la possibilità di eseguire la prenotazione direttamente online.
Che cosa resta uguale nella realizzazione di un modulo?
La prima cosa che il cliente ci richiede è che l’utente abbia la possibilità di scegliere uno dei corsi messi a disposizione. Per fare questo basta semplicemente servirsi di tutti gli elementi che siamo soliti utilizzare, creando un modulo con l’inserimento di un campo di input del tipo radio (input type=”radio”).
<form name="prenotazione" method="post" action="?">
<fieldset>
<legend>Scegli il tipo di corso che desideri frequentare</legend>
<p><label> <input type="radio" name="tipocorso"> HTML5</label></p>
<p><label> <input type="radio" name="tipocorso"> CSS3</label></p>
<p><label> <input type="radio" name="tipocorso"> jQuery</label></p>
</fieldset>
<p class="center">
<input type="reset" value="Cancella dati">
<input type="submit" value="Invia Prenotazione">
</p>
</form>
E fin qui ancora nulla di nuovo, abbiamo realizzato un modulo mediante l’utilizzo dell’elemento form e abbiamo aggiunto al modulo un campo di tipo radio per fornire all’utente la possibilità di scegliere uno tra i corsi presenti.
Guarda l’esempio che abbiamo realizzato (ricorda di utilizzare l’ultima versione del browser Opera).
Come indicare dei campi obbligatori con il semplice utilizzo di HTML5?
Il cliente ci fa presente che il modulo di prenotazione deve contenere anche dei campi relativi ai dati personali del corsista che desidera effettuare la prenotazione; questi campi (Nome e Cognome, Telefono e Indirizzo e-mail) devono essere tutti obbligatori in quanto fondamentali per poter contattare successivamente l’utente.
Vediamo un po’ come implementare il markup per soddisfare le richieste del nostro cliente utilizzando le nuove specifiche di HTML5.
<fieldset>
<legend> Dati Corsista </legend>
<p><label>Nome e Cognome: <input type="text" name="nome" required></label></p>
<p><label>Telefono: <input type="tel" name="telefono" required></label></p>
<p><label>E-mail: <input type="email" name="email" required></label></p>
</fieldset>
Come puoi notare dal codice che abbiamo utilizzato, ci sono alcune novità. Innanzitutto l’utilizzo dell’attributo denominato “required”; si tratta di un attributo di tipo booleano che, quando specificato, indica che l’elemento è richiesto. Quindi basterà aggiungere questo attributo all’interno di un elemento input per renderlo obbligatorio senza nessun utilizzo di javascript o altri elementi esterni alla pagina web.
In questo secondo esempio, se provi a inviare il modulo senza aver inserito nessun valore nei campi che abbiamo indicato come ”richiesti”, puoi notare come HTML5 ti notificherà l’errore.
Ti ricordo di visualizzare l’esempio utilizzando il browser Opera.
E se volessi indicare che un campo del modulo dovrà contenere un indirizzo e-mail?
Nel caso in cui si necessita eseguire un controllo per verificare che il valore inserito in un determinato campo sia un indirizzo e-mail valido, oggi ci si deve affidare a script esterni al normale markup HMTL.
Un’altra delle novità introdotte da HTML5 è l’aggiunta di nuovi tipi di campi input che servono appunto a definire ancora più dettagliatamente i valori che tali campi dovranno contenere.
Analizzando sempre il codice del nostro secondo esempio ti sarai accorto che abbiamo utilizzato un campo input con il valore “email” assegnato all’attributo “type”.
<p><label>E-mail: <input type="email" name="email" required></label></p>
Mentre con HTML4 si assegna indistintamente il valore “text” all’attributo “type” sia che il campo debba contenere un normale testo (come potrebbe essere il nome o il cognome), sia che questo debba contenere un indirizzo e-mail, con HTML5 le cose si rendono molto più semplici; avremo la possibilità di indicare chiaramente che il valore che l’utente dovrà inserire in un determinato campo cui è stato assegnato l’attributo “type” con valore “email” dovrà essere in formato indirizzo e-mail valido.
Prova a inviare nuovamente il modulo del nostro secondo esempio inserendo nel campo e-mail un valore con un formato e-mail non valido e guarda come HTML5 eseguirà il controllo notificandoti subito l’errore.
Quali altri tipi di campi input si potranno utilizzare con html5?
Oltre al tipo “email” appena visto, HTML5 introdurrà altri nuovi tipi di campi di input che potremo utilizzare nella creazione dei nostri moduli, vediamone alcuni:
- tel – per indicare numeri di telefono;
- url – per indicare l’url di un sito web;
- datetime – per selezionare data e ora da un comodo calendario;
- number – per indicare un valore numerico;
- range – per indicare un valore numerico (compreso tra un range prestabilito) mediante uno slider;
Per un elenco completo di tutti i valori che sarà possibile assegnare all’attributo “type” con HTML5 ti consiglio di consultare la specifica (ancora in versione bozza) redatta dal W3C.
Scegliere una data
Ritornando al nostro esempio, il nostro cliente ci ha richiesto di aggiungere un altro campo che permetta all’utente di selezionare giorno, mese e anno in cui desidera frequentare uno dei nostri corsi.
Utilizziamo uno dei nuovi tipi di campi input messi a disposizione da HTML5 per fornire all’utente un comodo calendario da cui scegliere la data desiderata senza l’utilizzo di nessun javascript esterno.
Aggiungiamo le seguenti righe di codice al nostro modulo di prenotazione:
<fieldset>
<legend> Seleziona la data in cui desideri frequentare il corso </legend>
<p><label>Data: <input type="date" name="data-corso"></label>
</fieldset>
E adesso prova a selezionare una data dal terzo esempio che abbiamo realizzato. Avrai notato come tutto diventa più semplice e veloce per uno sviluppatore.
Ultime chicche prima di finire
Ci sarebbe da dire ancora molto sulle novità portate da HTML5 riguardanti la creazione dei moduli, ma non voglio renderti questo articolo un trattato lungo e noioso; magari più in la dedicherò qualche ulteriore approfondimento in merito, ma prima di concludere voglio mostrarti qualche ulteriore chicca.
L’attributo placeholder
Utilizzando il nuovo attributo “placeholder” possiamo assegnare ad un campo di input un valore di default (per esempio un suggerimento) il quale sarà eliminato non appena l’utente cliccherà all’interno del campo per inserire i propri dati.
<p><label>E-mail: <input type="email" name="email" placeholder="inserisci un indirizzo email valido" required></label></p>
Guarda questo esempio utilizzando il browser Safari o Chrome (ultima versione) poiché sono gli unici due che al momento supportano l’attributo “placeholder”e prova a cliccare sul campo email.
L’attributo autofocus
Mediante l’utilizzo dell’attributo “autofocus” assegnato ad un campo di input è possibile spostare il focus su un determinato campo del modulo subito dopo il caricamento della pagina.
<p><label>Nome e Cognome: <input type="text" name="nome" autofocus required></label></p>
In questo ultimo esempio ho aggiunto l’autofocus sul campo “Nome e Cognome”. Prova a vederne il risultato: subito dopo il caricamento della pagina il focus si sposterà sul campo che abbiamo scelto.
Questo attributo è già supportato da Safari, Chrome e Opera.
Conclusione
Oggi abbiamo avuto modo di vedere come le novità fornite dalle nuove specifiche HTML5 sono destinate a rendere in un prossimo futuro più semplice e rapido lo sviluppo dei nostri progetti.
C’è da dire che al momento sono ancora pochi i browser che supportano queste novità, ma una cosa molto importante è che tutte le nuove specifiche che abbiamo visto sono retro compatibili, i browser che ancora non le supportano ignoreranno semplicemente le nuove funzionalità, comportandosi normalmente come succede oggi con HTML4.
E adesso voglio sentire il tuo parere in merito: pensi che sia ancora presto per implementare alcune di queste novità o su qualche progetto possiamo già azzardare e sperimentare?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
20 commenti
Trackback e pingback
-
HTML5: tag nuovi e anteprima delle innovazioni | paitadesignblog
[...] la lista dei campi input si potranno utilizzare con [...] -
I migliori post della settimana #57 | EmaWebDesign :: Web Programming / Web Design / SEO
[...] 02) Il web che verrà: come realizzeremo i moduli con HTML5? [...] -
Il web che verrà: come realizzeremo i moduli con HTML5? | Your Inspiration Web « Universalwebdesign's Blog
[...] Il web che verrà: come realizzeremo i moduli con HTML5? | Your Inspiration Web. [...]
html5 sto notando con piacere che è uno spettacolo!
ancora sono quasi nulla sulle novità introdotte, ma sto vedendo (soprattutto in questo articolo) che la semplicità è caratteristica di questa nuova versione.
Cioè, in questo articolo hai spiegato cose che per farle adesso, devi implementare script in javascript assieme ad un linguaggio lato server (perchè non è detto che tutti abbiano il javascript attivato)
Rispondendo alla tua domanda, credo che ancora sia troppo presto per poterli implemetare in progetti grossi. Va bene fare sperimentazioni, ma per lavori credo che si ancora presto e non credo valga la pena neanche prevedere entrambe le cose, perchè anche se con implementi determinate cose con html5, devi sempre prevedere soluzioni con html4, quindi tanto vale farlo direttamente in modo tradizionale, evitando di perdere tempo.
Ancora esistono discussioni sui browser, figuriamoci ora con html5.
Spero che al più presto la cosa venga ufficializata e che tutti i browser implementino questa nuova versione, sia html5 che css3, accoppiata vincente, si risolverebbero non pochi problemi.
Ma ora mi domando, html5 + css3… ma il javascript? va in pensione? :D
Ciao Antonio, grazie per aver espresso il tuo parere che in parte condivido.
Perchè in parte?
Perchè concordo con te sul fatto che forse ancora è troppo presto per implementare HTML5, soprattutto per quanto riguarda il discorso trattato nell’articolo relativo ai form.
Proprio come dici tu, al momento si dovrebbe eseguire un doppio lavoro (implementando anche i soliti script di validazione) per pensare a tutti quei browser che non supportano ancora le nuove specifiche e quindi più che guadagnare tempo si otterebbe l’effetto opposto. E questo avrebbe poco senso.
Invece sono d’accordo con Aldo per quanto riguarda l’utilizzo di javascript, che secondo me sarà sempre più parte integrante delle nostre web application.
HTML5 e CSS3 sono davvero sorprendenti, ma mi sembra impossibile pensare di poterli sfruttare nel giro di pochi anni.
Guardando in faccia la realtà, IE è ancora troppo diffuso e nessuna delle sue versioni supporta a pieno il css2, figuriamoci il css3.
Inoltre la maggior parte dell’utenza di internet opera da lavoro, dove si sa, senza privilegi di amministratore, non si può né installare un nuovo browser, né aggiornare quello corrente.
Sono questi i veri scogli da superare, se tutti utilizzassimo i cosiddetti “modern-browser”, aggiornati all’ultima versione, allora sì che HTML5 e CSS3 sarebbero all’ordine del giorno.
Ciao Raspo, sull’impossibilità di sfruttarli oggi sono d’accordo ma spingermi oltre – soprattutto di un po’ di anni – non mi sento ancora di dirlo perchè sul web tutto si sussegue troppo velocemente.
Da qui al prossimo anno potrebbero cambiare tantissime cose, soprattutto per quanto riguarda il settore dei browser dove, statistiche alla mano, finalmente le cose sembrano aver preso la giusta direzione. Internet Explorer negli ultimi anni ha perso tantissimo e continua a perdere terreno ancora oggi, mese dopo mese. Inoltre dal prossimo mese Microsoft non potrà più vendere il proprio sistema operativo (Windows) con Internet Explorer preinstallato nell’Unione Europea, questo dovrebbe contribuire a ridurre ulteriormente la percentuale di utilizzo di questo browser.
Forse è la volta buona che gli sviluppatori web possano tirare un sospiro di sollievo. Io sono dell’idea che se in casa Microsoft non si adeguano rapidamente rischiano l’estinsione, non credi?
@antonio
assolutamente no pensa all’uso del tag canvans che ha piena ed enorme potenzialità solo con js
@Nando: preciso, chiaro ed esauriente come al solito
Ciao Aldo, intanto grazie per i complimenti.
Sono pienamente d’accordo con te per quanto riguarda l’utilizzo e le potenzialità di javascript associate a html5.
Staremo a vedere.
avevo domandato essendo ancora un pochetto ignorante (avevo messo anche la faccina innocente :D ), perchè ancora non ho avuto modo di vedere appieno le nuove funzionalità sia di html5, che di css3. Ho visto soltanto alcuni sprazzi di articoli in giro per il web e ho visto fare, al momento, cose che sostituiscono del tutto il javascript, perchè è già tutto incorporato nell’html5, per questo mi era venuto il dubbio.
Grazie per la delucidazione :)
Secondo me possiamo utilizzare per adesso script js (ci sono valanghe di plug-in jquery che validano i campi, tra i quali uno scritto proprio qui su yiw), e man mano eliminarli quando html5 sarà una solida realtà nei browser di tutti gli utenti.
I tags che m’interessano di più però sono quelli video.. la morte di flash?
mmm.. credo di no :D
Ciao mazzjoe, in questi giorni ho letto da qualche parte (non chiedermi dove perchè non ricordo più in quale posto) che da casa Adobe pare stiano cercando di mettere il bastone tra le ruote per ritardare il lavoro di revisione/pubblicazione svolto dal W3C sulle nuove specifiche HTML5.
Paura che il loro “flash” possa risentirne?
@nando e come? Strano perché il w3c è una comunità, non un ente singolo facilmente corruttibile. Inoltre secondo me anche i produttori di browser staranno spingendo per aver il controllo di video e audio, per fornire i loro servizi.
Secondo me se flash vuole sopravvivere deve spingere su cosa che html 5 e css3 non hanno: argumented reality e 3d con modellazione poligonale.
Poi smetto perché sennò è off topic :D
Non ricordavo dove l’avevo letta, ho provato a scrivere “adobe contro html5” come chiave di ricerca su google e guarda che ho trovato:
Adobe e HTML5, nemici e amici
Adobe, HTML5 e la confusa evoluzione degli standard web
Purtroppo il denaro e la sete di potere hanno completamente offuscato ogni possibilità di sviluppo dell’essere umano.
Adobe ora come ora sono convinto che veda il pericolo dell’html5, mentre qualche mese fa non era cosi
penso ci siano altre problematiche (politiche dietro) non dimentichiamo che sempre adobe insieme a mozzilla stava cercano (cosa non male) di sostitute javascript con un altro linguaggio (dopo se lo trovo vi linko il progetto comune della pagina di mozzila
inizialmente non v’era grande preoccupazione (forse molti equivocando pensavano flash=video sulla falsa riga di youtube) ora secondo me c’è altro
credo le preoccupazioni nel complesso siano oltre flash
Io ho trovato quest’altra dichiarazione dove lasciano intendere che la preoccupazione di adobe sia dovuta proprio a flash ma ciò non toglie che possa esserci anche dell’altro dietro.
Grazie Aldo per la tua precisazione.
l’ho letta adesso grazie del link
in effetti (coincidenza in questi giorni anche io mi sto meravigliando appunto per quel tag) potrebbe essere cosi come potrebbero essere entrambe le cose più altro cmq al limite meglio aprire un 3d nel forum altrimenti si fuorvia la linea logica dei commenti al post e sarebbe un peccato mi complimento ancora :)
Alcune piccole precisazioni:
– Si può usare HTML5 già da ora?
Volendo sì esistono script come quello HTML5 patch che aggiunge i tag (a livello semantico ma non di funzionalità) anche ai browser più obsoleti
– Ma con IE in giro come si fa?
Vorrei ricordare che ufficialmente Google ha “droppato” il supporto per IE6 proprio in questi giorni. Se non è un segno di voluta evoluzione questo!
– HTML5 VS JS
In realtà c’è pure il drag&drop nelle specifiche di HTML5 ma da quanto ho letto si è fatta una cosa logica, le routine di JS sono state trasformate in tag/attr di HTML5 per velocizzare lo sviluppo e sopratutto per una questione di semantica/accessibilità.
Del resto come ha detto qualcuno ci sono i canvas e qui:
http://www.chromeexperiments.com/ potete trovare degli esperimenti JS+html5 da paura!
– Adobe VS html5
Il w3c non è un consorzio “libero” e indipendente. Tutte le più grandi aziende dell’IT finanziano e hanno uomini dentro il consorzio per poter permettere uno sviluppo “armonico”. Con l’avvento di nuove tecnologie che possono soppiantare FLASH (uno dei prodotti più remunerativi e controversi per Adobe) è logico che quando si può si fa la voce grande. I campanelli di allarme sono scattati sia con il mancato supporto di Flash da parte di Apple per i mobile device, sia con gli esperimenti (anche su youtube) massivi dei nuovi tag con i vari formati (proprietari e non).
Grazie per l’articolo!
Ciao Elmook, grazie a te per le precisazioni che hai fornito e sulle quali mi trovi pienamente d’accordo.
L’unica cosa su cui ho qualche dubbio – che aveva già accennato anche Antonio nel suo intervento – è l’utilizzo di HTML5 già sin da ora.
Penso che questo comporti comunque un aumento del lavoro, quasi raddoppiato in alcuni casi, come potrebbe essere la creazione di un modulo. E consideriamo anche che le specifiche sono ancora in fase di bozza e soggette quindi a possibili cambiamenti.
Per progetti personali possiamo pure sperimentare ma in ambito aziendale ogni giorno di lavoro in più comporta un aumento del costro di produzione e di conseguenza un aumento del prezzo finale per il cliente che non sempre è disposto ad accettare.
Non pensi sia un po’ prematuro utilizzare HTML5 già da adesso?
Per il resto, ripeto, sono assolutamente d’accordo con quanto hai detto.
Ne approfitto per ringraziare tutti i partecipanti che sono intervenuti in questa discussione perchè grazie ai vostri commenti abbiamo arricchito ulteriormente il contenuto dell’articolo ed è questo il vero valore aggiunto.
Proprio belle novità… Solamente il fatto di rendere obbligatori dei campi nelle form in modo così semplice è uno spettacolo…