Bootstrap 4 Forms
Výchozí nastavení Bootstrapu 4
Ovládací prvky formuláře automaticky získají určitý globální styl s Bootstrap:
Všechny textové prvky <input>, <textarea>a
<select>prvky s třídou .form-controlmají šířku 100 %.
Bootstrap 4 Rozvržení formuláře
Bootstrap poskytuje dva typy rozvržení formuláře:
- Skládaný (v plné šířce) formulář
- Inline formulář
Bootstrap 4 skládaný formulář
Následující příklad vytvoří skládaný formulář se dvěma vstupními poli, jedním zaškrtávacím políčkem a tlačítkem Odeslat.
Přidejte prvek obálky s .form-group, kolem každého ovládacího prvku formuláře, abyste zajistili správné okraje:
Příklad
<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>
Bootstrap Inline Form
V inline formě jsou všechny prvky vložené a zarovnané doleva.
Poznámka: Toto platí pouze pro formuláře ve výřezech, které jsou široké alespoň 576 pixelů. Na obrazovkách menších než 576 pixelů se bude skládat vodorovně.
Další pravidlo pro vložený formulář:
- Přidejte
.form-inlinedo<form>prvku třídu
Následující příklad vytvoří vložený formulář se dvěma vstupními poli, jedním zaškrtávacím políčkem a jedním tlačítkem pro odeslání:
Příklad
<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>
Inline formulář s nástroji
Výše uvedený vložený formulář působí „komprimovaně“ a bude vypadat mnohem lépe s nástroji pro nastavení mezer Bootstrapu. Následující příklad přidá pravý okraj ( .mr-sm-2) ke každému vstupu na všech zařízeních (malých a vyšších). A spodní třída okraje ( .mb-2) se používá ke stylování vstupního pole, když se zlomí (přejde z horizontálního do vertikálního kvůli nedostatku místa/šířky):
Příklad
<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>
Více o mezerách a dalších „pomocných“ třídách se dozvíte v naší kapitole Bootstrap 4 Utilities .
Řádek formuláře/Mřížka
Můžete také použít sloupce ( .col) k ovládání šířky a zarovnání vstupů formuláře bez použití obslužných programů pro mezery. Jen je nezapomeňte dát do .rowkontejneru.
V níže uvedeném příkladu používáme dva sloupce, které se zobrazí vedle sebe. Mnohem více o sloupcích a řádcích se dozvíte v kapitole Bootstrap Grids .
Příklad
<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>
Pokud chcete méně okrajů mřížky (přepsat výchozí okapy sloupců), použijte .form-rowmísto .row:
Příklad
<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>
Ověření formuláře
Můžete použít různé třídy ověřování, abyste uživatelům poskytli cennou zpětnou vazbu. Přidejte buď .was-validatednebo .needs-validationdo <form>prvku v závislosti na tom, zda chcete poskytnout zpětnou vazbu k ověření před odesláním formuláře nebo po něm. Vstupní pole budou mít zelený (platný) nebo červený (neplatný) rámeček, který označuje, co ve formuláři chybí. Můžete také přidat
zprávu .valid-feedbacknebo .invalid-feedbackzprávu, která uživateli výslovně sdělí, co chybí nebo co je potřeba udělat před odesláním formuláře.
Příklad
V tomto příkladu používáme .was-validatedk označení toho, co chybí před odesláním formuláře:
<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>
Příklad
V tomto příkladu použijeme .needs-validation, který přidá validační efekt PO odeslání formuláře (pokud něco chybí). Všimněte si, že budete také muset přidat nějaký kód jQuery, aby tento příklad fungoval správně:
<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>