Formatowanie formularzy
Formularze
Elastyczny HTML i CSS
Najlepsza strona formularzy w Bootstrapie jest to, że wszystkie pola i kontrolki wyglądają świetnie, bez względu na to, w jaki sposób opisano je znacznikami. Wymagany jest niezbędny kod HTML, ale dla wymaganych znaczników zapewnione jest stylizowanie.
Cztery dołączone układy
Bootstrap wspiera cztery typy układów formularzy:
- Pionowy (Vertical, domyślny)
- Wyszukiwarka (Search)
- Śródliniowy (Inline)
- Poziomy (Horizontal)
Różne typy układów formularzy wymagają pewnych zmian w znacznikach, ale kontrolki pozostaja i zachowują się tak samo.
Kontrolki stanu i nie tylko
Formularze Bootstrapa obejmują style dla wszystkich podstawqowych pól formularza, takich jak pola tekstowe, obszary tekstowe, czy pola wyboru i inne. Ponadto Bootstrap wyposażony jest w szereg niestandardowych komponentów, takich jak ???? załączonych i dołączanych pola tekstowe oraz wsparcie dla list wyboru.
Stany takie jak bład, ostrzeżenie i powodzenie są interpretowane przez wszystkie kontrolki formularzy. Ponadto dołaczono style do wyłączonych kontrolek.
Cztery typy formularzy
Bootstrap zapewnia proste znaczniki i style dla czterech typowych układów formularzy.
Nazwa | Klasa | Opis |
---|---|---|
Pionowy (domyślny) | .form-vertical (niewymagane) | Ułożone w stos, wyrównane do lewej strony etykiety nad kontrolkami |
Śródliniowy (Inline) | .form-inline | Etykiety wyrównane do lewej i śródliniowy blok kontrolek w stylu kompaktowym |
Wyszukiwarka (Search) | .form-search | Zaokrąglone narożniki zwiększające estetykę pole wyszukiwarki |
Poziomy (Horizontal) | .form-horizontal | Umieszczone po lewej, ale wyrównane do prawej etykiety w tej samej linii co kontrolki |
Przykłady formularzy używajacych tylko standardowych kontrolek bez dodatkowych znaczników
Podstawowy formularz
Domyślny - inteligentny i lekki bez dodatkowych znaczników.
<form class="well"> <label>Nazwa etykiety</label> <input type="text" class="span3" placeholder="Wpisz coś…"> <span class="help-block">Tutaj przykładowy blok pomocy.</span> <label class="checkbox"> <input type="checkbox"> Zaznacz mnie </label> <button type="submit" class="btn">Wyślij</button> </form>
Formularz Szukaj
Dodaj .form-search
do znacznika formularza oraz .search-query
do znacznika input
.
<form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Szukaj</button> </form>
Formularz śródliniowy
Dodaj .form-inline
, by uzyskać finezyjne wyrównanie w pionie i odstępy między pólami formularza.
<form class="well form-inline"> <input type="text" class="input-small" placeholder="E-mail"> <input type="password" class="input-small" placeholder="Hasło"> <label class="checkbox"> <input type="checkbox"> Pamiętaj mnie </label> <button type="submit" class="btn">Zapisz się</button> </form>
Formularz poziomy
Po prawej są wszystkie domyślne wspierane kontrolki formularzy. Oto ich lista:
- pole tekstowe (tekst, hasło, email, etc)
- pole zaznaczenia
- pole opcji (radio)
- lista wyboru
- lista możliwości
- wstawianie pliku
- obszar tekstowy
Przykłady znakowania
Given the above example form layout, here's the markup associated with the first input and control group. The .control-group
, .control-label
, and .controls
classes are all required for styling.
<form class="form-horizontal"> <fieldset> <legend>Legend text</legend> <div class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> <input type="text" class="input-xlarge" id="input01"> <p class="help-block">Supporting help text</p> </div> </div> </fieldset> </form>
Stan kontrolek formularza
Bootstrap features styles for browser-supported focused and disabled
states. We remove the default Webkit outline
and apply a box-shadow
in its place for :focus
.
Walidacja formularzan
It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group
.
<fieldset class="control-group error"> … </fieldset>
Rozszerzenia kontrolek formularzy
Prepend & append inputs
Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.
Pola zaznaczenia i wyboru
Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox">
that wraps the <input type="checkbox">
.
Inline checkboxes and radios are also supported. Just add .inline
to any .checkbox
or .radio
and you're done.
Śródwierszowe formularze z wartością dodaną przed (dołączoną) i doklejoną za
To use prepend or append inputs in an inline form, be sure to place the .add-on
and input
on the same line, without spaces.
Tekst pomocy w formularzu
To add help text for your form inputs, include inline help text with <span class="help-inline">
or a help text block with <p class="help-block">
after the input element.