jQuery Mobile automatiquement les formulaires HTML style pour leur donner un aspect attrayant et touch-friendly.
jQuery Mobile Form Structure
jQuery Mobile utilise CSS à des éléments de formulaire HTML de style, ce qui les rend attrayant et facile à utiliser.
Dans jQuery Mobile, vous pouvez utiliser les contrôles de formulaire suivants:
- Entrées de texte
- recherche Entrées
- Boutons radio
- Checkboxes
- Sélectionnez menus
- Sliders
- Commutateurs à bascule flip
Lorsque vous travaillez avec des formes jQuery Mobile vous devez savoir:
- Le <form> élément doit avoir une méthode et un attribut d'action
- Chaque élément de formulaire doit avoir un attribut unique "id". L'identifiant doit être unique à travers les pages du site. Ceci est parce que d'une seule page du modèle de navigation de jQuery Mobile permet de nombreuses différentes "pages" d'être présents en même temps
- Chaque élément de formulaire doit avoir une étiquette. Définissez l'attribut for de l'étiquette pour correspondre à l'identifiant de l'élément
Exemple
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Essayez - le vous - même » Astuce: Utilisez un espace réservé pour spécifier une courte pointe qui décrit la valeur attendue d'un champ d'entrée:
Exemple
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Essayez - le vous - même » Astuce: Pour masquer l'étiquette, utilisez la "ui-hidden-accessible" classe. Ceci est souvent utilisé lorsque vous souhaitez l'attribut d'espace réservé de l'élément pour servir de l'étiquette:
Exemple
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Essayez - le vous - même » Astuce: Si vous voulez un "clear button" d' "clear button" (une icône de X sur le côté droit du champ d'entrée qui efface le contenu du champ), ajouter les données-clear-btn = "true":
Exemple
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Essayez - le vous - même » Le "clear button" peut être ajouté sur un <input> élément, sauf pour <textarea> . Les champs de recherche ont cet attribut à "true" par défaut - pour le changer, il suffit de spécifier les data-clear-btn="false" .
jQuery Forme mobile Boutons
Les boutons de formes sont codées avec la norme HTML <input> éléments (bouton reset, présenter). Ils sont automatiquement décorées, ce qui les rend attrayant et facile à utiliser sur les deux appareils mobiles et les ordinateurs de bureau:
Exemple
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Essayez - le vous - même » Pour le style en outre un <input> bouton, utilisez l'un des attributs * Data- énumérés dans le tableau ci-dessous:
La valeur en gras indique la valeur par défaut.
| Attribut | Valeur | La description |
|---|---|---|
| data-corners | true | false | Indique si le bouton doit avoir des coins arrondis ou non |
| data-icon | Icons Reference | Indique l'icône du bouton |
| data-iconpos | left | right | top | bottom | notext | Indique la position de l'icône |
| data-inline | true | false | Indique si le bouton doit être en ligne ou non |
| data-mini | true | false | Indique si le bouton doit être faible ou non |
| data-shadow | true | false | Indique si le bouton doit avoir des ombres ou non |
Inclure ou exclure l'attribut (s) que vous souhaitez / ne veulent pas:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Essayez - le vous - même » Field Containers
Pour faire des étiquettes et des éléments de formulaire regarder correctement sur des écrans plus larges, envelopper un <div> ou <fieldset> élément avec la "ui-field-contain" classe autour de l'élément label / forme:
Exemple
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<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>
Essayez - le vous - même » Le "ui-field-contain" étiquettes de style de classe et les contrôles de formulaire en fonction de la largeur de la page. Lorsque la largeur de la page est supérieure à 480px, il placer automatiquement l'étiquette sur la même ligne que le contrôle de formulaire. Lorsque moins de 480px, l'étiquette sera placée au-dessus de l'élément de forme.
Astuce: Pour éviter jQuery Mobile automatiquement les éléments tappable / cliquables de style, utilisez le data-role="none" attribut:
Exemple
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Essayez - le vous - même » Soumission de formulaire dans jQuery Mobile
jQuery Mobile va gérer automatiquement la soumission du formulaire via AJAX, et tentera d'intégrer la réponse du serveur dans le DOM de l'application.