Una parte molto importante e delicata per un'applicazione mobile è costituita dai form: le dimensioni ridotte dello schermo, l'ingombro della tastiera a video e la sua minor praticità rispetto alla tastiera fisica, rendono necessaria una maggior attenzione nella resa grafica e nella disposizione dei campi.
Per realizzare form con jQuery Mobile, vanno seguite tutte le best practices che si usano generalmente, con alcuni accorgimenti in più.
Il framework, infatti, è in grado di riconoscere il markup del form ed applica a tutti gli elementi una serie di caratteristiche funzionali e grafiche in modo da rendere più facile la compilazione del modulo.
È bene notare che i dati inseriti saranno (di default) inviati attraverso una chiamata AJAX ed i risultati verranno visualizzati come una normale pagina jQuery Mobile.
Markup dei campi
Anzitutto è importante associare una label a ogni campo mettendo in relazione gli attributi id e for:
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome" />In secondo luogo è bene ricordare che, dato il metodo di caricamento AJAX delle pagine in jQuery Mobile, si può presentare il caso in cui nello stesso DOM esistano più di una form. In tal senso ogni compo dovrà avere un id univoco, magari apponendo come prefisso un identificativo del tipo di modulo:
<label for="contatti_nome">Nome</label>
<input type="text" name="nome" id="contatti_nome" />Poiché stiamo utilizzando HTML5 e presupponiamo che molti utenti abbiano device in grado di supportarlo, potremmo anche utilizzare il nuovo attributo placeholder in alternativa alla label per risparmiare spazio.
In tal caso (a partire da jQuery Mobile 1.0RC2) è possibile nascondere l'etichetta solo visivamente, mantenendo inalterato il grado di accessibilità per gli screen reader. Basterà applicarle una classe ui-hidden-accessible:
<label for="contatti_nome" class="ui-hidden-accessible">Nome</label>
<input type="text" name="nome" id="contatti_nome" placeholder="Nome"/>Lo stesso risultato è raggiungibile aggiungendo la classe ui-hide-label ad un eventuale contenitore.
Per finire, con HTML5 sono stati introdotti nuovi tipi di campo, quali email e tel (la guida a HTML5 ne fa una descrizione completa). Il vantaggio principale nell'utilizzarli sta nel fatto che, nei device mobile, quando l'utente seleziona il campo la tastiera a video cambia formato rendendo più facile la digitazione:
<label for="contatti_email">E-mail</label>
<input type="email" name="email" id="contatti_email" placeholder="E-mail"/>Sebbene al momento non tutti siano supportati, nella peggiore delle ipotesi vi ritroverete con un semplice campo di testo e con il comportamento di default.
Markup del contenitore
Come detto in precedenza, il framework riconosce una determinata struttura di markup. Sebbene non sia indispensabile, è bene racchiudere più campi correlati in un contenitore (div o fieldset) ed associargli un attributo data-role="fieldcontain".
Con questo markup ogni etichetta ed il suo campo associato verranno affiancate di default, per poi essere allineate verticalmente in schermi al di sotto dei 480px.
Ecco un primo esempio di una form potenziata da jQuery Mobile.
