Formularze / Forms - Kurs / Tutorial Bootstrap 4

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

Nasze strony internetowe bardzo często posiadają różnego typu formularze. Może to być klasyczny formularz kontaktowy, możemy dać użytkownikowi różnego rodzaju kalkulatory by obliczał na przykład ilość paczek z kafelkami potrzebnych na remont łazienki. Możemy również umożliwiać komentowanie naszych wpisów na blogu czy stworzyć podstronę z logowaniem i dostępem do chronionych treści. Skoro formularze są stałymi elementami stron czy aplikacji sieciowych to oczywiście Bootstrap musi zapewnić nam ich stylowanie:)

Podstawowy przykład

Zaczniemy od zwykłego formularza logowania. A później przejdziemy do różnych rodzajów pól, ich wielkości, sposobów ułożenia itp.

Pierwszą rzeczą jest oczywiście jakiś formularz czyli <form> wewnątrz którego będziemy umieszczali potrzebne elementy. Całą grupę elementów czyli podpis pola, samo pole oraz ewentualną informację dodatkową umieszczamy wewnątrz diva z klasą .form-group. Etykietą dla pola jest element <label>, samo pole w tym konkretnym przypadku jest polem <input> typu email, password oraz checkbox, któremu musimy dodać klasę .form-control a checkboxowi klasę .form-check-input. Dodatkową informację umieszczamy wewnątrz znacznika  z klasą .form-text.

Przykład

Kod

<form>
  <div class="form-group">
    <label for="przykladowyEmail">Adres Email</label>
    <input type="email" class="form-control" id="przykladowyEmail" aria-describedby="podpowiedzEmail" placeholder="Wpisz Email">
    <small id="podpowiedzEmail" class="form-text text-muted">W powyższym polu wpisujesz swój adres email.</small>
  </div>
  <div class="form-group">
    <label for="przykladoweHaslo">Hasło</label>
    <input type="password" class="form-control" id="przykladoweHaslo" placeholder="Wpisz hasło">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="przykladowyCheckbox">
    <label class="form-check-label" for="przykladowyCheckbox">Zaznacz mnie!</label>
  </div>
  <button type="submit" class="btn btn-primary">Wyślij</button>
</form>

Pola w formularzach

Prócz pól do wprowadzania tekstu czyli takich z type= text, email, password. Możemy stworzyć również rozwijane listy wyboru <select> oraz pola tekstowe w których możemy umieścić więcej niż jedną linię tekstu <textarea>. Tutaj identycznie jak w przypadku pierwszego przykładu, musimy pamiętać by poszczególne pola naszego formularza znajdowały się w oddzielnych divach z klasą .form-group, oraz aby nasze pola miały klasę .form-control

Przykład

Kod

<form>
  <div class="form-group">
    <label for="przykladowyEmail">Adres Email</label>
    <input type="email" class="form-control" id="przykladowyEmail" placeholder="kursboot@kursbootstrap.pl">
  </div>
  <div class="form-group">
    <label for="przykladowySelect">Przykładowy select</label>
    <select class="form-control" id="przykladowySelect">
      <option>opcja 1</option>
      <option>opcja 2</option>
      <option>opcja 3</option>
      <option>opcja 4</option>
      <option>opcja 5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="przykladowyWielokrotnySelect">Przykładowy wielokrotny select</label>
    <select multiple class="form-control" id="przykladowyWielokrotnySelect">
      <option>opcja 1</option>
      <option>opcja 2</option>
      <option>opcja 3</option>
      <option>opcja 4</option>
      <option>opcja 5</option>
    </select>
    <small id="podpowiedzSelect" class="form-text text-muted">Kilka opcji wybierasz z wciśniętym przyciskiem CTRL</small>
  </div>
  <div class="form-group">
    <label for="przykladowaTextarea">Przykładowa textarea</label>
    <textarea class="form-control" id="przykladowaTextarea" rows="3"></textarea>
  </div>
</form>

Mamy również możliwość stworzenia pola do wysyłania pliku. Wtedy zamiast klasy .form-control używamy klasy .form-control-file

Przykład

Kod

<form>
  <div class="form-group">
    <label for="przykladoweWysylaniePliku">Przykładowe wysyłanie pliku</label>
    <input type="file" class="form-control-file" id="przykladoweWysylaniePliku">
  </div>
</form>

Rozmiary pól

Jak już pewnie wiecie Bootstrap oferuje nam klasy, które umożliwiają zmiany rozmiarów. Przykładem jest .btn-lg dla przycisków. Podobną możliwość mamy w przypadku pól formularzy. Korzystając z klasy .form-control-lg tworzymy większe pole. Korzystając z klasy .form-control-sm utworzymy pole mniejsze od standardowego.

