Anche se i moduli HTML5 offrono significativamente più funzionalità rispetto ai loro predecessori, possono comunque essere definiti allo stesso modo.
HTML5 offre effettivamente molti nuovi tipi di campo. Attualmente il supporto da parte dei browser attuali è già abbastanza buono. Tuttavia, in questo punto vi presenterò solo i tipi di campo che sono praticamente utilizzabili.
Selettore di colore
Potete offrire ai vostri visitatori la possibilità di selezionare un colore.
Cliccando su un campo del genere, si aprirà un tipico selettore di colore.
Attraverso di esso è possibile selezionare il colore desiderato. Un tale selettore di colore è definito attraverso <input type="color" />.
Scegli il tuo colore preferito: <input type="color" name="lf" />
Al campo deve sempre essere assegnato un valore. Se manca o è invalido, verrà automaticamente assunto #000 (quindi nero).
Data e ora
Soprattutto per quanto riguarda i tipi di campo per le date e gli orari, HTML5 offre numerose novità. E questi tipi di campo sono effettivamente significativi. Pensate ad esempio a quali passaggi sono necessari quando si vuole offrire ai propri visitatori un campo di selezione della data. Normalmente senza JavaScript (o anche senza Flash) non c'è niente da fare. Grazie ad HTML5 ora è molto più semplice. Qui è sufficiente definire un campo di input di tipo date.
<input type="date" />
Per la visualizzazione e l'implementazione del calendario è esclusivamente responsabile il browser. I browser dovrebbero mostrare un'apposita widget per la visualizzazione del calendario. In Google Chrome un'applicazione appare così:
Attraverso date si definisce un calendario attraverso il quale gli utenti possono selezionare la data desiderata. Dopo la selezione, la data viene automaticamente inserita nel campo di testo.
In modo altrettanto facile è possibile creare un campo orario. Per questo viene utilizzato un campo di input di tipo time.
<input type="time" />
Attraverso time i browser dovrebbero mostrare elementi di controllo per selezionare un orario.
In modo simile funziona week. Questo visualizza un campo per la selezione della settimana.
<input type="week" />
Inoltre è possibile visualizzare un campo mese.
<input type="month" />
Entrambi i tipi di campo causano la visualizzazione di elementi di controllo attraverso i quali è possibile regolare le informazioni desiderate.
Mentre time e date consentono solo la selezione della data o solo dell'orario, datetime e datetime-local consentono una combinazione delle due varianti.
Con datetime viene mostrato un campo data e un campo per la selezione dell'orario affiancati. (datetime è attualmente supportato solo da Safari e Opera).
È già stato menzionato che i moduli del modulo presentati in questa parte al momento non sono supportati da tutti i browser. Chiunque voglia comunque utilizzarli può fare riferimento a soluzioni JavaScript appropriate. I grandi framework JavaScript come jQuery e Dojo offrono script adatti. Con jQuery UI si presenterebbe così:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>In questo modo siete quindi al sicuro, anche se il browser non supporta il classico date.
Campi per i numeri
Attraverso number viene offerto un campo pensato appositamente per l'inserimento di numeri.
Nel caso più semplice, la definizione di un campo number appare in questo modo:
<input type="number" />
I numeri possono essere inseriti in questi campi in due modi:
• tramite la tastiera
• tramite elementi di controllo
Specificando attributi aggiuntivi, i campi di tipo number possono essere descritti in modo più dettagliato. Iniziamo con i due attributi min e max, che consentono di definire i range di valori dei campi.
• min - il valore minimo possibile
• max - il valore massimo possibile
Tuttavia, questi due attributi influiscono solamente sugli elementi di controllo del browser. Gli inserimenti manuali da parte degli utenti tramite tastiera non vengono influenzati da questi attributi.
A entrambi gli attributi possono essere assegnati numeri interi e in virgola mobile.
Attraverso l'attributo step è possibile specificare il passo che deve essere rispettato dagli elementi di controllo del browser.
<input type="number" min="0" max="8" step="2" />
In questo caso, tramite gli elementi di controllo del browser si possono selezionare solo i valori 0, 2, 4, 6 e 8.
Slider
I campi di tipo range consentono di selezionare un valore all'interno di un determinato intervallo di valori.
I browser interpretano il campo range tramite uno slider.
<input type="range" min="0" max="10" step="2" value="6">
Il valore minimo possibile è specificato dall'attributo min. max descrive il valore massimo possibile. Se mancano i due attributi min e max, i browser considerano i valori 0 e 100.
Attraverso step è possibile definire l'incremento desiderato.
Creare campi di ricerca
Il tipo search non ha una funzionalità propria. Piuttosto, questo tipo di campo è da considerarsi come un complemento al classico campo di testo. Lo scopo dei campi di tipo search è semplicemente quello di differenziarsi visivamente dai campi di testo standard. Di solito spetta ai browser gestire l'aspetto dei campi search.
<input type="search" />
Come questo venga implementato rimane a discrezione dei produttori. Un'ottima combinazione è l'aggiunta dell'attributo results.
<input type="search" results="5" placeholder="Cerca..." />
Attraverso results si stabilisce quanti dei precedenti inserimenti di ricerca devono essere visualizzati nel campo.
Ma attenzione: l'attributo results non fa parte delle specifiche di HTML5.
