Bootstrap tutorial logo

Formularze / Forms

autor: Robert

6 lipca 2013

Na naszych stronach internetowych bardzo często korzystamy z formularzy. Służą one do wysłania wiadomości, zostawienia komentarza, wyszukiwania czy zapisywania się do newslettera. Skoro ten tutorial posiada taki wpis to znaczy, że bootstrap posiada jakieś ułatwienia w ich stosowaniu.

Podstawowy formularz

Wstępnie pokażę jak zrobić prosty formularz z polem do podania adresu email, „zakropkowanym” hasłem, polem do dołączenia pliku, podpowiedzią oraz przyciskiem do wysyłania.

Opis poszczególnych elementów

Cały formularz zamykamy w znaczniku <form>...<form>. Następnie każda „grupa” elementów (czyli przykładowo pole do wpisania adresu email oraz jego etykieta) musi być zamknięta w divie z klasą .form-group. Teraz elementy wewnątrz grupy:
<label for="identyfikator_inputu">Etykieta</label> Odpowiada za wyświetlanie etykiety nad polem formularza.

<input type="rodzaj_inputu" class="form-control" id="identyfikator_inputu" placeholder="tekst wewnątrz inputu">

. type= jest to rodzaj pola, które jest nam potrzebne. Więcej o type TUTAJ. Klasa .form-control jest to klasa bootstrapa, która musi być zawsze dołączona w celu prawidłowego formatowania pola. id= jest identyfikatorem pola a placeholder= jest tekstem wyświetlanym wewnątrz pola. Paragraf z klasą .help-block służy do wpisania podpowiedzi dla użytkownika (np jakiego formatu adresu strony ma użyć lub jakiej wielkości plik może wysłać.

Gdy chcemy użyć „checkboxy” to najpierw tworzymy div z klasą .checkbox, wewnątrz umieszczamy znacznik <label>...</label> i wewnątrz niego input z typem „checkbox” oraz opis.




Tekst podpowiedzi



Inny wygląd formularzy

Wyświetlanie w linii

Aby wszystkie pola naszego formularza były wyświetlanie liniowo a nie pod sobą należy mu dodać klasę .form-inline. Czytniki ekranowe nie radzą sobie z formularzami bez etykiet (label) więc ukrywamy je poprzez dodanie im klasy .sr-only, dzięki czemu etykiety nie będą widoczne na komputerach a będą się prawidłowo wyświetlać na czytnikach ekranowych. Liniowe formularze przechodzą w blokowe poniżej szerokości 768px.





Formularz z opisami obok pól

Aby opisy pól znajdowały się obok pól a nie nad nimi należy wykonać kilka czynności:

  • Znacznikowi <form> nadajemy klasę .form-horizontal
  • Pole formularza i jego opis otaczamy divem z klasą .form-group
  • Znacznikowi <label> nadajemy klasę .control-label oraz nadajemy mu wybraną szerokość np .col-md-2
  • Kod pola formularza (input) otaczamy divem z szerokością (etykiecie nadaliśmy szerokość 2 kolumn więc pozostało nam 10) czyli klasą .col-md-10

Poniżej znajduje się strona z przykładami użytymi w tym wpisie.
Przykładowa strona


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (11 głosów, średnia: 4,64 na 5)
Loading...

Komentarze: 10 komentarzy

tomek 21 czerwca 2014 o 23:01

Gdzie w tym formularzu określiliśmy adres email na który będą wysyłane wiadomości ?

Odpowiedz
    Robert 23 czerwca 2014 o 08:19

    Witam,

    Bootstrap odpowiada tylko za wyświetlanie formularza, aby móc wysyłać poprzez niego maile należy podpiąć pod niego na przykład PHPową funkcję mail(); W przypadku WordPressa można skorzystać z wtyczki Contact Form 7

    Odpowiedz
Marta 9 lutego 2015 o 22:59

Witam. Pracuję na Bootstrapie source code (pliki Less). Mam postawiony serwer na localhost w oparciu o CMS Drupal. Jak stworzyć formularz, jeśli nie posiada się plików HTML? Czy należy bazować na plikach w folderze templates, tworząc do każdej podstrony osobny page–node–2.tpl.php? Proszę wybaczyć za dziwne pytanie. Każdy tutorial który widzę, jest oparty na dokumencie html, nie mogę poradzić sobie z tym problemem.

Odpowiedz
    Robert 10 lutego 2015 o 09:01

    Niestety nie miałem do tej pory przyjemności pracy na Drupalu także nie wiem jak wygląda tam struktura plików templatki.
    Z tego co znalazłem to w folderze /templates znajdują się pliki z HTMLem -> https://www.drupal.org/node/171194.
    Widzę, że w pliki block.tpl.php znajduje się trochę htmla -> https://api.drupal.org/api/drupal/modules%21block%21block.tpl.php/7
    Prawdopodobnie tworzysz sobie własny plik *.tpl.php i importujesz go w wybranym pliku.
    Ale może jest wśród nas, ktoś tworzący w Drupalu i będzie w stanie ci pomóc.

    Odpowiedz
Paweł 9 marca 2015 o 18:53

Jak można ustawić etykiety po prawej stronie zamiast na lewo?

Odpowiedz
    Robert 10 marca 2015 o 08:56

    Nie jestem pewien czy Bootstrap to obsłuży ale może zamień miejscami w kodzie html etykietę i pole input:)

    Odpowiedz
bartek 22 września 2016 o 11:24

Fajne

Odpowiedz
Jan 6 listopada 2016 o 19:53

Witam, co robią for=”” i jakie jest ich zastosowanie? Pierwszy raz się z tym spotykam.

Odpowiedz
    Robert 7 listopada 2016 o 08:04

    Atrybut „for” służy do stworzenia pary etykieta-pole. Dodatkowo dzięki zastosowaniu tego atrybutu możliwe jest zaznaczenie checkboxa lub „wklikanie” się w pole tekstowe poprzez kliknięcie etykiety.

    Odpowiedz