Bootstrap 5
Formulaire
Input
Form
Validation
Composant
Reference
Snippet
Html
Ui
Bootstrap Icons
Référence complète des formulaires Bootstrap 5 : tous types d'inputs, validation, groupes, styles avancés et composants de saisie pour interfaces web.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Master Input HTML 2026 05111335 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
body { background-color: #f4f7f6; }
.card { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 2rem; }
.card-header { background-color: #fff; font-weight: bold; border-bottom: 2px solid #f1f1f1; }
.form-label { font-weight: 500; color: #444; }
.section-title { color: #0d6efd; margin-bottom: 1.5rem; border-left: 5px solid #0d6efd; padding-left: 15px; }
</style>
</head>
<body>
<div class="container py-5">
<header class="text-center mb-5">
<h1 class="display-5 fw-bold">Master Formulaire Bootstrap 5</h1>
<p class="text-muted">Répertoire complet des inputs, attributs et styles</p>
</header>
<!-- SECTION 1 : INPUT TYPES STANDARDS -->
<h3 class="section-title">1. Types d'Inputs Standards</h3>
<div class="card">
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Texte simple (type="text")</label>
<input type="text" class="form-control" placeholder="Nom complet">
</div>
<div class="col-md-4">
<label class="form-label">Email (type="email")</label>
<input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="col-md-4">
<label class="form-label">Mot de passe (type="password")</label>
<input type="password" class="form-control" value="secret">
</div>
<div class="col-md-4">
<label class="form-label">Nombre (type="number")</label>
<input type="number" class="form-control" step="1" min="0" max="100">
</div>
<div class="col-md-4">
<label class="form-label">Téléphone (type="tel")</label>
<input type="tel" class="form-control" placeholder="+212 600 000 000">
</div>
<div class="col-md-4">
<label class="form-label">URL (type="url")</label>
<input type="url" class="form-control" placeholder="https://www.mnxdev.com">
</div>
</div>
</div>
</div>
<!-- SECTION 2 : DATES, COULEURS & RANGES -->
<h3 class="section-title">2. Dates, Couleurs et Curseurs</h3>
<div class="card">
<div class="card-body">
<div class="row g-3">
<div class="col-md-3">
<label class="form-label">Date</label>
<input type="date" class="form-control">
</div>
<div class="col-md-3">
<label class="form-label">Heure</label>
<input type="time" class="form-control">
</div>
<div class="col-md-3">
<label class="form-label">Couleur</label>
<input type="color" class="form-control form-control-color w-100" title="Choisir une couleur">
</div>
<div class="col-md-3">
<label class="form-label">Range (0-100)</label>
<input type="range" class="form-range">
</div>
</div>
</div>
</div>
<!-- SECTION 3 : SELECTS & DATALISTS -->
<h3 class="section-title">3. Listes de sélection</h3>
<div class="card">
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Select Standard</label>
<select class="form-select">
<option selected>Ouvrir ce menu</option>
<option value="1">Option Un</option>
<option value="2">Option Deux</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Select avec Groupes</label>
<select class="form-select">
<optgroup label="Développement">
<option>Frontend</option>
<option>Backend</option>
</optgroup>
<optgroup label="Design">
<option>UI/UX</option>
</optgroup>
</select>
</div>
<div class="col-md-4">
<label class="form-label">Datalist (Auto-complétion)</label>
<input class="form-control" list="datalistOptions" placeholder="Tapez pour chercher...">
<datalist id="datalistOptions">
<option value="Casablanca">
<option value="Rabat">
<option value="Marrakech">
</datalist>
</div>
</div>
</div>
</div>
<!-- SECTION 4 : CHECKBOXES, RADIOS & SWITCHES -->
<h3 class="section-title">4. Checkbox, Radios & Interrupteurs</h3>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<p class="fw-bold">Checkboxes</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1" checked>
<label class="form-check-label" for="check1">Coché par défaut</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check2" indeterminate>
<label class="form-check-label" for="check2">État indéterminé (via JS)</label>
</div>
</div>
<div class="col-md-4">
<p class="fw-bold">Radios</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="r1" checked>
<label class="form-check-label" for="r1">Option A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioGroup" id="r2">
<label class="form-check-label" for="r2">Option B</label>
</div>
</div>
<div class="col-md-4">
<p class="fw-bold">Switches (Interrupteurs)</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Mode sombre</label>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 5 : ATTRIBUTS SPECIAUX (Disabled, Readonly, Sizes) -->
<h3 class="section-title">5. Attributs & Tailles</h3>
<div class="card">
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Désactivé (disabled)</label>
<input type="text" class="form-control" disabled value="Lecture seule">
</div>
<div class="col-md-4">
<label class="form-label">Lecture seule (readonly)</label>
<input type="text" class="form-control" readonly value="Contenu non modifiable">
</div>
<div class="col-md-4">
<label class="form-label">Requis (required)</label>
<input type="text" class="form-control border-danger" required placeholder="Ce champ est obligatoire">
</div>
<div class="col-md-6">
<label class="form-label">Grande Taille (form-control-lg)</label>
<input type="text" class="form-control form-control-lg" placeholder=".form-control-lg">
</div>
<div class="col-md-6">
<label class="form-label">Petite Taille (form-control-sm)</label>
<input type="text" class="form-control form-control-sm" placeholder=".form-control-sm">
</div>
</div>
</div>
</div>
<!-- SECTION 6 : INPUT GROUPS & TEXTAREA -->
<h3 class="section-title">6. Groupes d'Inputs & Zones de texte</h3>
<div class="card">
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Input Group avec Icône</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Nom d'utilisateur">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Montant">
<span class="input-group-text">MAD</span>
<span class="input-group-text">.00</span>
</div>
</div>
<div class="col-md-6">
<label class="form-label">Zone de texte (Textarea)</label>
<textarea class="form-control" rows="4" placeholder="Votre message ici..."></textarea>
</div>
<div class="col-md-12">
<label class="form-label">Upload de fichier (type="file")</label>
<input class="form-control" type="file" multiple>
</div>
</div>
</div>
</div>
<!-- SECTION 7 : FLOATING LABELS -->
<h3 class="section-title">7. Étiquettes flottantes (Floating Labels)</h3>
<div class="card bg-primary text-white">
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating text-dark">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Adresse Email</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating text-dark">
<select class="form-select" id="floatingSelect">
<option selected>Choisir un service</option>
<option value="1">Développement Web</option>
<option value="2">Conseil IT</option>
</select>
<label for="floatingSelect">Type de projet</label>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 8 : VALIDATION STATES -->
<h3 class="section-title">8. États de Validation</h3>
<div class="card">
<div class="card-body">
<form class="row g-3 was-validated">
<div class="col-md-6">
<label class="form-label">Champ Valide</label>
<input type="text" class="form-control is-valid" value="Donnée correcte" required>
<div class="valid-feedback">C'est parfait !</div>
</div>
<div class="col-md-6">
<label class="form-label">Champ Invalide</label>
<input type="text" class="form-control is-invalid" required>
<div class="invalid-feedback">Veuillez remplir ce champ.</div>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Script pour l'état indéterminé de la checkbox de démo
document.getElementById('check2').indeterminate = true;
</script>
</body>
</html>Télécharger le fichier source