Przykład

Kod

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Standardowy input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Duży select .form-control-lg</option>
</select>
<select class="form-control">
  <option>Standardowy select</option>
</select>
<select class="form-control form-control-sm">
  <option>Mały select .form-control-sm</option>
</select>

Tylko do odczytu

Jeśli na przykład pobieramy z bazy jakąś zawartość pola, lub jest ono wynikiem obliczeń dokonanych w udostępnionym klientowi kalkulatorze, chcieli byśmy aby to pole nie mogło zostać zmodyfikowane. Służy do tego zapis readonly dodany wewnątrz naszego inputa. Gdy go użyjemy otrzymamy wypełnione pole, którego nie możemy edytować.

Dodatkowo jeśli chcemy pozbyć się ramki wokół tego pola i chcemy by wyglądało jak zwykły tekst, musimy klasę .form-control zamienić na klasę .form-control-plaintext.

Przykład

Kod

<input class="form-control" type="text" placeholder="Pole tylko do odczytu" readonly>

<form>
  <div class="form-group row">
    <label for="stalyEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="stalyEmail" value="kursboot@kursbootstrap.pl">
    </div>
  </div>
  <div class="form-group row">
    <label for="przykladoweHaslo" class="col-sm-2 col-form-label">Hasło</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="przykladoweHaslo" placeholder="Hasło">
    </div>
  </div>
</form>

Checkbox i radio

Poznaliśmy wcześniej pola, które są wypełniane przez użytkowników naszej strony. Teraz zajmiemy się polami checkbox oraz radio. Różnica pomiędzy nimi jest taka, że checkbox pozwala na zaznaczenie dowolnej ilości wartości a radio pozwala tylko na jedną, jednocześnie wyłączając pozostałe.

Zarówno checkboxy jak i radio grupujemy w divach z klasą .form-check, poszczególne pola muszą mieć klasę .form-check-input a etykiety klasę .form-check-label. Gdy chcemy jakiś wyłączyć, dopisujemy mu disabled

Kod

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="pierwszyCheckbox">
  <label class="form-check-label" for="pierwszyCheckbox">
    Pierwszy checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="drugiCheckbox" disabled>
  <label class="form-check-label" for="drugiCheckbox">
    Drugi, zablokowany checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="przykladoweRadio" id="pierwszeRadio" value="option1" checked>
  <label class="form-check-label" for="pierwszeRadio">
    Pierwsze radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="przykladoweRadio" id="drugieRadios" value="option2">
  <label class="form-check-label" for="drugieRadios">
    Drugie radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="przykladoweRadio" id="trzecieRadios" value="option3" disabled>
  <label class="form-check-label" for="trzecieRadio">
    Zablokowane radio
  </label>
</div>

Wyświetlanie w linii

Jak zauważyliście na powyższych przykładach, poszczególne elementy wyświetlają się pod sobą, co nie zawsze jest pożądanym przez nas rozwiązaniem. W łatwy sposób można wyświetlać checkboxy czy radi obok siebie. Wystarczy, że do diva z klasą .form-check dopiszemy kolejną klasę .form-check-inline.

Kod

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="pierwszyCheckbox">
  <label class="form-check-label" for="pierwszyCheckbox">
    Pierwszy checkbox
  </label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" value="" id="drugiCheckbox" disabled>
  <label class="form-check-label" for="drugiCheckbox">
    Drugi, zablokowany checkbox
  </label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="przykladoweRadio" id="pierwszeRadio" value="option1" checked>
  <label class="form-check-label" for="pierwszeRadio">
    Pierwsze radio
  </label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="przykladoweRadio" id="drugieRadios" value="option2">
  <label class="form-check-label" for="drugieRadios">
    Drugie radio
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <input class="form-check-input" type="radio" name="przykladoweRadio" id="trzecieRadios" value="option3" disabled>
  <label class="form-check-label" for="trzecieRadio">
    Zablokowane radio
  </label>
</div>

Bez etykiet

Gdyby zaszła taka potrzeba aby nie używać żadnych etykiet przy naszych polach to wewnątrz diva .form-check po pierwsze rezygnujemy z <label> a po drugie, naszemu inputowi dodajemy klasę .position-static.

Przykład

Kod

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="pustyCheckbox" value="option1" aria-label="Pusty checkbox">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="pustyRadio" id="blankRadio1" value="option1" aria-label="Pusty radio">
</div>

Układ formularzy

Skoro dowiedzieliśmy się już jakie są rodzaje pól oraz jak możemy je wyświetlać i modyfikować to najwyższy czas przejść do tematów związanych z budowaniem formularzy czyli układaniem ich elementów według naszych potrzeb.

Podstawowy przykład

