Bootstrap 4 formularze
Domyślne ustawienia Bootstrapa 4
Kontrolki formularzy automatycznie otrzymują pewne globalne style za pomocą Bootstrap:
Wszystkie elementy tekstowe <input>, <textarea>i
<select>z klasą .form-controlmają szerokość 100%.
Bootstrap 4 Układy formularzy
Bootstrap udostępnia dwa rodzaje układów formularzy:
- Formularz piętrowy (o pełnej szerokości)
- Formularz wbudowany
Bootstrap 4 Ułożona forma
Poniższy przykład tworzy formularz piętrowy z dwoma polami wejściowymi, jednym polem wyboru i przyciskiem przesyłania.
Dodaj element opakowania z .form-group, wokół każdej kontrolki formularza, aby zapewnić prawidłowe marginesy:
Przykład
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Formularz inline Bootstrap
W formularzu śródliniowym wszystkie elementy są śródliniowe i wyrównane do lewej.
Uwaga: dotyczy to tylko formularzy w widocznych oknach o szerokości co najmniej 576 pikseli. Na ekranach mniejszych niż 576px będzie układać się poziomo.
Dodatkowa zasada dla formularza inline:
- Dodaj klasę
.form-inlinedo<form>elementu
Poniższy przykład tworzy formularz wbudowany z dwoma polami wejściowymi, jednym polem wyboru i jednym przyciskiem przesyłania:
Przykład
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Formularz wbudowany z narzędziami
Powyższy formularz wbudowany jest "skompresowany" i będzie wyglądał znacznie lepiej z narzędziami do rozmieszczania Bootstrap. Poniższy przykład dodaje prawy margines ( .mr-sm-2) do każdego wejścia na wszystkich urządzeniach (małych i większych). A dolna klasa marginesu ( .mb-2) służy do stylizacji pola wejściowego, gdy się zepsuje (przechodzi z poziomu do pionu z powodu niewystarczającej ilości miejsca/szerokości):
Przykład
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
Więcej o spacingu i innych klasach „pomocników” dowiesz się z naszego rozdziału o narzędziach Bootstrap 4 .
Wiersz formularza/siatka
Możesz również użyć kolumn ( .col), aby kontrolować szerokość i wyrównanie danych wejściowych formularza bez używania narzędzi do odstępów. Pamiętaj tylko, aby umieścić je w .rowpojemniku.
W poniższym przykładzie używamy dwóch kolumn, które pojawią się obok siebie. Dużo więcej o kolumnach i wierszach dowiesz się z rozdziału Bootstrap Grids .
Przykład
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Jeśli chcesz mieć mniej marginesów siatki (zastąpić domyślne rynny kolumn), użyj .form-rowzamiast .row:
Przykład
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Walidacja formularza
Możesz użyć różnych klas walidacji, aby przekazać użytkownikom cenne informacje zwrotne. Dodaj albo .was-validatedlub .needs-validationdo <form>elementu, w zależności od tego, czy chcesz przekazać informację zwrotną weryfikacyjną przed, czy po przesłaniu formularza. Pola wejściowe będą miały zielone (prawidłowe) lub czerwone (nieprawidłowe) obramowanie, aby wskazać, czego brakuje w formularzu. Możesz również dodać
wiadomość .valid-feedbacklub .invalid-feedbackwiadomość, aby wyraźnie powiedzieć użytkownikowi, czego brakuje lub co należy zrobić przed przesłaniem formularza.
Przykład
W tym przykładzie używamy .was-validateddo wskazania braków przed przesłaniem formularza:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
Przykład
W tym przykładzie używamy .needs-validation, co doda efekt walidacji PO przesłaniu formularza (jeśli czegoś brakuje). Zauważ, że będziesz musiał również dodać trochę kodu jQuery, aby ten przykład działał poprawnie:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>