Prima di iniziare cominciamo con il dire che esistono diversi tipi di attributi per i tag HTML. Nel particolare:
disabled
) anche se sono accettati comunque alcuni valori. Nello specifico possiamo valorizzarlo con una stringa vuota (es. disabled=""
) oppure con il nome dell’attributo senza spazi iniziali o finali (es. disabled=disabled
o disabled="disabled"
).type
per il tag ul
può assumere i valori disc
, square
e circle
). A volte le parole chiave possono avere sinonimi. Una parola chiave potrebbe essere anche ""
, cioè il valore nullo.class
, id
e placeholder
.Dopo questa premessa vediamo subito all’opera i primi tre dei nuovi attributi per i form definiti in HTML5: autofocus
, placeholder
e form
.
L’attributo autofocus è un attributo booleano e serve a impostare il focus su uno specifico elemento del form
appena la pagina è caricata. Un esempio canonico è quello della home page di Google: appena viene caricata il focus è automaticamente impostato sul campo per la ricerca.
Ovviamente solo un elemento per pagina può avere l’attributo autofocus
.
Questo attributo deve essere usato con parsimonia in quanto alcuni utenti, come quelli che usano la barra spaziatrice per scorrere la pagina, potrebbero trovare questa costrizione fastidiosa, preferendo un atteggiamento più soft.
È per questo motivo che autofocus
dovrebbe essere usato solo nelle pagine che contengono solamente (o principalmente) form
(come per esempio pagine di login o di ricerca).
Ecco comunque un esempio pratico:
<form action="/" method="get"> <input type="text" name="myname" id="myid" autofocus> <input type="submit" value="Invia"> </form>
Per far sì che l’attributo autofocus funzioni su tutti i browser è sufficiente modificare il codice in questo modo:
<form action="/" method="get"> <input type="text" name="myname" id="myid" autofocus > <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("myid").focus(); } </script> <input type="submit" value="Invia" > </form>
Il valore dell’attributo placeholder è visualizzato all’interno di un input
, o di una textarea
, fin quando il campo è vuoto e non guadagna il focus (tramite il click o spostandosi su di esso il tasto Tab
).
Semanticamente l’attributo placeholder dovrebbe essere valorizzato con valori accettabili dal form, dovrebbe, in altre parole, contenere un esempio di ciò che l’utente andrà a scrivere nel campo.
Spesso il placeholder
viene utilizzato erroneamente al posto della label
descrivendo quindi cosa dovrebbero inserire.
All’interno del nostro progetto guida si fa molto uso dell’attributo placeholder
. Per esempio:
<form name="ricerca" method="post" action="/search"> <label> Parola chiave: <input type="search" autocomplete="on" placeholder="article, section, ..." name="keyword" required maxlength="50"> </label> <input type="submit" value="ricerca"> </form>
Creando un risultato come nella seguente immagine:
Figura 17 – Resa visiva di un input con l’attributo placeholder
Non sarà semplice scrivere una funzione che faccia funzionare il placeholder su tutti i browser e per tutti gli input, ma data la natura dell’attributo non dovrebbe essere nemmeno necessario.
Ad ogni modo, se volessimo farlo funzionare su tutti i browser, avremmo diverse soluzioni, alcune più semplici altre più complesse.
Proponiamo qui l’alternativa proposta da Andrew January sul suo blog.
Nello script placeholder.js abbiamo modificato i commenti mettendoli in italiano di modo che sia di più facile comprensione. Per farlo funzionare si ricordi di includere la libreria jQuery nella pagina.
Un nuovo attributo che si può inserire in tutti gli input
è appunto form
, anche se sfortunatamente non è molto supportato e non esiste una vera e propria alternativa.
Questo nuovo attributo serve per specificare a quale form
, o a quali form
, l’input fa riferimento. Richiede come valore l’id
del form a cui vogliamo che faccia riferimento, o nel caso di più form, gli id
separati da uno spazio, ” “.
Ecco comunque un esempio pratico:
<form action="/" method="get" id="myFormId"> <input type="text" name="myname"> <input type="submit" value="Invia"> </form> <input type="text" name="mysurname" form="myFormId">
Nonostante l’input con id
mysurname
sia fuori dal form, inviando il form inviamo anche il suo valore grazie al suo attributo form
.
L’uso di questo attributo è sconsigliato a meno di non conoscere con certezza il browser dell’utente che utilizzarà la nostra applicazione.
Come detto nella descrizione dell’attributo, non c’è una vera e propria alternativa. Siamo di fronte a due soluzioni:
<input type="hidden">
e quindi procedere con l’invio.Form: nuovi attributi | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
autofocus | No | 4.0+ | 4.0+ | 2.0+ | 9.0+ |
placeholder | No | 4.0+ | 4.0+ | 2.0+ | 11.0+ |
form | No | 4.0+ | Nightly build | Nightly build | 9.0+ |
inserisci la tua e-mail nel box qui sotto: