Dodatki do formularzy

1 292 0
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

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

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

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

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

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

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:)

Kod

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.

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

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

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:)

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

Chcesz coś napisać?

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

*

*