Bootstrap 4 Wejścia formularzy
Obsługiwane kontrolki formularzy
Bootstrap obsługuje następujące kontrolki formularzy:
- Wejście
- obszar tekstowy
- pole wyboru
- radio
- wybierać
Wejście Bootstrap
Bootstrap obsługuje wszystkie typy danych wejściowych HTML5: tekst, hasło, data i godzina, data i godzina-lokalna, data, miesiąc, godzina, tydzień, numer, e-mail, adres URL, wyszukiwanie, tel i kolor.
Uwaga: Wejścia NIE będą w pełni stylizowane, jeśli ich typ nie zostanie poprawnie zadeklarowany!
Poniższy przykład zawiera dwa elementy wejściowe; jeden z type="text"i jeden z
type="password". Jak wspomnieliśmy w rozdziale Formularze, używamy .form-controlklasy do stylizowania danych wejściowych o pełnej szerokości i odpowiednim dopełnieniu itp.:
Przykład
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Obszar tekstowy Bootstrapa
Poniższy przykład zawiera obszar tekstowy:
Przykład
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Pola wyboru Bootstrapa
Pola wyboru są używane, jeśli chcesz, aby użytkownik wybrał dowolną liczbę opcji z listy wstępnie ustawionych opcji.
Poniższy przykład zawiera trzy pola wyboru. Ostatnia opcja jest wyłączona:
Przykład
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Przykład wyjaśniony
Użyj elementu opakowującego z, class="form-check"aby zapewnić odpowiednie marginesy dla etykiet i pól wyboru.
Dodaj .form-check-labelklasę do elementów etykiet i .form-check-inputodpowiednio stylizuj pola wyboru wewnątrz .form-checkkontenera.
Wbudowane pola wyboru
Użyj .form-check-inlineklasy, jeśli chcesz, aby pola wyboru pojawiły się w tym samym wierszu:
Przykład
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="checkbox"
class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Przyciski radiowe Bootstrap
Przyciski radiowe są używane, jeśli chcesz ograniczyć użytkownika tylko do jednego wyboru z listy wstępnie ustawionych opcji.
Poniższy przykład zawiera trzy przyciski radiowe. Ostatnia opcja jest wyłączona:
Przykład
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Podobnie jak w przypadku pól wyboru, użyj .form-check-inlineklasy, jeśli chcesz, aby przyciski opcji pojawiły się w tym samym wierszu:
Przykład
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label
class="form-check-label">
<input type="radio"
class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Lista wyboru Bootstrapa
Listy wyboru są używane, jeśli chcesz, aby użytkownik mógł wybierać spośród wielu opcji.
Poniższy przykład zawiera listę rozwijaną (lista wyboru):
Przykład
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Rozmiar kontrolki formularza
Zmień rozmiar kontrolki formularza za pomocą .form-control-smlub .form-control-lg:
Przykład
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Kontrola formularza ze zwykłym tekstem
Użyj klawisza .form-control-plaintext, jeśli chcesz nadać styl polu wejściowemu jako zwykły tekst:
Przykład
<input type="text" class="form-control-plaintext">
Plik i zakres kontroli formularza
Dodaj .form-control-rangeklasę do input type"range"lub .form-control-filedo input type"file"stylu kontrolki zakresu lub pola pliku o pełnej szerokości:
Przykład
<input type="range" class="form-control-range">
<input type="file"
class="form-control-file border">