Formulaires jQuery Mobile

jQuery Mobile ajoute automatiquement un aspect convivial et facile à toucher aux formulaires HTML.

Structure des formulaires jQuery Mobile

jQuery Mobile utilise CSS pour définir les styles des éléments de formulaire HTML afin de les rendre plus attrayants et plus faciles à utiliser.

Dans jQuery Mobile, vous pouvez utiliser les contrôles de formulaire suivants :

  • Champ de texte
  • Champ de recherche
  • Case à choix multiple
  • Case à cocher
  • Menu de sélection
  • Barre de défilement
  • Interrupteur basculant

Lorsque vous travaillez avec les formulaires jQuery Mobile, vous devriez connaître les informations suivantes :

  • L'élément <form> doit être configuré avec les attributs method et action.
  • Chaque élément de formulaire doit être configuré avec une propriété "id" unique. Cet id doit être unique dans les pages du site. Cela est dû au modèle de navigation sur une seule page de jQuery Mobile qui permet l'affichage simultané de nombreux "pages" différents.
  • Chaque élément de formulaire doit avoir un marqueur (label). Configurez l'attribut for du label pour correspondre à l'id 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

Pour cacher le label, utilisez la classe ui-hidden-accessible. C'est très courant, lorsque vous avez besoin que l'attribut placeholder de l'élément remplisse la fonction du label :

Exemple

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

Essayez-le vous-même

Conteneur de domaine

Pour que les labels et les éléments de formulaire s'affichent correctement sur les écrans larges, enveloppez les labels ou les éléments de formulaire avec un élément <div> ou <fieldset> portant l'attribut data-role="fieldcontain":

Exemple

<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>

Essayez-le vous-même

Astuce :L'attribut fieldcontain définit les styles des labels et des contrôles de formulaire en fonction de la largeur de la page. Lorsque la largeur de la page est supérieure à 480px, il place automatiquement le label et le contrôle de formulaire sur la même ligne. Lorsqu'elle est inférieure à 480px, le label est placé au-dessus de l'élément de formulaire.

Astuce :Pour éviter que jQuery Mobile ne définisse automatiquement les styles pour les éléments cliquables, utilisez l'attribut data-role="none":

Exemple

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

Essayez-le vous-même

Soumettre un formulaire dans jQuery Mobile

Astuce :jQuery Mobile soumettra automatiquement le formulaire via AJAX et tentera d'intégrer la réponse du serveur dans le DOM de l'application.