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-labeloraz 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ę.
(12 głosów, średnia: 4,67 na 5)
Loading...Komentarze: 10 komentarzy
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.
OdpowiedzRobert 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.