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.

---

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ę.

(14 głosów, średnia: 4,64 na 5)

Loading...

---

← Starszy post
Tabele / Tables
Nowszy post →
Pola w formularzach / Supported controls

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

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

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

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