1. Formularze Bootstrap
Jednym z najczęściej używanych elementów na stronach internetowych są formularze, szczególnie w zakładce kontakt. Bootstrap udostępnia kilka klas, które ułatwiają tworzenie responsywnych formularzy. Z artykułu dowiesz się jakie są podstawowe elementy formularzy, jak je zastosować oraz jak przyspieszyć sobie pracę wykorzystując generatory formularzy. Jeżeli nigdy wcześniej nie zetknąłeś się z Bootstrapem to zachęcam do przeczytania Responsywne witryny, czyli szczypta zmian w Bootstrap 4, z którego dowiesz się czym jest Bootstrap i jakich zmian można oczekiwać w czwarteh wersji.
2. Kontrolki formularzy
Kontrolki to inaczej pola, które służą do wprowadzania określonych danych. Aby utworzyć formularz do dyspozycji masz takie kontrolki jak.:
- pola tekstowe (input, textarea)
- przyciski wyboru (checkbox, checkbox-inline)
- wykluczające się przyciski wyboru (radio, radio-inline)
- listy wyboru (select)
Jeżeli do pola tekstowego <input> dopiszesz required to pole będzie wymagane. Jako type możesz dopisać password lub file dzięki czemu otrzymasz zagwiazdkowane pole do wpisywania hasła lub przycisk z okienkiem systemowym umożliwiającym wybór pliku.
Kontrolka może znaleźć się również w określonym stanie, przykładowo aby wyłączyć pole wystarczy dopisać disabled, natomiast jeżeli chcesz uniemożliwić zmianę wartości w polu tekstowym wystarczy, że dopiszesz readonly.
See the Pen form controls by Tomasz Wikło (@studioleopard) on CodePen.19725
3. Układy formularzy
Bootstrap udostępnia trzy rodzaje formularzy.
Pionowy (domyślny).
Podczas tworzenia formularza powinieneś trzymać się kilku zasad
- Zawsze używaj <form role=”form”> (poprawa dostępności dla ludzi używających czytników ekranowych)
- Etykiety oraz kontrolki otaczaj <div class=”form-group”> (potrzebne do optymalnego rozmieszczenia elementów)
- Dodaj klasę .form-control do wszystkich tekstowych pól: <input>, <textarea>, <select>. Wszystkie elementy z klasą .form-control domyślnie będą się rozciągały na 100% szerokości.
See the Pen form default bootstrap by Tomasz Wikło (@studioleopard) on CodePen.19725
Poziomy
Aby utworzyć poziomy formularz, trzeba zastosować dodatkowe klasy
- .form-horizontal do elementu <form>
- .control-label do wszystkich elementów <label>
Zastosowanie klasy .form-horizontal spowoduje, że elementy pogrupowane w klasę .form-group będą układać się w wierszach, bez potrzeby stosowania klasy .row.
See the Pen form horizontal bootstrap by Tomasz Wikło (@studioleopard) on CodePen.19725
Liniowy
W formularzu liniowym elementy ułożone są obok siebie w jednej „linii”. Wszystkie Wszystkie elementy zachowują się tak, jakby były inline-block z elementami wyrównywanymi do lewej strony. Dotyczy to tylko i wyłącznie formularzy, które mają przynajmniej 768px szerokości. Aby utworzyć formularz liniowy wystarczy, że dodasz klasę .form-inline do elementu <form>
See the Pen form inline bootstrap by Tomasz Wikło (@studioleopard) on CodePen.19725
Wspieraj technologie wspomagające, zawsze używaj etykiet
Technologie wspomagające, takie jak czytniki ekranów mogą mieć problemy, jeśli nie umieścisz etykiety <label> dla każdego używanego pola tekstowego <input>. Jeżeli nie chcesz aby etykieta była wyświetlana na ekranie, dodaj klasę .sr-only.
4. Przykładowy formularz Bootstrap w akcji
See the Pen bootstrap forms by Tomasz Wikło (@studioleopard) on CodePen.19725
Jak widać, jest to całkiem proste. Wystarczy znajomość kilku klas aby stworzyć rozbudowany formularz. Klasa col-md-offset-3 przesuwa kolumny na prawo, zwiększając lewy margines o 3 kolumny. Bootstrapowy GRID składa się z 12 kolumn na wiersz, wszystko co wystąpi za 12 kolumną zostanie przeniesione do nowego wiersza. Za pomocą col-md-6 ustawiłem ile kolumn ma zajmować formularz. W kodzie wyżej zastosowałem help-block aby wprowadzić opis do kontrolki z emailem oraz hasłem. Dzięki zastosowaniu type=”file” otrzymałem przycisk, po którym otworzony się systemowe okienko z możliwością wyboru pliku. Na samym końcu utworzyłem przycisk za pomocą klas btn i btn-info.
Zachęcam do przejrzenia dostępnych klas formularzy w oficjalnej dokumentacji Bootstrapa. Powyższy formularz jest bardzo uproszony. Aby nie komplikować przykładu pominąłem kilka szczegółów, o których powinieneś wiedzieć. Znacznik form najczęściej zawiera atrybut action, np. action=”skrypt.php”. Atrybut ten przenosi nas do pliku skrypt.php i wykonuje zawarte w nim instrukcje po wciśnięciu przycisku z type=”submit”.
5. Formularz w 10 sekund
Po poznaniu podstawowych elementów wchodzących w skład Bootstrapowego formularza warto znacznie przyspieszyć sobie pracę. Na stronie bootsnipp.com/forms możesz wygenerować własny formularz na zasadzie przeciągnij i upuść w dosłownie parę sekund. Po utworzeniu w zakładce „View HTML” będziesz mógł podejrzeć i skopiować automatycznie wygenerowany kod z formularzem Bootstrap.
Czy Ty również wykorzystujesz Bootstrapa do tworzenia responsywnych formularzy? Podziel się swoim doświadczeniem w komentarzu.
Opublikowano 21 grudnia 2015 w kategorii blog, html.
