#44. Komponent – formularz

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

kind-ellis-wxpqq

kind-ellis-wxpqq danielminschinski

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-lg oraz form-group-sm.

Spójrz na poniższy przykład, w którym zastosowałem powyższe klasy:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

still-sky-nvgu2

still-sky-nvgu2 danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

serene-waterfall-4xsl6

serene-waterfall-4xsl6 danielminschinski

Stany walidacji

Zapewne widziałeś na stronach internetowych kolorowe elementy input 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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

optimistic-gauss-bigxw

optimistic-gauss-bigxw danielminschinski

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!