jQuery Mobile Entrées de texte
Les champs d'entrée sont codés avec des éléments HTML standard, et jQuery Mobile seront les styliser regarder attrayant et facile à utiliser pour les appareils mobiles. Vous pouvez également utiliser les nouvelles HTML5 <input> types:
Exemple
<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>
Essayez - le vous - même » Zone de texte
Utilisez <textarea> pour les entrées de texte multi-lignes.
Remarque: La zone de texte sera automatiquement grandir en fonction de nouvelles lignes que vous tapez du texte.
Exemple
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
Essayez - le vous - même » Recherche d'entrée
L'entrée type="search" est nouvelle en HTML5, et définit un champ de texte pour saisir une recherche:
Exemple
<label for="search">Search:</label>
<input
type="search" name="search" id="search">
Essayez - le vous - même » Boutons radio
Les boutons radio sont utilisés lorsqu'un utilisateur ne peut sélectionner qu'un seul un nombre limité de choix.
Pour créer un ensemble de boutons radio, ajoutez une entrée avec type="radio" et une étiquette correspondante. Envelopper les boutons radio dans un <fieldset> élément. Vous pouvez également ajouter une <legend> élément pour définir une légende pour le <fieldset> .
Astuce: Utilisez data-role="controlgroup" , pour regrouper les boutons en même temps:
Exemple
<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>
Essayez - le vous - même » Checkboxes
Les cases à cocher sont utilisées lorsque l'utilisateur peut sélectionner une ou plusieurs options d'un nombre limité de choix:
Exemple
<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>
Essayez - le vous - même » Autres exemples
Pour des boutons ou des cases de radio groupe horizontalement, utilisez le data-type="horizontal" :
Vous pouvez également envelopper un récipient sur le terrain autour de la <fieldset> :
Exemple
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
Essayez - le vous - même » Si vous voulez un de vos boutons pour être "pre-selected" , utiliser le code HTML <input> attribut checked:
Vous pouvez également placer votre formulaire dans une fenêtre:
Exemple
<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>
Essayez - le vous - même »