autor: Robert
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.
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.
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.
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.
Aby opisy pól znajdowały się obok pól a nie nad nimi należy wykonać kilka czynności:
<form>
nadajemy klasę .form-horizontal
.form-group
<label>
nadajemy klasę .control-label
oraz nadajemy mu wybraną szerokość np .col-md-2
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
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.
OdpowiedzNiestety 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.