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:
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
orazform-group-sm
.
Spójrz na poniższy przykład, w którym zastosowałem powyższe klasy:
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:
serene-waterfall-4xsl6
serene-waterfall-4xsl6 danielminschinski
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:
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