Éléments d'entrée de formulaire jQuery Mobile

Entrée de texte jQuery Mobile

Les champs d'entrée sont écrits avec des éléments HTML standards, jQuery Mobile leur applique des styles beaux et utilisables spécifiques aux appareils mobiles. Vous pouvez également utiliser les nouveaux types <input> HTML5 :

Exemple

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Nom complet :</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Anniversaire :</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-mail :</label>
    <input type="email" name="email" id="email" placeholder="Votre adresse e-mail..">
  </div>
</form>

Essayez-le vous-même

Astuce :Utilisez placeholder pour spécifier une courte indication pour décrire la valeur attendue du champ d'entrée :

<input placeholder="sometext">

Champ de texte

Utilisez <textarea> pour implémenter l'entrée de texte multiligne.

Remarque :Le champ de texte s'agrandit automatiquement pour s'adapter aux lignes de texte que vous entrez.

Exemple

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Informations supplémentaires:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Essayez-le vous-même

Boîte de recherche

Le type d'entrée type="search" est une nouvelle type dans HTML5, utilisé pour définir un champ de texte pour l'entrée des mots de recherche :

Exemple

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Essayez-le vous-même

Boutons radio

Les boutons radio sont utilisés lorsque l'utilisateur sélectionne une option parmi un nombre limité.

Pour créer un ensemble de boutons radio, ajoutez un élément input avec type="radio" ainsi qu'un label correspondant. Enveloppez les boutons radio dans un élément <fieldset>. Vous pouvez également ajouter un élément <legend> pour définir le titre du <fieldset>.

Astuce :Utilisez l'attribut data-role="controlgroup" pour regrouper ces boutons :

Exemple

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choisissez votre genre:</legend>
      <label for="male">Masculin</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Féminin</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Essayez-le vous-même

Cases à cocher

Les cases à cocher sont utilisées lorsque l'utilisateur sélectionne une ou plusieurs options parmi un nombre limité d'options :

Exemple

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choisissez autant de couleurs préférées que vous le souhaitez:</legend>
      <label for="red">Rouge</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Vert</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Bleu</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Essayez-le vous-même

Plus d'exemples

Pour regrouper horizontalement des cases à cocher ou des cases à c��ter, utilisez l'attribut data-type="horizontal" :

Exemple

<fieldset data-role="controlgroup" data-type="horizontal">

Essayez-le vous-même

Vous pouvez également utiliser un conteneur de domaine pour envelopper <fieldset> :

Exemple

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choisissez votre genre:</legend>
  </fieldset>
</div>

Essayez-le vous-même

Si vous souhaitez "précocher" l'un des boutons, utilisez l'attribut checked du tag HTML <input> :

Exemple

<input type="radio"> checked>
<input type="checkbox"> checked>

Essayez-le vous-même