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

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ę.

(11 głosów, średnia: 4,64 na 5)

Loading...

---

← Starszy post
Pola w formularzach / Supported controls
Nowszy post →
Wymiary formularzy / Control sizing

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