Principe
Retrouvons ici quelques exemples concrets de mises en oeuvre de formulaires avec quelques cas particuliers.
<form action="#" class="mb-4">
<div class="row">
<div class="col-sm-4">
<fieldset>
<div class="row g-3">
<legend class="h5 col-12">Legend lorem ipsum</legend>
<div class="col-12">
<label for="input1" class="form-label">Input</label>
<input type="email" class="form-control" id="input1" placeholder="lorem@ipsum.com">
<div class="form-text">Lorem ipsum dolor sit amet</div>
</div>
<div class="col-12">
<label for="input2" class="form-label">Input disabled</label>
<input type="text" class="form-control" id="input2" value="Lorem ipsum" disabled>
</div>
<div class="col-12">
<label for="input3" class="form-label">Input readonly</label>
<input type="text" class="form-control" id="input3" value="Lorem ipsum" readonly>
</div>
<div class="col-12">
<label for="input4" class="form-label">Input before / after</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="input4" placeholder="Placeholder">
<span class="input-group-text">€</span>
</div>
</div>
<div class="col-4">
<label for="input7a" class="form-label">Inputs</label>
<input type="text" class="form-control" id="input7a" placeholder="Placeholder">
</div>
<div class="col-8">
<label for="input7b" class="form-label">Multiples</label>
<input type="text" class="form-control" id="input7b" placeholder="Placeholder">
</div>
</div>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset>
<div class="row g-3">
<legend class="h5">Legend lorem ipsum</legend>
<div class="col-12">
<label for="text1" class="form-label">Textarea</label>
<textarea class="form-control" id="text1" placeholder="Placeholder" rows="3"></textarea>
</div>
<div class="col-12">
<label for="text2" class="form-label">Textarea disabled</label>
<textarea class="form-control" id="text2" placeholder="Placeholder" disabled></textarea>
</div>
<div class="col-12">
<label for="select1" class="form-label">Select</label>
<select name="select1" id="select1" class="form-select" aria-label="Default select example">
<option value="1">Lorem ipsum</option>
<option value="2">Dolor sit amet</option>
<option value="3">Consectetur elit</option>
</select>
</div>
</div>
</fieldset>
</div>
<div class="col-sm-4">
<fieldset>
<div class="row g-3">
<legend class="h5">Legend lorem ipsum</legend>
<div class="col-12">
<div class="form-label">Checkbox inline</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="check1" id="check1a" value="option1">
<label class="form-check-label" for="check1a">Lorem</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="check1" id="check1b" value="option2">
<label class="form-check-label" for="check1b">Ipsum</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="check1" id="check1c" value="option3" disabled>
<label class="form-check-label" for="check1c">Dolor sit</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="check1" id="check1d" value="option4" disabled checked>
<label class="form-check-label" for="check1d">Lipsum</label>
</div>
</div>
<div class="col-12">
<div class="form-label">Checkbox multiline</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="check2" id="check2a" value="option1">
<label class="form-check-label" for="check2a">Lorem</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="check2" id="check2b" value="option2">
<label class="form-check-label" for="check2b">Ipsum</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="check2" id="check2c" value="option3">
<label class="form-check-label" for="check2c">Dolor sit</label>
</div>
</div>
<div class="col-12">
<div class="form-label">Radio inline</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio1" id="radio1a" value="option1">
<label class="form-check-label" for="radio1a">Lorem</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio1" id="radio1b" value="option2">
<label class="form-check-label" for="radio1b">Ipsum</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio1" id="radio1c" value="option3" disabled="">
<label class="form-check-label" for="radio1c">Dolor sit</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio1" id="radio1d" value="option4" disabled="" checked="">
<label class="form-check-label" for="radio1d">Lipsum</label>
</div>
</div>
<div class="col-12">
<div class="form-label">Radio multiline</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio2" id="radio2a" value="option1">
<label class="form-check-label" for="radio2a">Lorem</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio2" id="radio2b" value="option2">
<label class="form-check-label" class="form-check-input" for="radio2b">Ipsum</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio2" id="radio2c" value="option3">
<label class="form-check-label" for="radio2c">Dolor sit</label>
</div>
</div>
<div class="col-12">
<div class="form-label">Checkbox toggle</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="ida" role="switch">
<label class="form-check-label" for="ida">Lorem ipsum dolor sit amet</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-12">
<div class="text-end">
<button class="btn btn-primary" type="submit">Validation</button>
</div>
</div>
</div>
</form>
Révélation du mot de passe
Possibilité de visualiser ou masquer le mot de passe, aide à la saisie d'un mot de passe en fonction des règles.
Côté HTML
<label for="passwordExemple" class="form-label">Mot de passe</label>
<div class="input-group">
<input type="password" class="form-control form-reveal-input" id="passwordExemple">
<button class="input-group-text form-reveal-btn" title="Afficher/Masquer le mot de passe" data-title="Afficher/Masquer le mot de passe">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M32 35.514C33.8859 35.514 35.6947 34.7648 37.0283 33.4312C38.3619 32.0976 39.1111 30.2889 39.1111 28.4029C39.1111 26.5169 38.3619 24.7082 37.0283 23.3746C35.6947 22.041 33.8859 21.2918 32 21.2918C31.8888 21.2918 31.7911 21.3184 31.6833 21.324C32.026 22.2677 32.0924 23.2895 31.8747 24.2696C31.657 25.2497 31.1643 26.1474 30.4544 26.8573C29.7445 27.5673 28.8468 28.06 27.8667 28.2776C26.8866 28.4953 25.8647 28.4289 24.9211 28.0862C24.9211 28.1973 24.8888 28.2951 24.8888 28.4029C24.8888 29.3367 25.0728 30.2614 25.4301 31.1242C25.7875 31.987 26.3113 32.7709 26.9716 33.4312C28.3052 34.7648 30.114 35.514 32 35.514ZM63.6134 30.3362C57.5878 18.5795 45.6589 10.6251 32 10.6251C18.341 10.6251 6.4088 18.5851 0.386561 30.3373C0.132385 30.8401 -4.57764e-05 31.3956 -4.57764e-05 31.959C-4.57764e-05 32.5224 0.132385 33.0779 0.386561 33.5807C6.41213 45.3374 18.341 53.2918 32 53.2918C45.6589 53.2918 57.5911 45.3318 63.6134 33.5796C63.8675 33.0768 64 32.5213 64 31.9579C64 31.3945 63.8675 30.839 63.6134 30.3362ZM32 14.1806C34.8129 14.1806 37.5626 15.0148 39.9014 16.5775C42.2403 18.1403 44.0632 20.3615 45.1396 22.9603C46.2161 25.5591 46.4977 28.4187 45.9489 31.1775C45.4002 33.9364 44.0456 36.4705 42.0566 38.4595C40.0676 40.4486 37.5334 41.8031 34.7746 42.3519C32.0157 42.9006 29.1561 42.619 26.5573 41.5425C23.9586 40.4661 21.7373 38.6432 20.1746 36.3044C18.6118 33.9655 17.7777 31.2158 17.7777 28.4029C17.7818 24.6322 19.2816 21.0171 21.9479 18.3508C24.6142 15.6845 28.2292 14.1848 32 14.1806ZM32 49.7363C20.071 49.7363 9.17102 42.924 3.55546 31.9585C6.71372 25.7583 11.7644 20.7251 17.9755 17.5884C15.6566 20.5907 14.2221 24.3107 14.2221 28.4029C14.2221 33.1179 16.0952 37.6397 19.4291 40.9737C22.7631 44.3077 27.285 46.1807 32 46.1807C36.7149 46.1807 41.2368 44.3077 44.5708 40.9737C47.9048 37.6397 49.7778 33.1179 49.7778 28.4029C49.7778 24.3107 48.3433 20.5907 46.0244 17.5884C52.2355 20.7251 57.2862 25.7583 60.4445 31.9585C54.83 42.924 43.9289 49.7363 32 49.7363Z"></path>
</svg>
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M63.7 54.9009L2.29952 6.55058C2.13386 6.41819 1.92241 6.35698 1.71164 6.38042C1.50087 6.40386 1.30803 6.51003 1.17551 6.67559L0.175502 7.92659C0.0429929 8.09213 -0.0183784 8.3035 0.00487278 8.51426C0.028124 8.72502 0.134096 8.91793 0.299503 9.0506L61.7 57.401C61.782 57.4667 61.8762 57.5156 61.9772 57.5449C62.0782 57.5741 62.1839 57.5832 62.2884 57.5716C62.3929 57.56 62.494 57.5279 62.5861 57.4772C62.6782 57.4265 62.7594 57.3581 62.825 57.276L63.825 56.025C63.9574 55.8593 64.0186 55.6478 63.9952 55.4371C63.9717 55.2263 63.8656 55.0335 63.7 54.9009ZM31.9997 15.9757C35.3934 15.9794 38.647 17.3291 41.0467 19.7288C43.4464 22.1285 44.7961 25.3821 44.7998 28.7758C44.7998 30.9378 44.2098 32.9448 43.2598 34.7328L45.8049 36.7328C47.1649 34.3848 47.9999 31.6898 47.9999 28.7758C47.9999 25.0927 46.7089 21.7447 44.6218 19.0427C50.2133 21.8654 54.7606 26.3953 57.6049 31.9758C55.9051 35.2757 53.6071 38.2312 50.8279 40.6918L53.3599 42.6859C56.2069 40.0578 58.647 36.9598 60.453 33.4348C60.6817 32.9823 60.8009 32.4823 60.8009 31.9753C60.8009 31.4682 60.6817 30.9683 60.453 30.5158C55.0299 19.9347 44.2938 12.7756 31.9997 12.7756C27.508 12.7732 23.069 13.7431 18.9876 15.6187L23.5647 19.2187C25.8237 17.2277 28.7557 15.9757 31.9997 15.9757ZM38.0858 30.6588C38.3992 29.7035 38.48 28.6873 38.3215 27.6945C38.163 26.7017 37.7697 25.7611 37.1744 24.951C36.5792 24.1408 35.7991 23.4845 34.899 23.0365C33.999 22.5886 33.005 22.3621 31.9997 22.3757C31.8997 22.3757 31.8107 22.3997 31.7147 22.4047C32.1029 23.4441 32.0944 24.5902 31.6907 25.6237L38.0858 30.6588ZM16.3236 25.7427C16.1157 26.7406 16.0072 27.7565 15.9996 28.7758C15.9894 31.4565 16.6554 34.0965 17.9361 36.4516C19.2168 38.8066 21.0708 40.8006 23.3265 42.249C25.5823 43.6975 28.1669 44.5536 30.8413 44.7381C33.5157 44.9227 36.1935 44.4297 38.6268 43.3049L35.6688 40.9758C34.4988 41.3288 33.2838 41.5758 32.0007 41.5758C28.607 41.5721 25.3533 40.2224 22.9534 37.8228C20.5536 35.4231 19.2036 32.1695 19.1996 28.7758C19.1996 28.5317 19.2586 28.3037 19.2716 28.0637L16.3236 25.7427ZM31.9997 47.9759C21.2637 47.9759 11.4526 41.8449 6.39955 31.9758C8.14256 28.5758 10.5086 25.7037 13.2306 23.3037L10.6446 21.2667C7.79656 23.8947 5.35754 26.9917 3.55153 30.5168C3.32277 30.9693 3.20358 31.4692 3.20358 31.9763C3.20358 32.4833 3.32277 32.9833 3.55153 33.4358C8.97057 44.0169 19.7067 51.1759 31.9997 51.1759C36.4914 51.1782 40.9304 50.2084 45.0118 48.3329L42.0868 46.0329C38.9058 47.2599 35.5148 47.9759 31.9997 47.9759Z"></path>
</svg>
<span class="visually-hidden">Afficher/Masquer le mot de passe</span>
</button>
</div>
Côté JS
document.querySelectorAll('.form-reveal-btn').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var inp = btn.closest('.input-group').querySelector('.form-reveal-input');
inp.type = inp.type === 'password' ? 'text' : 'password';
btn.classList.toggle('show');
});
});
Côté CSS
/* Password Reveal */
input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-credentials-auto-fill-button { display:none; }
.form {
&-reveal {
&-btn {
svg {
width:1.25rem; height:1.25rem; fill:currentColor;
&:nth-child(1) { display:block; }
&:nth-child(2) { display:none; }
}
&.show {
svg {
&:nth-child(1) { display:none; }
&:nth-child(2) { display:block; }
}
}
}
}
}
Critères du mot de passe
Possibilité d'aider la saisie du mot de passe en fonction des critères.
Votre mot de passe doit contenir ...
- ... au moins 6 caractères
- ... au moins 1 chiffre
- ... au moins 1 majuscule
- ... au moins 1 minuscule
Côté HTML
<label for="passwordExemple2" class="form-label">Mot de passe</label>
<div class="input-group">
<input type="password" class="form-control form-reveal-input" id="passwordExemple2">
<button class="btn btn-outline-secondary form-reveal-btn" title="Afficher/Masquer le mot de passe" data-title="Afficher/Masquer le mot de passe">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M32 35.514C33.8859 35.514 35.6947 34.7648 37.0283 33.4312C38.3619 32.0976 39.1111 30.2889 39.1111 28.4029C39.1111 26.5169 38.3619 24.7082 37.0283 23.3746C35.6947 22.041 33.8859 21.2918 32 21.2918C31.8888 21.2918 31.7911 21.3184 31.6833 21.324C32.026 22.2677 32.0924 23.2895 31.8747 24.2696C31.657 25.2497 31.1643 26.1474 30.4544 26.8573C29.7445 27.5673 28.8468 28.06 27.8667 28.2776C26.8866 28.4953 25.8647 28.4289 24.9211 28.0862C24.9211 28.1973 24.8888 28.2951 24.8888 28.4029C24.8888 29.3367 25.0728 30.2614 25.4301 31.1242C25.7875 31.987 26.3113 32.7709 26.9716 33.4312C28.3052 34.7648 30.114 35.514 32 35.514ZM63.6134 30.3362C57.5878 18.5795 45.6589 10.6251 32 10.6251C18.341 10.6251 6.4088 18.5851 0.386561 30.3373C0.132385 30.8401 -4.57764e-05 31.3956 -4.57764e-05 31.959C-4.57764e-05 32.5224 0.132385 33.0779 0.386561 33.5807C6.41213 45.3374 18.341 53.2918 32 53.2918C45.6589 53.2918 57.5911 45.3318 63.6134 33.5796C63.8675 33.0768 64 32.5213 64 31.9579C64 31.3945 63.8675 30.839 63.6134 30.3362ZM32 14.1806C34.8129 14.1806 37.5626 15.0148 39.9014 16.5775C42.2403 18.1403 44.0632 20.3615 45.1396 22.9603C46.2161 25.5591 46.4977 28.4187 45.9489 31.1775C45.4002 33.9364 44.0456 36.4705 42.0566 38.4595C40.0676 40.4486 37.5334 41.8031 34.7746 42.3519C32.0157 42.9006 29.1561 42.619 26.5573 41.5425C23.9586 40.4661 21.7373 38.6432 20.1746 36.3044C18.6118 33.9655 17.7777 31.2158 17.7777 28.4029C17.7818 24.6322 19.2816 21.0171 21.9479 18.3508C24.6142 15.6845 28.2292 14.1848 32 14.1806ZM32 49.7363C20.071 49.7363 9.17102 42.924 3.55546 31.9585C6.71372 25.7583 11.7644 20.7251 17.9755 17.5884C15.6566 20.5907 14.2221 24.3107 14.2221 28.4029C14.2221 33.1179 16.0952 37.6397 19.4291 40.9737C22.7631 44.3077 27.285 46.1807 32 46.1807C36.7149 46.1807 41.2368 44.3077 44.5708 40.9737C47.9048 37.6397 49.7778 33.1179 49.7778 28.4029C49.7778 24.3107 48.3433 20.5907 46.0244 17.5884C52.2355 20.7251 57.2862 25.7583 60.4445 31.9585C54.83 42.924 43.9289 49.7363 32 49.7363Z"></path>
</svg>
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M63.7 54.9009L2.29952 6.55058C2.13386 6.41819 1.92241 6.35698 1.71164 6.38042C1.50087 6.40386 1.30803 6.51003 1.17551 6.67559L0.175502 7.92659C0.0429929 8.09213 -0.0183784 8.3035 0.00487278 8.51426C0.028124 8.72502 0.134096 8.91793 0.299503 9.0506L61.7 57.401C61.782 57.4667 61.8762 57.5156 61.9772 57.5449C62.0782 57.5741 62.1839 57.5832 62.2884 57.5716C62.3929 57.56 62.494 57.5279 62.5861 57.4772C62.6782 57.4265 62.7594 57.3581 62.825 57.276L63.825 56.025C63.9574 55.8593 64.0186 55.6478 63.9952 55.4371C63.9717 55.2263 63.8656 55.0335 63.7 54.9009ZM31.9997 15.9757C35.3934 15.9794 38.647 17.3291 41.0467 19.7288C43.4464 22.1285 44.7961 25.3821 44.7998 28.7758C44.7998 30.9378 44.2098 32.9448 43.2598 34.7328L45.8049 36.7328C47.1649 34.3848 47.9999 31.6898 47.9999 28.7758C47.9999 25.0927 46.7089 21.7447 44.6218 19.0427C50.2133 21.8654 54.7606 26.3953 57.6049 31.9758C55.9051 35.2757 53.6071 38.2312 50.8279 40.6918L53.3599 42.6859C56.2069 40.0578 58.647 36.9598 60.453 33.4348C60.6817 32.9823 60.8009 32.4823 60.8009 31.9753C60.8009 31.4682 60.6817 30.9683 60.453 30.5158C55.0299 19.9347 44.2938 12.7756 31.9997 12.7756C27.508 12.7732 23.069 13.7431 18.9876 15.6187L23.5647 19.2187C25.8237 17.2277 28.7557 15.9757 31.9997 15.9757ZM38.0858 30.6588C38.3992 29.7035 38.48 28.6873 38.3215 27.6945C38.163 26.7017 37.7697 25.7611 37.1744 24.951C36.5792 24.1408 35.7991 23.4845 34.899 23.0365C33.999 22.5886 33.005 22.3621 31.9997 22.3757C31.8997 22.3757 31.8107 22.3997 31.7147 22.4047C32.1029 23.4441 32.0944 24.5902 31.6907 25.6237L38.0858 30.6588ZM16.3236 25.7427C16.1157 26.7406 16.0072 27.7565 15.9996 28.7758C15.9894 31.4565 16.6554 34.0965 17.9361 36.4516C19.2168 38.8066 21.0708 40.8006 23.3265 42.249C25.5823 43.6975 28.1669 44.5536 30.8413 44.7381C33.5157 44.9227 36.1935 44.4297 38.6268 43.3049L35.6688 40.9758C34.4988 41.3288 33.2838 41.5758 32.0007 41.5758C28.607 41.5721 25.3533 40.2224 22.9534 37.8228C20.5536 35.4231 19.2036 32.1695 19.1996 28.7758C19.1996 28.5317 19.2586 28.3037 19.2716 28.0637L16.3236 25.7427ZM31.9997 47.9759C21.2637 47.9759 11.4526 41.8449 6.39955 31.9758C8.14256 28.5758 10.5086 25.7037 13.2306 23.3037L10.6446 21.2667C7.79656 23.8947 5.35754 26.9917 3.55153 30.5168C3.32277 30.9693 3.20358 31.4692 3.20358 31.9763C3.20358 32.4833 3.32277 32.9833 3.55153 33.4358C8.97057 44.0169 19.7067 51.1759 31.9997 51.1759C36.4914 51.1782 40.9304 50.2084 45.0118 48.3329L42.0868 46.0329C38.9058 47.2599 35.5148 47.9759 31.9997 47.9759Z"></path>
</svg>
<span class="visually-hidden">Afficher/Masquer le mot de passe</span>
</button>
</div>
<div class="form-text">Votre mot de passe doit contenir ...</div>
<ul class="password-criteria-list">
<li class="password-criteria-item password-criteria-1">... au moins 6 caractères</li>
<li class="password-criteria-item password-criteria-2">... au moins 1 chiffre</li>
<li class="password-criteria-item password-criteria-3">... au moins 1 majuscule</li>
<li class="password-criteria-item password-criteria-4">... au moins 1 minuscule</li>
</ul>
</div>
Côté JS
(function() {
var input = null;
function checkMaj() {
document.querySelector('.password-criteria-3')
.classList.toggle('ok', /[A-Z]/.test(input.value));
}
function checkMin() {
document.querySelector('.password-criteria-4')
.classList.toggle('ok', /[a-z]/.test(input.value));
}
function checkChiffre() {
document.querySelector('.password-criteria-2')
.classList.toggle('ok', /[0-9]/.test(input.value));
}
function check6min() {
document.querySelector('.password-criteria-1')
.classList.toggle('ok', input.value.length >= 6);
}
function checkAll() {
checkMaj();
checkMin();
checkChiffre();
check6min();
}
document.addEventListener('DOMContentLoaded', function() {
input = document.getElementById('passwordExemple2');
if (!input) return;
['keyup', 'blur'].forEach(function(event) {
input.addEventListener(event, checkAll);
});
});
})();
Côté CSS
/* Password Criteria */
.password {
&-criteria {
&-list { padding:0; margin:0; list-style:none; @include fs-xs; }
&-item {
position:relative; padding-left:1rem; color:var(--bs-secondary-color);
&:before { content:''; display:block; position:absolute; left:.125rem; top:50%; transform:translateY(-50%); width:0.5rem; height:.5rem; border-radius:50%; background-color:$gray-400; }
&.ok {
&:before { background-color:$success; }
}
}
}
}