Bootstrap 4 - Formulaires
La description
L'élément de formulaire est utilisé pour collecter les entrées de l'utilisateur en utilisant des champs tels que des cases à cocher, des boutons radio ou des champs de texte, etc.
Forme basique
Vous pouvez encapsuler des étiquettes et des contrôles dans un élément <div> avec la classe .form-group et ajouter une classe de .form-control à tous les éléments textuels <input>, <textarea> et <select>.
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Form</h2>
<form>
<div class = "form-group">
<label for = "exampleInputEmail1">Email</label>
<input type = "email" class = "form-control"
id = "exampleInputEmail1" aria-describedby = "emailHelp"
placeholder = "Enter your email">
</div>
<div class = "form-group">
<label for = "exampleInputPassword1">Password</label>
<input type = "password" class = "form-control"
id = "exampleInputPassword1" placeholder = "Enter your password">
</div>
<div class = "form-group form-check">
<label class = "form-check-label" for = "exampleCheck1">
<input type = "checkbox" class = "form-check-input"
id = "exampleCheck1">Remember me
</label>
</div>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Contrôles de formulaire
Bootstrap prend en charge nativement les contrôles de formulaire les plus courants tels que l' entrée , la zone de texte et la sélection .
L'exemple suivant illustre les contrôles de formulaire pris en charge ci-dessus spécifiés avec la classe .form-control -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h4>Example Input</h4>
<div class = "form-group">
<input type = "email" class = "form-control"
id = "exampleFormControlInput1" placeholder = "Enter your email">
</div>
<h4>Example Select</h4>
<div class = "form-group">
<select class = "form-control" id = "exampleFormControlSelect1">
<option>Select Option #1</option>
<option>Select Option #2</option>
<option>Select Option #3</option>
<option>Select Option #4</option>
<option>Select Option #5</option>
</select>
</div>
<h4>Example Multiple Select</h4>
<div class = "form-group">
<select multiple class = "form-control" id = "exampleFormControlSelect2">
<option>Multiple Select #1</option>
<option>Multiple Select #2</option>
<option>Multiple Select #3</option>
<option>Multiple Select #4</option>
<option>Multiple Select #5</option>
</select>
</div>
<h4>Example Textarea</h4>
<div class = "form-group">
<textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Entrées de dimensionnement, lecture seule et plage
Le champ de saisie peut être affiché en petites et grandes tailles en utilisant respectivement les classes .form-control-lg et .form-control-sm . L' attribut readonly est un attribut booléen, qui rend le champ d'entrée en lecture seule et ne peut pas être modifié. Vous pouvez définir une plage pour les entrées à l'aide de la classe .form-control-range .
L'exemple suivant montre les types ci-dessus -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Sizing</h2>
<input class = "form-control form-control-lg" type = "text"
placeholder = "Large Input">
<br>
<input class = "form-control" type = "text"
placeholder = "Default Input">
<br>
<input class = "form-control form-control-sm" type = "text"
placeholder = "Small Input">
<br>
<br>
<h2>Readonly</h2>
<input class = "form-control" type = "text"
placeholder = "This is readonly text" readonly>
<br>
<br>
<h2>Range Inputs</h2>
<div class = "form-group">
<input type = "range" class = "form-control-range"
id = "formControlRange">
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Grille de formulaire à l'aide de la ligne de formulaire
Vous pouvez créer des formulaires complexes qui nécessitent plusieurs colonnes à l'aide de la classe .form-row qui spécifie la disposition compacte pour la colonne. L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Form Row</h2>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputEmail4">First Name</label>
<input type = "text" class =" form-control"
id = "inputEmail4" placeholder = "First Name">
</div>
<div class = "form-group col-md-6">
<label for = "inputPassword4">Last Name</label>
<input type = "text" class = "form-control"
id = "inputPassword4" placeholder = "Last Name">
</div>
</div>
<div class = "form-group">
<label for = "inputAddress">Address</label>
<input type = "text" class = "form-control" id = "inputAddress"
placeholder = "Address">
</div>
<div class = "form-row">
<div class = "form-group col-md-6">
<label for = "inputCity">City</label>
<input type = "text" class = "form-control" placeholder = "City"
id = "inputCity">
</div>
<div class = "form-group col-md-4">
<label for = "inputState">State</label>
<select id = "inputState" class = "form-control">
<option selected disabled>Select State</option>
<option>State 1</option>
<option>State 1</option>
</select>
</div>
<div class = "form-group col-md-2">
<label for = "inputZip">Pin Code</label>
<input type = "text" class = "form-control" id = "inputZip"
placeholder = "Pin Code">
</div>
</div>
<div class = "form-group">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck" >
<label class = "form-check-label" for = "gridCheck">
I Agree To Terms and Conditions
</label>
</div>
</div>
<button type = "submit" class = "btn btn-primary">Submit</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Formes horizontales
Créez des formulaires horizontaux en ajoutant la classe .row pour former des groupes. La largeur des étiquettes et des contrôles peut être spécifiée à l'aide des classes .col - * - * et ajoutez la classe .col-form-label à votre <label>, afin que vous puissiez placer des contrôles de formulaire centrés verticalement.
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<form>
<h2>Horizontal Forms</h2>
<div class = "form-group row">
<label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputEmail3"
placeholder = "First Name">
</div>
</div>
<div class = "form-group row">
<label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputPassword3"
placeholder = "Last Name">
</div>
</div>
<fieldset class = "form-group">
<div class = "row">
<legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios1" value = "option1" checked>
<label class = "form-check-label" for = "gridRadios1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios2" value = "option2">
<label class = "form-check-label" for = "gridRadios2">
Option 2
</label>
</div>
<div class = "form-check disabled">
<input class = "form-check-input" type = "radio"
name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
<label class = "form-check-label" for = "gridRadios3">
Option 3 (disabled)
</label>
</div>
</div>
</div>
</fieldset>
<div class = "form-group row">
<div class = "col-sm-2">Checkbox</div>
<div class = "col-sm-10">
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "gridCheck1">
<label class = "form-check-label" for = "gridCheck1">
Option 1
</label>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox" id = "gridCheck2">
<label class = "form-check-label" for = "gridCheck1">
Option 2
</label>
</div>
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-10">
<button type = "submit" class = "btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Formulaire en ligne
Vous pouvez créer un formulaire dans lequel tous les éléments sont en ligne, alignés à gauche et les étiquettes à côté, en ajoutant la classe .form-inline à la balise <form>.
L'exemple suivant montre l'affichage des contrôles de formulaire sur une seule ligne horizontale -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Inline Forms</h2>
<form class = "form-inline" action = "/action_page.php">
<label for = "email">Email :
<input type = "email" class = "form-control" id = "email"
placeholder = "Enter email" name =" email"></label>
<label for = "pwd">Password :
<input type = "password" class = "form-control" id = "pwd"
placeholder = "Enter password" name = "pswd"></label>
<button type = "submit" class = "btn btn-primary">Sign In</button>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Formulaire et texte d'aide désactivés
Utiliser le désactivé attribut pour désactiver les commandes de formulaire (blocs les interactions de l' utilisateur sur une entrée). Vous pouvez saisir du texte dans les champs associés à l'aide de la classe .form-text . L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Disabled Form</h2>
<form>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput">Name</label>
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
</div>
<div class = "form-group">
<label for = "disabledSelect">Select your option</label>
<select id = "disabledSelect" class = "form-control">
<option>Select</option>
</select>
</div>
<div class = "form-check">
<input class = "form-check-input" type = "checkbox"
id = "disabledFieldsetCheck" disabled>
<label class = "form-check-label" for="disabledFieldsetCheck">
Remember Me
</label>
</div>
<button type = "submit" class = " btn btn-primary">Submit</button>
<br>
<br>
<h2>Help Text</h2>
<label for = "inputPassword5">Password</label>
<input type = "password" id = "inputPassword5" class = "form-control"
aria-describedby = "passwordHelpBlock">
<small id = "passwordHelpBlock" class = "form-text text-muted">
Your password must be 6-10 characters long (This is help text).
</small>
</fieldset>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -