Dans Bootstrap, il existe trois types de dispositions de formulaire:
- Formulaire verticale (par défaut)
- Formulaire horizontale
- Formulaire en ligne
Règles de formulaire bootstrap
Il existe trois règles standard pour ces 3 présentations de formulaire:
- Toujours utiliser <form role = « form »> (aide à améliorer l’accessibilité pour les personnes utilisant des lecteurs d’écran)
- Enveloppez les étiquettes et les contrôles de formulaire dans <div class = « form-group »> (nécessaire pour un espacement optimal)
- Ajoutez la classe .form-control à tous les éléments textuels <input>, <textarea> et <select>
1) Formulaire verticale bootstrap (par défaut)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap exemple</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Formulaire vertical Exemple</h1>
<form style="width:300px">
<div class="form-group">
<label for="exampleInputEmail1">Adresse électronique</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Mot de passe</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">S'identifier</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
2) formulaire bootstrap en ligne
Dans les formulaires Bootstrap en ligne, tous les éléments sont en ligne, alignés à gauche et les étiquettes sont à côté.
Cet exemple s’applique uniquement aux formulaires de la fenêtre qui ont au moins 768 pixels de largeur!
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Formulaire en ligne</h2>
<form class="form-inline" role="form">
<form style="width:300px">
<div class="form-group">
<label for="exampleInputEmail1">Adresse électronique</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Mot de passe</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">S'identifier</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
3) Bootstrap formulaire horizontale
Vous devez ajouter des règles supplémentaires si vous souhaitez créer un formulaire horizontal.
Règles supplémentaires pour une forme horizontale:
- Ajouter la classe .form-horizontale à l’élément <form>
- Ajouter la classe .control-label à tous les éléments <label>
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Formulaire horizontal</h2>
<form class="form-horizontal" role="form">
<form style="width:300px">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Adresse électronique:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Entrez votre email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Mot de passe:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Entrez le mot de passe">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Envoyer</button>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Formulaire Bootstrap 4
Dans Bootstrap4, les contrôles de formulaire reçoivent automatiquement du style..
Tous les éléments textuels <input>, <textarea> et <select> avec class .form-control ont une largeur de 100%.
Exemple:
Prenons un exemple pour créer un formulaire avec deux champs de saisie, une case à cocher et un bouton d’envoi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Formulaire</h2>
<form>
<div class="form-group">
<label for="email">Adresse électronique:</label>
<input type="email" class="form-control" id="email" placeholder="Entrez votre email">
</div>
<div class="form-group">
<label for="pwd">Mot de passe:</label>
<input type="password" class="form-control" id="pwd" placeholder="Entrez votre mot de passe">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Se souvenir de moi
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
</div>
</body>
</html>
Résultat :
