JdB.CSS BETA

Les formulaires

jdb-input


Partager cette page

Un formulaire complet

Dans l'exemple ci-dessous, on utilise le système de grille responsive pour faire apparaître les champs sur la même ligne (sur des écrans plus petits, elles s'empileront horizontalement avec une largeur de 100%). Vous en apprendrez davantage à ce sujet dans ici.

Créer un compte

Les * indiquent les champs obligatoires.






Code :
<div class="jdb-border">
  <div class="jdb-container jdb-light-gray jdb-border-bottom">
    <h4 class="jdb-h4">Créer un compte</h4>
  </div>
  <form class="jdb-container jdb-inputs-all">
    <div class="jdb-margin-top jdb-right-align jdb-small">
      Les <span class="jdb-text-red">*</span> indiquent les champs obligatoires.
    </div>
    <div class="jdb-row-padding" style="margin-left:-8px; margin-right:-8px">
      <div class="jdb-half">
        <div class="jdb-section">
          <label class="jdb-label jdb-label-required" for="first-name">Prénom</label>
          <input type="text" class="jdb-input" name="first-name" id="first-name" placeholder="John" required>
        </div>
      </div>
      <div class="jdb-half">
        <div class="jdb-section">
          <label class="jdb-label jdb-label-required" for="name">Nom</label>
          <input type="text" class="jdb-input" name="name" id="name" placeholder="Doe">
        </div>
      </div>
    </div>
    <div class="jdb-section">
      <label class="jdb-label jdb-label-required" for="email">Adresse email</label>
      <input type="text" class="jdb-input" name="email" id="email" placeholder="email@exemple.com" required>
    </div>
    <div class="jdb-row-padding" style="margin-left:-8px; margin-right:-8px">
      <div class="jdb-half">
        <div class="jdb-section">
          <label class="jdb-label jdb-label-required">Sexe</label><br/>
          <input type="radio" class="jdb-radio" name="gender" id="male" required>
          <label class="jdb-label" for="male">Homme</label><br/>
          <input type="radio" class="jdb-radio" name="gender" id="female" required>
          <label class="jdb-label" for="female">Femme</label><br/>
          <input type="radio" class="jdb-radio jdb-disabled" name="gender" id="undefined" disabled>
          <label class="jdb-label" for="undefined">Je ne sais pas (désactivé)</label>
        </div>
      </div>
      <div class="jdb-half">
        <div class="jdb-section">
          <label class="jdb-label jdb-label-required">Hobby</label><br/>
          <input type="checkbox" class="jdb-check" name="gender" id="music" required>
          <label class="jdb-label" for="music">Musique</label><br/>
          <input type="checkbox" class="jdb-check" name="gender" id="sports" required>
          <label class="jdb-label" for="sports">Sport</label>
        </div>
      </div>
    </div>
    <div class="jdb-section">
      <label class="jdb-label" for="bio">Biographie</label><br/>
      <textarea name="bio" id="bio" cols="30" rows="5" class="jdb-input-all" placeholder="Decrivez-vous en quelques mots"></textarea>
    </div>
    <div class="jdb-section">
      <label for="location" class="jdb-label"></label>
      <select name="location" id="location" class="jdb-select-all">
        <option>Sélectionner votre pays de résidence</option>
        <option value="Belgique">Belgique</option>
        <option value="France">France</option>
        <option value="Canada">Canada</option>
      </select>
    </div>
    <div class="jdb-section">
      <input type="checkbox" name="accept-terms" id="accept-terms" class="jdb-check" required>
      <label for="accept-terms" class="jdb-label jdb-label-required">
        Je confirme que tout est correcte
      </label>
    </div>
    <div class="jdb-section">
      <button class="jdb-button jdb-focusable jdb-round jdb-red" type="reset">
        <i class="fa fa-times" aria-hidden="true"></i> Annuler
      </button>
      <button class="jdb-button jdb-focusable jdb-round jdb-green" type="submit">
        <i class="fa fa-user-plus" aria-hidden="true"></i> S'inscrire
      </button>
    </div>
  </form>
</div>

Étiquettes au dessus

Formulaire

Code :
<form class="jdb-container jdb-focusable-inputs">
  <div class="jdb-section">
    <label class="jdb-label" for="first-name">Prénom</label>
    <input type="text" class="jdb-input" id="first-name">
  </div>
  <div class="jdb-section">
    <label class="jdb-label" for="name">Nom</label>
    <input type="text" class="jdb-input" id="name">
  </div>
  <div class="jdb-section jdb-right-align">
    <button class="jdb-button jdb-focusable jdb-round jdb-green" type="submit">
      <i class="fa fa-user-plus" aria-hidden="true"></i> S'inscrire
    </button>
  </div>
</form>

Étiquettes en dessous

Formulaire

Code :
<form class="jdb-container jdb-focusable-inputs">
  <div class="jdb-section">
    <input type="text" class="jdb-input" id="first-name">
    <label class="jdb-label" for="first-name">Prénom</label>
  </div>
  <div class="jdb-section">
    <input type="text" class="jdb-input" id="name">
    <label class="jdb-label" for="name">Nom</label>
  </div>
  <div class="jdb-section jdb-right-align">
    <button class="jdb-button jdb-focusable jdb-round jdb-green" type="submit">
      <i class="fa fa-user-plus" aria-hidden="true"></i> S'inscrire
    </button>
  </div>
</form>

Les formulaires et les éléments du formulaire peuvent être personnalisés en combinaison avec d'autres classes de style.


Animation des champs de texte

La classe jdb-animate-input permet d'ajouter une animation d'agrandissement d'un champ de texte d'une largeur inférieure à 100% à une largeure de 100%.

Code :
<input type="text" class="jdb-input jdb-animate-input" style="width:70%" placeholder="Cliquez ici pour agrandir">

Pour en savoir plus sur les animations JdB.CSS, veuillez consulter le chapitre sur les animations.


Les autres éléments du formulaire


Partager cette page