Tworzenie formularza
Framework Bootstrap umożliwia tworzenie formularzy. Jest to kolejny przydatny element na stronie, który można stworzyć w prosty sposób dzięki klasom pomocniczym.
Formularz przydaję się choćby do kontaktu z klientami. Gość na twojej stronie użyje go, by wysłać do Ciebie wiadomość.
Formularz tworzymy za pomocą elementu form. W nim mogą znajdować się następujące pola: input, textarea oraz obowiązkowo etykiety label odnoszące się do pól. Na finał formularza dodaję się przycisk, aby móc wysłać wiadomość do odbiorcy:
Bootstrap umożliwia uzyskać przejrzysty formularz, dodając pomocnicze klasy do odpowiednich elementów. W poniższym przykładzie zaobserwujesz zastosowanie ich:
Rozmiary elementów
Kolejne klasy pomocnicze które chciałbym omówić, dotyczą rozmiarów elementów formularza (input, select, label) lub grup (form-group).
Aby powiększyć jeden z elementów formularza, należy dodać do niego klasę element-lg, przykładowo imię i nazwisko w formularzu.
Nazewnictwo klas w porównaniu do poprzednich przykładów się nie zmienia:
- powiększając element używamy klasy
*-lg, np.input-lg, - pomniejszając element używamy klasy
*-sm, np.input-sm, - dla grup używamy klasy
form-group-lgorazform-group-sm.
Spójrz na poniższy przykład, w którym zastosowałem powyższe klasy:
Stany pól
Wiesz może jak zablokować kontrolkę formularza? Z Bootstrapem wystarczy dodać atrybut, aby zmienić stan elementu. Pokaże Wam, jak nadać stany kontrolom formularza.
Podobnie jak we wcześniejszych materiałach przychodzą pomocnicze atrybuty (disabled oraz readonly) dla poszczególnych elementów Bootstrapa.
Stany kontrolek umożliwiają między innymi blokowanie pól input, aby użytkownik nie mógł edytować teksty (readonly). Atrybuty można dodawać także np. do pól select.
Przykładowo, tak wygląda pole input gdy jest zablokowane:
Spójrz na nasz ostatni przykład. Ustawiłem atrybuty odczytu i zablokowania dla pól:
Stany walidacji
Zapewne widziałeś na stronach internetowych kolorowe elementyinput wraz z etykietami label. A wiesz co oznaczają te kolory? Na stronach jest to używane przede wszystkim do oznaczania stanów walidacji pól formularza. Również i tym razem, Bootstrap ułatwia nam pracę i pozwala nam w prosty sposób ostylować dane elementy w zależności od stanu walidacji. Wystarczy, że dodamy pomocniczą klasę form-group. Przykładowo, chcemy aby kolor pola oraz etykiety był oznaczony jako prawidłowy (zielony) użyjemy do tego klasy has-success.<div class="form-group has-success"></div> Klasy przedstawione powyżej są zazwyczaj dodawane do formularza przez JavaScript w czasie jego wypełniania. W materiale chciałem przedstawić jak używa się do tego klas Bootstrap.
Kontynuując nasz przykład zobacz jak ustawiłem stany walidacji naszych pól wraz z etykietami:
Formularz z Bootstrapem chyba nie taki trudny? Wrócę jeszcze na moim blogu do formularzy i poświęcę temu elementowi więcej czasu. Teraz lecimy dalej. W następną środę opublikuję kolejny materiał – paginacja strony.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA