Ingressi di testo jQuery Mobile
I campi di input sono codificati con elementi HTML standard e jQuery Mobile sarà lo stile loro di guardare attraente e facile da usare per i dispositivi mobili. È inoltre possibile utilizzare le nuove HTML5 <input> tipi:
Esempio
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">Date of Birth:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
Prova tu stesso " Area di testo
Utilizzare <textarea> per gli ingressi di testo multilinea.
Nota: L'area di testo crescerà automaticamente per adattarsi nuove linee durante la digitazione del testo.
Esempio
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
Prova tu stesso " Ricerca ingresso
L'ingresso type="search" è nuovo in HTML5, e definisce un campo di testo per l'inserimento di una ricerca:
Esempio
<label for="search">Search:</label>
<input
type="search" name="search" id="search">
Prova tu stesso " Pulsanti di scelta
I pulsanti di opzione vengono utilizzati quando un utente può selezionare solo uno di un numero limitato di scelte.
Per creare un set di pulsanti di opzione, aggiungere un ingresso con type="radio" e un corrispondente etichetta. Avvolgere i pulsanti di opzione in un <fieldset> elemento. È inoltre possibile aggiungere un <legend> elemento per definire una didascalia per il <fieldset> .
Suggerimento: Usa data-role="controlgroup" , per raggruppare i pulsanti insieme:
Esempio
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose your
gender:</legend>
<label
for="male">Male</label>
<input
type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input
type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
Prova tu stesso " caselle di controllo
Le caselle di controllo vengono utilizzate quando un utente può selezionare una o più opzioni di un numero limitato di scelte:
Esempio
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose as many
favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input
type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input
type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input
type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
Prova tu stesso " Altri esempi
Per i pulsanti di opzione o caselle di controllo del gruppo orizzontale, utilizzare il data-type="horizontal" :
Si può anche avvolgere un contenitore di campo intorno alla <fieldset> :
Esempio
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
Prova tu stesso " Se si desidera che uno dei tuoi pulsanti da "pre-selected" , utilizzare il codice HTML <input> attributo checked:
È anche possibile inserire il modulo all'interno di un pop-up:
Esempio
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>
<div
data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
Prova tu stesso "