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