Bootstrap tutorial logo

Pola w formularzach / Supported controls

autor: Robert

6 lipca 2013

W poprzednim wpisie pokazałem jak tworzyć podstawowe formularze ale nie opisałem jakie rodzaje pól można w nich stosować. W tym poście znajdziecie na to odpowiedź.

Podstawowe pole formularza

Jest to pole które w którym zwykle wpisujemy swoje imię, login, hasło, adres email itp. Tworzymy je poprzez znacznik <input>
Pola formularza są zgodne ze wszystkimi znacznikami <type> które wprowadził HTML5. Poniżej znajduje się przykład ich zastosowania. Przykłady „type” w HTML5 Należy pamiętać, że nie wszystkie przeglądarki w pełni wspierają HTML5 Więcej o typach pola tekstowego w HTML5 TUTAJ

Pole „Textarea”

Używamy go do stworzenia pola w którym użytkownik może wpisać wiadomośc, komentarz, post itp. Umożliwia wyświetlanie kilku linii tekstu. Tworzymy je poprzez znacznik <textarea z klasą .form-control oraz parametrem rows="*"> gdzie * oznacza ilość linii tekstu które będą widoczne w polu.



Checkbox i Radio Button

Checkboxy są polami wielokrotnego wyboru tj. można zaznaczyć kilka w jednym formularzu. Radio button jest elementem jednokrotnego wyboru, jeśli zaznaczymy jakąś opcję, poprzednia zostaje automatycznie odznaczona.
Checkbox i radio liniowe
Aby nasze checkboxy lub radio buttony były wyświetlane w linii a nie pod sobą należy dodać klasę .checkbox-inline lub .radio-inline

Listy rozwijane i przewijane

Gdy mamy zdefiniowane kilka/kilkanaście wartości i chcemy by użytkownik wybrał jedną z nich możemy użyć tagu <select> z klasą .form-control który zawiera w sobie tagi <option>. Gdy chcemy by nasza lista była przewijana zamiast rozwijanej i umożliwiała wybór kilku wartości to dodajemy parametrmultiple i standardowo jak przy formularzach, klasę .form-control

Poniżej przykładowa strona z radio, checkboxami i listami wyboru. Przykładowa strona
Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (8 głosów, średnia: 5,00 na 5)
Loading...