Sommario
HTML5 incorpora nuovi elementi per facilitare la creazione di campi dati che in molti casi dovevano essere programmati con javascript o aggiungere una libreria esterna in un linguaggio che consentisse di estendere le capacità degli elementi xhtml e html4.Molti programmatori continuano a lavorare in modo tradizionale poiché è supportato dalla maggior parte dei browser, gli ultimi miglioramenti sono supportati solo dalle versioni più recenti.
HTML5 offre una serie di nuovi attributi per l'attributo type dell'elemento di input, ovvero la maggior parte degli elementi di un modulo, come le caselle di testo.
Alcuni di questi noti attributi html sono:
Tipo di input = testo - Casella di testo
input type = password - Campo password che nasconde la password con asterischi.
Tipo di input = invia - Pulsante per inviare moduli
NUMERO TIPO ATTRIBUTO REGISTRO
L'elemento che contiene l'attributo type number, permette non solo di determinare che il valore inserito è numerico, ma anche di restringerlo tra massimo e minimo, possiamo vedere nell'immagine come abbia anche la validazione senza bisogno di programmare nulla
Digitare il numeroATTRIBUTO TIPO DATA (DATA)Digitare il numero
Numero passaggio (1-40):
L'attributo del tipo di data viene utilizzato per i campi in cui è necessario contenere una data. A seconda del browser e del supporto che offrono, il controllo del calendario sembrerà in grado di selezionare una data.
L'attributo del tipo di colore viene utilizzato per i campi in cui è necessario contenere un colore. A seconda del browser e del supporto che offrono, il controllo del tipo di colorpicker sembrerà in grado di selezionare un colore o scrivere il colore in esadecimale. Il selettore apparirà come un pop-up quando si fa clic sul colore.
Tipo di colore
Seleziona un colore:
L'attributo del tipo di email viene utilizzato per i campi in cui è necessario contenere un'email. A seconda del browser e del supporto che offrono, convaliderà che il testo inserito ha il formato di un'e-mail, altrimenti apparirà un messaggio di errore, questo faciliterà la convalida di un modulo senza programmazione.
Tipo di email
Inserisci l'email:
L'attributo url type viene utilizzato per i campi in cui è necessario contenere un dominio, un url. A seconda del browser e del supporto che offrono, convaliderà che il testo inserito ha il formato di un dominio, ma apparirà un messaggio di errore, questo faciliterà la convalida di un modulo senza programmazione. Non è necessario che contenga http o www, in tal caso se lo richiediamo dovremo convalidarlo tramite la programmazione.
Tipo di URL
Inserisci l'email:
1. Attributo di completamento automatico
Quando scriviamo in un campo del form troviamo che generalmente il browser ci darà la possibilità di completare automaticamente ciò che stiamo scrivendo in quel momento con del testo con cui abbiamo già scritto in precedenza, questo può dare problemi di sicurezza poiché, ad esempio, se scriviamo diverse email perché il computer è stato utilizzato da un altro utente, potremmo scrivere per vedere le informazioni che ha inserito un altro utente. Nell'esempio disattiviamo il completamento automatico nella posta, ma non negli altri campi. Può anche essere disabilitato dal browser ma molti utenti non sanno che esiste l'opzione o come disabilitare il completamento automatico.
Vediamo che quando si inserisce la parola Autocomplete e si invia quando si accede successivamente allo stesso modulo e si preme solo la lettera A, in questo caso suggerisce già la parola che avevamo scritto in precedenza.Attributo di completamento automatico
Nome:
E-mail:
Questo attributo serve per indicare in quale input di un form deve essere posizionato il cursore quando la pagina web viene caricata, se non è presente partirà dal primo che trova. Questo può anche essere programmato con jQuery per concentrarsi su diversi controlli secondo necessità.
Questo attributo è molto utile per gestire elementi al di fuori di un form indipendentemente da dove si trova nella struttura del web.
Possiamo vedere nel codice sorgente HTML che abbiamo creato un modulo per inserire i dati di un prodotto poi del testo esplicativo e infine abbiamo messo un campo di testo per lo stock fuori dal modulo, ma lo colleghiamo a questo modulo attraverso il suo ID di identificazione = "FormA" nel campo di testo stock metteremo che lo colleghiamo al form form = "formA", in questo modo all'invio del form verranno inviati anche tutti gli elementi relativi.Attributo del modulo
Prodotto:
Descrizione:
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
Azione:
4. Attributo FormAction
Questo attributo è molto utile per inviare lo stesso form a pagine diverse, cosa che prima doveva essere programmato in javascript e inviare i parametri di tutti gli elementi del form per poterlo inoltrare, in alcuni casi diventava molto ingombrante, soprattutto se c'erano più forme che dipendevano l'una dall'altra.
Prendiamo l'esempio del caso precedente con un pulsante inviamo il form alla pagina record.php e con l'altro a stock.php
Attributo del modulo
Prodotto:
Descrizione:
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
Stock: attributo immagine con invio Se vogliamo utilizzare un'immagine come pulsante di invio per inviare un modulo, l'unico modo per farlo era inserire un'immagine o utilizzare fogli di stile css e quindi eseguire la funzionalità con javascript.Attributo del tipo di immagine
Prodotto:
Descrizione:
Questo attributo consente di definire un elenco in un elemento e quindi applicarlo a un elemento di input in modo che esegua una ricerca durante la digitazione.
Attributo di tipo elenco e datalist