Podstawowym przykładem, który z resztą używaliśmy wcześniej jest formularz w którym kolejne jego elementy układają się pod sobą. Taki efekt, dla przypomnienia, uzyskujemy zamykając poszczególne elementy w divach z klasą .form-group oraz nadając tym elementom klasę .form-control dla elementów tekstowych. Dla elementów checkbox i radio, zamykamy je w divie z klasą .form-check i nadajemy im klasę .form-check-input.

Przykład

Kod

<form>
  <div class="form-group">
    <label for="przykladowePole1">Etykieta pola</label>
    <input type="text" class="form-control" id="przykladowePole1" placeholder="Pierwsze przykładowe pole">
  </div>
  <div class="form-group">
    <label for="przykladowePole2">Etykieta pola</label>
    <input type="text" class="form-control" id="przykladowePole2" placeholder="Drugie przykładowe pole">
  </div>
</form>

Formularz oparty na siatce Bootstrap

Siatka Bootstrap jest tak na prawdę głównym elementem tego frameworka. Pozwala ona na układanie innych elementów zgodnie z naszym założeniem. Siatkę można również wykorzystać do budowania formularzy.

W poniższym przykładzie najpierw tworzymy sobie jeden rząd czyli div z klasą .row a w nim dwie równe kolumny, czyli divy z klasą .col. We wnętrzu poszczególnych kolumn umieszczamy nasz element formularza, nie zapominając o klasie .form-control. I jak widzicie, uzyskaliśmy dzięki temu poziomy formularz z dwoma polami obok siebie. Pamiętajcie, że zamiast .col możecie korzystać ze wszystkich dostępnych kolumn w siatce Bootstrap ( np. .col-md-8 )

Przykład

Kod

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="przykladowePole1" placeholder="Pierwsze przykładowe pole">
    </div>
    <div class="col">
      <input type="text" class="form-control" id="przykladowePole2" placeholder="Drugie przykładowe pole">
    </div>
  </div>
</form>

Ciaśniejszy formularz

Patrząc na powyższy przykład możemy dojść do wniosku, że przydały by się mniejsze odstępy pomiędzy polami formularza. Tutaj z pomocą przychodzi nam klasa .form-row, którą stosujemy zamiast klasy .row

Przykład

Kod

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" id="przykladowePole1" placeholder="Pierwsze przykładowe pole">
    </div>
    <div class="col">
      <input type="text" class="form-control" id="przykladowePole2" placeholder="Drugie przykładowe pole">
    </div>
  </div>
</form>

Rozbudowany formularz

Tak jak pisałem wcześniej, do budowy formularza możemy wykorzystywać wszelkie dobrodziejstwa jakie daje nam siatka Bootstrap. Poniżej znajduje się bardziej rozbudowany formularz, zapoznajcie się z jego kodem a na pewno zrozumiecie jak samemu budować tego typu elementy.

Przykład

Kod

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="przykladowyEmail">Email</label>
      <input type="email" class="form-control" id="przykladowyEmail" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="przykladoweHaslo">Hasło</label>
      <input type="password" class="form-control" id="przykladoweHaslo" placeholder="Hasło">
    </div>
  </div>
  <div class="form-group">
    <label for="przykladowyAdres">Adres</label>
    <input type="text" class="form-control" id="przykladowyAdres" placeholder="Podaj ulicę">
  </div>
  <div class="form-group">
    <label for="przykladowyAdres2">Adres druga linia</label>
    <input type="text" class="form-control" id="przykladowyAdres2" placeholder="Podaj numer mieszkania">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="przykladoweMiasto">Miasto</label>
      <input type="text" class="form-control" id="przykladoweMiasto">
    </div>
    <div class="form-group col-md-4">
      <label for="przykladoweWojewodztwo">Województwo</label>
      <select id="przykladoweWojewodztwo" class="form-control">
        <option selected>Wybierz...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="przykladowyKodPocztowy">Kod pocztowy</label>
      <input type="text" class="form-control" id="przykladowyKodPocztowy">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="przykladowyCheckbox">
      <label class="form-check-label" for="przykladowyCheckbox">
        Zaznacz mnie
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Wyślij</button>
</form>

Poziomy formularz

