Download WordPress Themes, Happy Birthday Wishes

Bootstrap Formulaire

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 :

bootstrap-formulaire-verticale

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 :

bootstrap-formulaire-en-ligne

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 :

bootstrap-formulaire-horizontal

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 :

Formulaire empilé