Modulo jQuery Mobile

jQuery Mobile aggiunge automaticamente un aspetto ottimizzato per il tocco agli HTML form.

Struttura del modulo jQuery Mobile

jQuery Mobile utilizza CSS per impostare lo stile degli elementi di modulo HTML, rendendoli più attraenti e facili da usare.

In jQuery Mobile, è possibile utilizzare i seguenti controlli di modulo:

  • Casella di testo
  • Casella di ricerca
  • Casella di selezione singola
  • Casella di controllo
  • Menu a scelta multipla
  • Barra di scorrimento
  • Interruttore a commutazione a inversione

Quando si lavora con moduli jQuery Mobile, è utile sapere le seguenti informazioni:

  • L'elemento <form> deve essere configurato con gli attributi method e action
  • Ogni elemento di modulo deve essere configurato con l'attributo "id" unico. Questo id deve essere unico nelle pagine del sito. Questo è perché il modello di navigazione a pagina singola di jQuery Mobile permette la presentazione contemporanea di molte "pagine" diverse.
  • Ogni elemento del modulo deve avere un etichetta (label). Impostare l'attributo for del label per abbinarlo all'id dell'elemento.

Esempio

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

Prova personalmente

Se si desidera nascondere il label, utilizzare la classe ui-hidden-accessible. Questo è molto comune, quando si desidera che l'attributo placeholder del elemento assumi il ruolo del label:

Esempio

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Nome：</label>
  <input type="text" name="fname" id="fname" placeholder="Nome...">
</form>

Prova personalmente

Contenitore di campo

Se si desidera che il label e gli elementi del modulo si visualizzino correttamente su schermi larghi, utilizzare l'elemento <div> o <fieldset> con l'attributo data-role="fieldcontain" per avvolgere il label o l'elemento del modulo:

Esempio

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Prova personalmente

Suggerimento:L'attributo fieldcontain imposta uno stile per il label e i controlli del modulo in base alla larghezza della pagina. Quando la larghezza della pagina è maggiore di 480px, posiziona automaticamente il label e il controllo del modulo sulla stessa riga. Quando è inferiore a 480px, il label viene posizionato sopra l'elemento del modulo.

Suggerimento:Se si desidera evitare che jQuery Mobile imposti automaticamente uno stile per gli elementi cliccabili, utilizzare l'attributo data-role="none":

Esempio

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Prova personalmente

Invio modulo in jQuery Mobile

Suggerimento:jQuery Mobile invierà automaticamente il modulo tramite AJAX e proverà a integrare la risposta del server nel DOM dell'applicazione.