Elementi di input di modulo jQuery Mobile

Input di testo jQuery Mobile

I campi di input sono scritti con elementi HTML standard, jQuery Mobile li configurerà con stili estetici e facili da usare specifici per i dispositivi mobili. Puoi anche utilizzare i nuovi tipi di input HTML5:

Esempio

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Nome completo:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Data di nascita:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Il tuo indirizzo email..">
  </div>
</form>

Prova personalmente

Suggerimento:Utilizza placeholder per specificare una breve istruzione che descriva il valore previsto per il campo di input:

<input placeholder="sometext">

Casella di testo

Utilizza <textarea> per implementare l'inserimento di testo multi-linea.

Nota:La casella di testo si espande automaticamente per adattarsi alla lunghezza delle righe di testo inserite.

Esempio

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Prova personalmente

Casella di ricerca

Il tipo di input type="search" è una nuova tipologia di HTML5, utilizzata per definire un campo di testo per l'inserimento di parole di ricerca:

Esempio

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Prova personalmente

Pulsanti di opzione singola

I pulsanti di opzione singola vengono utilizzati quando l'utente seleziona una delle opzioni limitate.

Per creare un set di pulsanti di opzione singola, aggiungi un elemento input con type="radio" e la relativa etichetta. Avvolgi i pulsanti di opzione singola nell'elemento <fieldset>. Puoi anche aggiungere un elemento <legend> per definire il titolo del <fieldset>.

Suggerimento:Usa l'attributo data-role="controlgroup" per combinare questi pulsanti:

Esempio

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Scegli il tuo genere:</legend>
      <label for="male">Maschio</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Femmina</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Prova personalmente

Casella di spunta

Le caselle di spunta vengono utilizzate quando l'utente seleziona una o più opzioni da una lista limitata:

Esempio

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Scegli il numero di colori preferiti che desideri:</legend>
      <label for="red">Rosso</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Verde</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blu</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Prova personalmente

Altri esempi

Per raggruppare orizzontalmente caselle di selection o caselle di spunta, utilizzare l'attributo data-type="horizontal":

Esempio

<fieldset data-role="controlgroup" data-type="horizontal">

Prova personalmente

Puoi anche utilizzare il contenitore di dominio per avvolgere <fieldset>:

Esempio

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Scegli il tuo genere:</legend>
  </fieldset>
</div>

Prova personalmente

Se desideri "selezionare predefinito" uno dei pulsanti, utilizza l'attributo checked del tag HTML <input>:

Esempio

<input type="radio"> checked>
<input type="checkbox"> checked>

Prova personalmente