W poprzednim wpisie zapoznaliśmy się z tworzeniem różnego typu formularzy. W tym dowiemy się jak je rozbudować dodatkowo o coś w stylu etykietek. Możemy je dodawać przed oraz za polem, możemy w nim umieścić checkbox, listę rozwijaną czy przycisk a także mieszać wszystkie wymienione opcje. Owe dodatki są fajną alternatywą dla placeholdera, bo ten znika gdy klikniemy w pole, co może sprawić, że błędnie je wypełnimy gdyż nie zapamiętamy warunków, które były w nim opisane. Służy to również do zrobienia bardziej zwartych formularzy bo nie musimy, przykładowo przycisku, przenosić do kolejnej linii.
Podstawowy przykład
Podstawową funkcjonalnością jest dodawanie elementów przed i za polem. Zaczynamy od stworzenia diva z klasą.input-group
, która będzie „wrapperem” dla naszego pola. Teraz kwestia kolejności. Gdy dodatek ma być przed polem to tworzymy diva z klasą .input-group-prepend
i umieszczamy w nim span z klasą .input-group-text
a w nim nasz tekst czy symbol. Następnie, poza divem .input-group-prepend
ale wewnątrz wrappera dodajemy nasze pole, nie zapominając o klasie .form-group
.
W przypadku umieszczenia dodatku na końcu, zaczynamy od wrappera z klasą
.input-group
, następnie umieszczamy pole z klasą .form-group
a na koniec div z klasą .input-group-append
i w nim span z klasą .input-group-text
.
Oczywiście gdy chcemy umieścić nasz dodatek zarówno na początku jak i na końcu, korzystamy z obydwóch metod jednocześnie.
Przykład
@
@kursbootstrap.pl
https://kursbootstrap.pl/
PLN
,00
Twoja wiadomość
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Login" aria-label="Login" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Nazwa skrzynki" aria-label="Nazwa skrzynki" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@kursbootstrap.pl</span>
</div>
</div>
<label for="basic-url">Stwórz UTL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://kursbootstrap.pl/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">PLN</span>
</div>
<input type="text" class="form-control" aria-label="Kwota">
<div class="input-group-append">
<span class="input-group-text">,00</span>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Twoja wiadomość</span>
</div>
<textarea class="form-control" aria-label="Twoja wiadomość"></textarea>
</div>
Rozmiary pól
Podobnie jak w przypadku zmiany rozmiarów pól o których pisałem we wpisie o formularzach, tutaj również możemy zmieniać jednocześnie rozmiar pola jak i dodatku. Skorzystamy tu z klas, które były poruszone w poprzednim wpisie czyli.input-group-sm
oraz .input-group-lg
.
Przykład
Małe
Standardowe
Duże
Kod
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Małe</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Standardowe</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Duże</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
Checkboxy i radio
Na początku pisałem, że możemy umieścić również checkbox czy radio wewnątrz dodatku. A robi się to tak jak ze zwykłym tekstowym dodatkiem, tylko, że zamiast umieszczania elementu span wewnątrz diva z klasą.input-group-text
umieszczamy tam wybrany przez nas element. Oczywiście tu znów możemy decydować w którym miejscu je umieścić.
Przykład
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox przy polu tekstowym">
</div>
</div>
<input type="text" class="form-control" aria-label="Pole tekstowe z checkboxem" placeholder="Pole tekstowe z checkboxem">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Pole tekstowe z radio" placeholder="Pole tekstowe z radio">
<div class="input-group-append">
<div class="input-group-text">
<input type="radio" aria-label="Radio przy polu tekstowym">
</div>
</div>
</div>
Wielokrotne inputy
Zwykle gdy tworzymy formularz to oddzielamy od siebie pola np. imienia i nazwiska. A gdyby tak umieścić je w jednej grupie i oddzielić tylko drobną kreską? Bootstrap daje nam taką możliwość. Oczywiście do takiego połączonego pola możemy dodać nasz dodatek, zarówno na początku jak i na końcu. Wykonanie takiego pola jest bardzo proste, tworzymy standardowy div z klasą.form-group
, dodajemy ( lub nie ) dodatek a następnie umieszczamy w grupie dwa pola <input>
i już:)
Przykład
Imię i nazwisko
Kod
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">Imię i nazwisko</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Wielokrotne dodatki
Dowiedzieliśmy się jak dodać kilka inputów w jednej grupie, ale możemy zrobić to samo z dodatkami. Wtedy wewnątrz diva.input-group-prepend
lub .input-group-append
umieszczamy np dwa spany z klasą .input-group-text
Przykład
PLN
0,00
PLN
0,00
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">PLN</span>
<span class="input-group-text">0,00</span>
</div>
<input type="text" class="form-control" aria-label="Kwota">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Kwota">
<div class="input-group-append">
<span class="input-group-text">PLN</span>
<span class="input-group-text">0,00</span>
</div>
</div>
Button jako dodatek
Kolejnym „ficzerem” dodatkowych pól jest umieszczanie w nich przycisków. Je również możemy umieszczać na początku, na końcu a także łączyć w grupy. Umieszczamy je wewnątrz diva z klasą.input-group-prepend
lub input-group-append
w zależności od tego gdzie chcemy je umieścić.
Przykład
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email odbiorcy" aria-label="Email odbiorcy" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Wyślij</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-success" type="button">Dodaj</button>
<button class="btn btn-outline-danger" type="button">Usuń</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email odbiorcy" aria-label="Email odbiorcy" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-success" type="button">Dodaj</button>
<button class="btn btn-danger" type="button">Usuń</button>
</div>
</div>
Rozwijana lista jako dodatek
We wpisie o rozwijanych listach dowiedzieliście się, że buttony mogą również służyć do wyświetlania rozwijanej listy. A skoro użyliśmy przed chwilą buttona to pewnie można użyć również listy:) Poniżej przykład jak wygląda to w praktyce:)Przykład
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lista rozwijana</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Pierwsza opcja</a>
<a class="dropdown-item" href="#">Druga opcja</a>
<a class="dropdown-item" href="#">Trzecia opcja</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Oddzielona opcja</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Pole tekstowe z rozwijaną listą">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Pole tekstowe z rozwijaną listą">
<div class="input-group-append">
<button class="btn btn-outline-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rozwijana lista</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Pierwsza opcja</a>
<a class="dropdown-item" href="#">Druga opcja</a>
<a class="dropdown-item" href="#">Trzecia opcja</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Oddzielona opcja</a>
</div>
</div>
</div>
Przycisk i rozwijana lista jako dodatek
W przytoczonym w poprzednim wpisie przykładzie można dowiedzieć się, że button może być podzielony na dwie części i być zarówno standardowym przyciskiem jak i rozwijaną listą. Tutaj ponownie nie będę opisywał jak to uzyskać bo jest to opisane we wpisie o listach. Napiszę tylko, że cały kod odpowiedzialny za przycisk i listę umieszczamy, podobnie jak wszystkie inne dodatki wewnątrz divów.input-group-prepend
lub .input-group-append
.
Przykład
Pole select i dodatek
W poprzednich przykładach skupialiśmy się tylko na polu tekstowym, ale dodatki możemy również łączyć z polem<select>
. Tutaj również może to być dodatek tekstowy czy na przykład przycisk. Procedura jest taka sama jak dla poprzednich elementów. Musimy tylko pamiętać by elementowi <select>
dodać klasę .custom-select
.
Przykład
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Opcje</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Wybierz</option>
<option value="1">Opcja 1</option>
<option value="2">Opcja 2</option>
<option value="3">Opcja 3</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected>Wybierz</option>
<option value="1">Opcja 1</option>
<option value="2">Opcja 2</option>
<option value="3">Opcja 3</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02">Opcje</label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Wyślij</button>
</div>
<select class="custom-select" id="inputGroupSelect03">
<option selected>Wybierz</option>
<option value="1">Opcja 1</option>
<option value="2">Opcja 2</option>
<option value="3">Opcja 3</option>
</select>
</div>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Wybierz</option>
<option value="1">Opcja 1</option>
<option value="2">Opcja 2</option>
<option value="3">Opcja 3</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-success" type="button">Wybierz</button>
</div>
</div>
Pole uploadu plików i dodatek
Po polu select przyszedł czas na pole służące do uploadu plików czyli<input type="file">
. Tutaj należy pamiętać żeby wymienione pole otoczyć divem z klasą .input-file
aby nadać mu „Bootstrapowe” stylowanie.
Przykład
Wyślij plik
Wyślij plik
Kod
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Wyślij plik</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Wybierz plik</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Wybierz plik</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="">Wyślij plik</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">WYŚLIJ</button>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03">
<label class="custom-file-label" for="inputGroupFile03">Wybierz plik</label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04">
<label class="custom-file-label" for="inputGroupFile04">Wybierz plik</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">WYŚLIJ</button>
</div>
</div>