Skip to content

Chapitre 06

Jump to bottom
ChristopheGueroult edited this page Sep 13, 2017 · 3 revisions

Les formulaires

Notions abordées lors de ce chapitre

Travailler avec input

jQuery Mobile tire parti de l'attribut ui-field-contain, notamment en utilisant l'espace supplémentaire au format horizontal sur mobile pour placer les label et les inputs horizontalement.

<div class="ui-field-contain">
    <label for="name">Votre nom : </label>
    <input type="text" name="name" id="name" value="">
</div>

Voir la démo

Travailler avec textarea

Un problème récurrent avec les formulaires est la mise en forme avec css. jQuery Mobile gère totalement cette partie y compris pour le mode horizontal sur mobile.

Habituellement lorsqu'un utilisateur ajoute du texte dans un textarea, celui-ci fini par ajouter une scrollbar sur le côté (ce qui n'est pas très joli). jQuery Mobile lui étend le textarea au fur et à mesure que l'utilisateur ajoute des lignes de texte.

<div class="ui-field-contain">
  <label for="message">Votre message : </label>
  <textarea name="message"></textarea>
</div>

Voir la démo

Les boutons radio et les checkbox

L'attribut data-role="controlgroup" permet de regrouper un ensemble de boutons radio ou de checkbox.

L'attribut data-type="horizontal" transforme les éléments radio et checkbox en boutons cliquables ayant le même comportement et les présente horizontalement.

<fieldset data-role="controlgroup" data-type="horizontal">
  <legend>Boisson préféré</legend>
  <input type="radio" name="drink" id="drink1" value="Vin">
  <label for="drink1">Vin</label>

  <input type="radio" name="drink" id="drink2" value="Bierre">
  <label for="drink2">Bierre</label>

  <input type="radio" name="drink" id="drink3" value="Eau">
  <label for="drink3">Eau</label>
</fieldset>

Voir la démo

Travailler avec select

Comme pour les radio et checkbox, on utilise data-role=controlgroup pour regrouper un ensemble de <select>. L'attribut data-type=horizontal permet aussi d'aligner les select horizontalement.

Par defaut, jQuery Mobile applique des styles uniquement sur le select pour en modifier l'apparence. Mais lorsque l'on clique sur un select, le menu qui arrarait prend l'apparence d'un menu classique.

Il est possible de demander à jQuery Mobile d'appliquer également des styles sur le menu interne d'un select en utilisant l'attribut data-native-menu=false. Ainsi, le menu apparaitra de manière identique sur toutes les plateformes.

<fieldset data-role="controlgroup" data-type="horizontal">
  <legend>Votre menu</legend>

  <label for="desert">Dessert préféré</label>
  <select name="dessert" id="dessert" data-native-menu="false">
    <option value="Moelleux">Moelleux</option>
    <option value="Fraisier">Fraisier</option>
    <option value="Tiramisu">Tiramisu</option>
  </select>

  <label for="fruit">Fruit préféré</label>
  <select name="fruit" id="fruit">
    <option value="Fraise">Fraise</option>
    <option value="Raisin">Raisin</option>
    <option value="Pomme">Pomme</option>
  </select>
</fieldset>

Voir la démo

Eléments Search, Toggle and Slider

Search bar

Il suffit d'utiliser un <input type=search> et jQuery mobile gère la mise en forme et l'espace disponible pour les formats vertical et horizontal. Dès que l'on commence à saisir, un icon apparait dans l'input à droite pour supprimer la saisie.

<div class="ui-field-contain">
  <label for="recherche">recherche</label>
  <input type="search" name="recherche" id="recherche">
</div>

Champs Flip switch

Les champs flip switch sont des éléments qui permettent de switcher entre 2 valeurs. Pour créer un élément flip switch, on utilise l'attribut data-role=flipswitch sur un élément de type checkbox.

Les textes de chaque état (on / off) par défaut, sont personnalisables grâce aux attributs data-on-text et data-off-text (pour spécifier les textes) et data-wrapper-class="custom-size-flipswitch" pour pouvoir ajouter du css (l'ajout de css est indispensable).

<input type="checkbox" data-role="flipswitch" name="onOff" id="onOff">

<input type="checkbox" data-role="flipswitch" name="gender" id="gender" data-off-text="Homme" data-on-text="Femme" data-wrapper-class="custom-size-flipswitch">

###Champs Slider

Comme pour les champs de recherche, les champs Slider sont basés sur le HTML5. Il suffit de créer un input de type range avec deux attributs (min et max).

jQuery Mobile apporte un autre attribut destiné à la mise en forme : data-highlight="true".

<input type="range" name="minPrice" id="minPrice" min="0" max="100" value="22" >

<input type="range" name="maxPrice" id="maxPrice" min="0" max="100" value="22" data-highlight="true">

jQuery Mobile supporte les éléments de type range dotés de 2 sliders. Il suffit d'encapsuler 2 input de type range dans un élément doté de l'attribut data-role=rangeslider.

<div data-role="rangeslider">
  <label for="minPrice">Montant minimum et maximum</label>
  <input type="range" name="minPrice" id="minPrice" min="0" max="100" value="22" >
  <label for="maxPrice">Montant minimum et maximum</label>
  <input type="range" name="maxPrice" id="maxPrice" min="0" max="100" value="80">
</div>

Champs Slim

Particulièrement utile pour insérer des formulaires dans le footer par exemple, l'attribut data-mini=true permet d'ajouter des champs de formulaire Slim qui prendront moins de place.

<input type="search" name="recherche" id="recherche" data-mini="true">

Voir la démo

Clone this wiki locally