Wcześniej pokazałem jak stworzyć poziome formularze z polami obok siebie. Ale powiedzmy, że potrzebujemy formularz, w którym po lewej mamy etykietę pola a po prawej samo pole. Proszę bardzo:)
Cały „myk” w budowaniu tego typu pól polega na tworzeniu wewnątrz formularza dwóch kolumn o różnych szerokościach. Ale od początku. Zaczynamy oczywiście od diva z klasą .form-group, który otacza nasze pole oraz etykietę i dodajemy mu klasę .row. Teraz pora na etykietę. Po pierwsze nadamy jej klasę .col-sm-2 bo chcę żeby zajmowała właśnie taką szerokość, dodatkowo dopisujemy klasę .col-form-label. Teraz przechodzimy do samego pola input. Trzeba je otoczyć divem z klasą .col-sm-10 ( dlaczego 10? Bo 2+10=12 czyli zapełniamy siatkę Bootstrapa ) i w nim umieszczamy nasz input z klasą .form-control. Dzięki temu uzyskujemy formularz, który po lewej ma etykietę a po prawej pole.

Przykład

Kod

<form>
  <div class="form-group row">
    <label for="przykladowyEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="przykladowyEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="przykladoweHaslo" class="col-sm-2 col-form-label">Hasło</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="przykladoweHaslo" placeholder="Hasło">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Pola Radio</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            Pierwszy radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Drugi radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Trzeci, zablokowany radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="przykladowyCheckbox">
        <label class="form-check-label" for="przykladowyCheckbox">
          Przykładowy checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Wyślij</button>
    </div>
  </div>
</form>

Rozmiary poziomych formularzy

Potrafimy już zmieniać rozmiary pól naszego formularza z pomocą klas .form-control-lg oraz .form-control-sm i te klasy użyjemy ponownie. Ale aby dodatkowo zmienić rozmiary etykiet, musimy nadać im klasy .col-form-label-lg albo .col-form-label-sm.

Przykład

Kod

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Kolumny w formularzach

Napisałem już kilka słów o tym, że przy budowie formularzy możemy korzystać z Bootstrapowej siatki. Pisałem też o tym, że możemy korzystać z klas służących do budowy kolumn. Możemy zatem stworzyć sobie na przykład 3 kolumny o różnych rozmiarach, które nigdy nie poukładają się pod sobą ( .col-* ) lub takie, które poniżej pewnej rozdzielczości poukładają się pod sobą ( .col-md-* ). Myślę, że jeśli poznaliście siatkę to temat jest zrozumiały, jeśli jeszcze jej nie poznaliście to szybko nadróbcie zaległości)

Przykład

Automatyczna szerokość

W poprzednim formularzu skorzystaliśmy z klasy .col, buduje ona kolumnę, które zajmuje pozostałe wolne miejsce we wrapperze. No ale co jeśli chcemy by pole zajmowało tylko niezbędną ilość miejsca? Korzystamy wtedy z klasy .col-auto zamiast .col. Stworzymy wtedy kolumnę, której szerokość zależy od jej zawartości.

Przykład

Kod

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="przykladoweImie">Imię</label>
      <input type="text" class="form-control mb-2" id="przykladoweImie" placeholder="Jan Kowalski">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="przykladowyLogin">Login</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="przykladowyLogin" placeholder="Login">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="przykladowyCheckbox">
        <label class="form-check-label" for="przykladowyCheckbox">
          Zapamiętaj mnie
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Wyślij</button>
    </div>
  </div>
</form>

Formularze liniowe

Pisałem już wcześniej zarówno o liniowym wyświetlaniu checkboxów/radio jak i o tworzeniu liniowych formularzy z pomocą Bootstrapowych kolumn. Ale jeśli nie chcemy się bawić w dobieranie szerokości kolumn itp. Wystarczy, że naszemu formularzowi dodamy klasę .form-inline co spowoduje, że wszystkie elementy będą się układały obok siebie.

Przykład

Kod


<form class="form-inline">
  <input type="text" class="form-control mb-2 mr-sm-2" id="przykladoweImie" placeholder="Jak kowalski">
  <input type="text" class="form-control mb-2 mr-sm-2" id="przykladowyLogin" placeholder="Username">
  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Zapamiętaj mnie
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Wyślij</button>
</form>

Podpowiedzi w formularzu

Dobrze jest podpowiedzieć użytkownikowi, że przykładowo hasło powinno mieć minimum 8 znaków i jeden znak specjalny zanim wypełni to pole i dopiero przy walidacji okaże się, że nie spełnił tych warunków. Podpowiedzi w formularzach uzyskujemy poprzez umieszczenie wewnątrz diva z klasą .form-group elementu  z klasą .form-text oraz opcjonalną klasą .text-mute, która zmieni nam tekst na szary.

Przykład

Kod

<form>
  <div class="form-group">
    <label for="przykladoweHaslo">Hasło</label>
    <input type="password" id="przykladoweHaslo" class="form-control" aria-describedby="warunkiHasla">
    <small id="warunkiHasla" class="form-text text-muted">
      Hasło powinno mieć co najmniej 8 znaków, zawierać jedną dużą literę i jeden znak specjalny.
    </small>
  </div>
</form>