Nuovi attributi per i form: autofocus, placeholder e form

I tipi di attributi

Prima di iniziare cominciamo con il dire che esistono diversi tipi di attributi per i tag HTML. Nel particolare:

• Attributi booleani: questi tipi di attributi hanno due stati, lo stato vero e lo stato falso. Il primo è rappresentato dalla presenza dell'attributo mentre il secondo, lo stato falso, è rappresentato dalla sua assenza. Il valore dell'attributo, quindi, non è necessario (es. 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").
• Attributi enumerati: questi tipi di attributi possono prendere come valore un insieme finito di parole chiavi (es. l'attributo 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.
• Attributi generici: questo tipo di attributo, invece, può prendere qualsiasi valore. Esempi di questi attributi sono 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.

autofocus

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).

Esempi d'uso dell'attributo autofocus

Ecco comunque un esempio pratico:

<form action="/" method="get">
  <input type="text" name="myname" id="myid" autofocus>
  <input type="submit" value="Invia">
</form>

Alternative per l'implementazione dell'attributo autofocus

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>

placeholder

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.

Esempi d'uso dell'attributo placeholder

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:

Alternative per l'implementazione dell'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.

form

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, " ".

Esempi d'uso dell'attributo form

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.

Alternative per l'implementazione dell'attributo form

Come detto nella descrizione dell'attributo, non c'è una vera e propria alternativa. Siamo di fronte a due soluzioni:

• La prima è quella di agire sul DOM e spostare gli elementi interessati all'interno del form.
• La seconda è quella di assegnare una funzione al submit del form che cerchi i valori degli input interessati e per ognuno di questi inserire nel DOM degli <input type="hidden"> e quindi procedere con l'invio.

Tabella del supporto sui browser

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+