Attributi di HTML5 per i Form

HTML5 ha introdotto nuovi attributi che di solito si associano ai campi di tipo input dei moduli stessi, alcuni però sono utilizzabili anche all’interno di elementi come vedremo negli esempi. Vorrei ricordare che in questa guida vengono mostrati soltanto i nuovi attributi per i forms di HTML5, dando per scontato che voi conosciate già gli altri di HTML precedenti, se così non fosse, su web-link ci sono guide per tutti i livelli di conoscenza, principianti compresi, grazie alle quali sarà possibile comprendere al meglio lo scopo ed il significato di questi nuovi introdotti da HTML5.

Di seguito la descrizione con esempio dei nuovi attributi da assegnare al campo input che per default è text, libero testo. Nelle attuali versioni di alcuni browser non tutti sono riconosciuti. Quello che meglio di altri ha dimostrato di essere adeguato è al momento Opera.

autocomplete

L’attributo autocomplete ha due stati logici: on ed off rispettivamente per essere attivato o disattivato, per default è già attivo. Serve per riutilizzare i dati già inseriti su form precedenti, se infatti provate ad inserire il dato, vi viene proposto quanto già inserito precedentemente. Con autocomplete off è possibile disattivarlo e diventa utile in quei campi che per ragioni di privacy e/o di sicurezza non devono essere mostrati dati soltanto perchè già utilizzati in precedenza. Si applica ai vari tipi di input type ma è possibile applicarlo anche all’intero modulo se dichiarato nell’elemento principale <form>.

Sopra applicato ad un solo campo riservato per la email, sotto applicato all’intero form e di conseguenza a tutti i campi in esso contenuti.

Questo il risultato:

Mettete il vostro nome su entrambi i campi, premete invio, adesso cancellate le caselle e provate a scrivere di nuovo lo stesso nome, su quella impostata onappena inserite la prima lettera, o fate un doppio click, vi viene autocompletato il nome inserito precedentemente, su quella impostata off invece non succede nulla proprio per via della disabilitazione di questa funzione.

autofocus

L’attributo autofocus richiama il focus nella casella di input alla quale è stato applicato, praticamente il cursore è lì lampeggiante che vi aspetta per introdurre il dato, dovete soltanto iniziare a scrivere.

Questo il risultato:

Ho volutamente disabilitato in questo esempio autofocus perchè sareste arrivati qui ogni volta che facevate un accesso a questa pagina, quindi poteva risultare fastidioso, per farvi vedere come funziona cliccate su questo link e noterete il cursore ad inizio campo che lampeggia, proprio come dopo un click al suo interno per iniziare a scrivere.

form

L’attributo form assegna ad un form un eventuale campo situato fisicamente al di fuori del form stesso, questo fino ad HTML5 era considerato un grave errore, la chiusura di un form con il suo tag </form> impediva di essere preso in considerazione qualsiasi altro elemento valido di un form che ne fosse al di fuori. Con questo attributo invece, facendo riferimento al nome del form assegnato con ID, è possibile posizionare fisicamente un campo in un punto qualsiasi della pagina web facendo in modo che risulti appartenente al modulo e come tale considerato suo a tutti gli effetti.

Questo il risultato:

Si noti il nome assegnato con id (weblink) all’elemento iniziale <form>, si noti la chiusura di </form> ed il campo esterno Cognome che grazie all’attributo form=”weblink” di fatto lo rende un campo facente parte integrante del modulo stesso. proprio come se fosse stato scritto prima della chiusura di </form>.

formaction

L’attributo formaction permette di spedire il modulo a destinazioni diverse, praticamente oltre a quanto dichiarato con l’attributo action di form, è possibile avere più di un solo action. Si adopera con gli elementi input type image e submit. Potrebbe risultare comodo nel caso in cui lo stesso modulo dati dovesse o potesse essere spedito a destinazioni differenti a seconda degli eventi, per esempio volendo contattare un membro di una comunità, anzichè creare tanti form uguli ognuno per ogni membro, se ne crea uno solo e si decide con formaction a chi inviarlo.

Questo il risultato:

Lo stesso modulo può essere inviato a tre destinazioni diverse, (xxx, yyy, zzz) siano queste pagine web, indirizzi di posta o script per l’elaborazione dei dati. Due sono possibili con il pulsante submit ed una con l’immagine grafica.

formenctype

L’attributo formenctype permette di cambiare il tipo di media utilizzato da form per codificare i dati del modulo che di default è MINE, è possibile avere più di un solo enctype ma solo se il method è post. Si adopera con gli elementi input type image e submit.
Potrebbe servire avere più codifiche usando lo stesso modulo anzichè creare tanti moduli uguali, ognuno per una diversa codifica, se ne crea uno solo e si decide con formenctype quale usare.

