Dodatki do formularzy - Kurs / Tutorial Bootstrap 4

Sprawdź najnowszą wersję komponentu dodatków do formularzy zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

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

Stwórz URL

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

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

Opcje

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

Wybierz plik

Wyślij plik

Wybierz 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>

I to tyle o dodatkach do formularzy. Pamiętacie, że siłą Bootstrapa jest to, że można mieszać ze sobą wiele elementów nawet w bardzo nieoczywiste sposoby. Dlatego jeśli coś nie jest opisane to spróbujcie zrobić to po swojemu, może się uda:)