Formularze / Forms

1 900 0

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 <small> z klasą .form-text.

Przykład

W powyższym polu wpisujesz swój adres email.

Kod

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





Kilka opcji wybierasz z wciśniętym przyciskiem CTRL

Kod

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

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

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

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

Przykład

Kod

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.

Przykład

Kod

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

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

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

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

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

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

Pola Radio

Checkbox

Kod

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

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

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

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 <small> z klasą .form-text oraz opcjonalną klasą .text-mute, która zmieni nam tekst na szary.

Przykład

Hasło powinno mieć co najmniej 8 znaków, zawierać jedną dużą literę i jeden znak specjalny.

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (5 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*