Questo il risultato:

Lo stesso modulo può essere inviato con diversi tipi di media per codificare i dati. Unico requisito obbligatorio, il method che deve essere di tipo post e non get.

formmethod

L’attributo formmethod permette di cambiare il metodo di spedizione post o get. Si adopera con gli elementi input type image e submit.
Potrebbe servire avere due diversi script che elaborano i dati ed inviarli con due metodi differenti, pos e get.

Questo il risultato:

Lo stesso modulo può essere inviato con i due diversi metodi, tipo post o tipo get.

formnovalidate e novalidate

L’attributo formnovalidate esclude il modulo da una validazione. Si adopera con il solo elemento input type submit. Potrebbe essere utile spedire il modulo senza validazione, in questo caso o si dichiara l’attributo novalidate con <form> oppure si adopera formnovalidate con un secondo pulsante di invio (submit) per avere entrambe le possibilità.

Sopra l’atributo novalidate applicato all’intero modulo. Sotto l’attributo formnovalidate applicato ad un secondo pulsante di invio.

Questo il risultato:

Lo stesso modulo può essere inviato con o senza il controllo di validazione.

formtarget

L’attributo formtarget permette di scegliere dove visualizzare la risposta del server all’invio del nostro modulo, simile al target dei links per intenderci meglio. Si adopera con gli elementi input type image e submit.
Potrebbe servire avere la risposta su una nuova finestra del browser target=”_blank”.

Questo il risultato:

Lo stesso modulo può essere inviato scegliendo magari una nuova finestra del browser per la risposta.

width e height

Gli attributi width e height servono per specificare le dimensioni in larghezza ed in altezza delle immagini, di conseguenza sono applicabili al solo elemento input type image. Proprio come per il tag img di html è buona norma usarlo anche se non è obbligatorio, si agevola il lavoro del browser che saprebbe fin da subito quanto spazio riservare alle dimensioni dell’immagine che dovrà essere caricata prima di essere visualizzata.

Questo il risultato:

list

L’attributo list serve per richiamare l’elemento <datalist> visto in precedenza, una lista di dati selezionabili con un click.

Questo il risultato:

Provate un doppio click nel campo vuoto o ad inserire una lettera presente nei nomi Italia ed Inghilterra.

min e max

Gli attributi min e max delimitano valori minimi e valori massimi che un campo può accettare. Si adopera con gli elementi input type number, range, date, datetime, datetime-local, month, time e week.

Questo il risultato:

Avendo usato min 5 e max 10 il campo accetta soltanto i valori corrispondenti, qualsiasi altro valore genera il messaggio di avviso.

multiple

L’attributo multiple si adopera quando i dati da inserire in quel campo sono più di uno. Si adopera con gli elementi input type file e email.

Questo il risultato:

Avendo usato multiple il campo input accetterà più di un solo file.

pattern

L’attributo pattern si adopera per specificare una espressione regolare in informatica regular expressions, praticamente è possibile vincolare quantità e tipo di dato da inserire usando questa regular expressions che è conosciuta con qualsiasi linguaggio di programmazione. Si adopera con gli elementi input type text, search, url, tel, email, e password.

Questo il risultato:

Nell’esempio si accettano solo 2 caratteri alfabetici dalla A alla Z, maiuscoli e/o minuscoli niente numeri o caratteri speciali. La frase nel title è quella che appare nel caso in cui vogliate inviarlo senza aver rispettato la regola imposta.

placeholder

L’attributo placeholder inserisce provvisoriamente una indicazione scritta di un colore grigio chiaro nella casella di input che sparisce nel momento in cui l’utente compila il campo stesso, molto utile per ricordare quale sia il tipo di dato o lo scopo di quella casella.

Questo il risultato:

Fate click sul campo e provate a digitare qualcosa, con la prima lettera la frase che c’è al momento sparirà.

required

L’attributo required vincola la spedizione del modulo al fatto di aver compilato questo campo, quindi un dato obbligatorio che non può essere omesso.

Questo il risultato:

Provate ad inviare il modulo senza aver inserito alcun dato in questo campo con attributo required

step

L’attributo step= passo, incremento, così come max e min, cambia il suo valore a seconda del contesto, per esempio se inserito in un type data step 1 consente incrementi di 1 giorno, mentre se inserito in un type time l’incremento è di 1 secondo. Si adopera con gli elementi input type number, range, date, datetime, datetime-local, month, time e week.

Questo il risultato:

Avendo usato min 5 e max 10 il campo accetta soltanto i valori corrispondenti, qualsiasi altro valore genera il messaggio di avviso.

Nella prossima lezione vedremo come gestire un filmato video in formati diversi.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.