Bootstrap tutorial logo

Dodatkowe opcje pól w formularzach

autor: Robert

8 lipca 2013

Formularze to dosyć rozbudowany temat w bootstrapie, pokazałem już jak je tworzyć oraz jakie pola mogą zawierać. Teraz postaram się przybliżyć opcje które zmieniają ich wygląd czy dodają nowe funkcjonalności.

Statyczne pole formularza

Czasami w naszym formularzu chcemy podać stałą wartość np. Mail na jaki będzie wysłana wiadomość. Można to uzyskać w formularzu z opisami obok. W tym celu tworzymy standardowy formularz z klasą .horizontal-form wraz z etykietą label a zamiast pola input tworzymy paragraf z klasą .form-control-static

[email protected]

Zablokowanie wszystkich pól formularza

Przykładowo chcemy by użytkownik najpierw zaznaczył jakieś pole bądź wykonał jakąś inną akcję nim pozwolimy mu wypełnić formularz. W celu zablokowania formularza tworzymy go identycznie jak zwykły ale dodatkowo pomiędzy znacznikami <form>...</form> wstawiamy <fieldset disabled>...</fieldset>

Pole tylko do odczytu

Możemy zablokować przed edycją tylko pojedyncze pole w formularzu. W tym celu dodajemy parametr readonly do pola <input>

Kolorowanie pól po walidacji

O standardowym kolorowaniu Bootstrapa pisałem już wielokrotnie, pola formularza mogą przyjmować 3 stany a co za tym idzie kolory. Success - zielony, Warning - pomarańczowy, Error - czerwony. Aby uzyskać takie pole, dla diva z klasą .form-group dołożyć klasę .has-success, .has-warning lub has-error

Kolorowanie pól + ikony

Prócz pokolorowania pól formularza, możemy dodać na ich końcu również ikonkę. W tym celu do naszego "wrappera" dodajemy prócz klas .form-control, has-success dodatkowo klasę has-feedback a po polu input dopisujemy
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
(Powyższy przykład dla zielonego pola z ikonką "ok", reszta przykładów poniżej.)
Kolorowanie + ikonki w formularzu z opisami obok
Kolorowanie + ikonki w formularzu liniowym
Kolorowanie + ikonki z ukrytą etykietą
Jak pisałem w poprzednim wpisie, czytniki ekranowe do sprawnego czytania kodu potrzebują etykiety(label) aby ją ukryć dla komputerów korzystamy z klasy .sr-only
Poniżej znajduje się strona z wymienionym powyżej przykładami Przykładowa strona
Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (10 głosów, średnia: 4,70 na 5)
Loading...

Kacper 24 lutego 2016 o 21:11

Mam mały problem odnośnie tych grafik krzyżyk ptaszek itd. Nie są one wyśrodkowane tylko lecą do górnej krawędzi. Jak to naprawić?

Odpowiedz
    Robert 25 lutego 2016 o 08:07

    Wejdź na stronkę -> https://cheatsheet.kursbootstrap.pl, wpisz w szukajce „Validation states with icons” i skopiuj sobie ten HTML. Jeśli to też nie będzie działać to masz pewnie nie domknięte jakieś divy lub swoje CSSy, które rozwalają te ikony.

    Odpowiedz