formularze

przykłady i wskazówki dotyczące użycia stylów sterowania formularzami, opcji układu i niestandardowych komponentów do tworzenia różnorodnych formularzy.

przegląd

kontrolki formularzy Bootstrapa rozszerzają się w naszych ponownie uruchamianych stylach formularzy o klasy. Użyj tych klas, aby zdecydować się na ich niestandardowe wyświetlacze w celu bardziej spójnego renderowania między przeglądarkami i urządzeniami.

należy używać odpowiedniego atrybututype na wszystkich wejściach (np.,, email dla adresu e-mail lub number dla informacji numerycznych), aby skorzystać z nowszych kontrolek wprowadzania, takich jak weryfikacja poczty e-mail, wybór numeru i wiele innych.

oto krótki przykład pokazujący style formularzy Bootstrap. Czytaj dalej, aby zapoznać się z dokumentacją na temat wymaganych klas, układu formularza i innych.

form controls

pamiętaj, aby przejrzeć nasze niestandardowe formularze, aby uzyskać dalsze style <select>s.

dla wejść plików, zamień .form-control dla .form-control-file.,

Zmiana rozmiaru

Ustawianie wysokości za pomocą klas takich jak.form-control-lg I.form-control-sm.

Readonly

Dodaj atrybutreadonly boolean na wejściu, aby zapobiec modyfikacji wartości wejścia. Wejścia tylko do odczytu są lżejsze (podobnie jak wejścia wyłączone), ale zachowują standardowy kursor.,

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Przeczytaj tylko zwykły tekst

Jeśli chcesz mieć <input readonly> elementy w formularzu stylizowane jako zwykły tekst, użyj klasy .form-control-plaintext, aby usunąć domyślne stylizowanie pól formularza i zachować prawidłowy margines i wypełnienie.

wejścia zakresu

Ustaw poziomy zakres za pomocą.form-control-range.,

pola wyboru i radia

domyślne pola wyboru i radia są ulepszane za pomocą.form-check, jednej klasy dla obu typów wejściowych, która poprawia układ i zachowanie ich elementów HTML. Pola wyboru służą do wybrania jednej lub kilku opcji na liście, podczas gdy radia służą do wybrania jednej opcji z wielu.

wyłączone pola wyboru i radia są obsługiwane. Atrybut disabled zastosuje jaśniejszy kolor, aby wskazać stan wejścia.,

pola wyboru i radiotelefony są zbudowane tak, aby obsługiwać walidację formularzy w formacie HTML i zapewniać zwięzłe, dostępne etykiety. Jako takie, nasze <input>S I <label>s są elementami siostrzanymi w przeciwieństwie do <input> w obrębie <label>. Jest to nieco bardziej zwięzłe, ponieważ musisz podać id I for atrybuty odnoszące się do <input> I <label>.,

Default (stacked)

domyślnie dowolna liczba checkboxów i radiotelefonów, które są natychmiastowe, będzie ułożona pionowo i odpowiednio rozmieszczona za pomocą.form-check.

wbudowane

Grupuj pola wyboru lub radia w tym samym poziomym wierszu, dodając .form-check-inlinedo dowolnego.form-check.,

bez etykiet

Dodaj .position-static do wejść wewnątrz .form-check, które nie mają żadnego tekstu etykiety. Pamiętaj, aby nadal podawać jakąś formę etykiety dla technologii wspomagających (na przykład, używając aria-label).,

układ

ponieważ Bootstrap stosuje display: blockI width: 100% do prawie wszystkich formantów formularzy, formularze będą domyślnie układać się pionowo. Można użyć dodatkowych klas, aby zmienić ten układ w zależności od formularza.

grupy formularzy

Klasa.form-group jest najprostszym sposobem na dodanie struktury do formularzy. Zapewnia elastyczną klasę, która zachęca do prawidłowego grupowania etykiet, kontrolek, opcjonalnego tekstu pomocy i komunikatów walidacji formularzy., Domyślnie stosuje tylko margin-bottom, ale pobiera dodatkowe style w .form-inline w razie potrzeby. Użyj go z <fieldset>s, <div> s, lub prawie każdym innym elementem.

Siatka formularzy

bardziej złożone formularze mogą być budowane przy użyciu naszych klas siatki. Stosuj je w układach formularzy, które wymagają wielu kolumn, różnych szerokości i dodatkowych opcji wyrównania.,

Form row

Możesz również zamienić.row na.form-row, odmianę naszego standardowego wiersza siatki, która zastępuje domyślne rynny kolumn dla bardziej zwartych i zwartych układów.

bardziej złożone układy można również tworzyć za pomocą systemu grid.

formularz poziomy

Utwórz formularze poziome z siatką, dodając klasę.row do tworzenia grup i używając klas.col-*-* do określania szerokości etykiet i kontrolek., Pamiętaj, aby dodać .col-form-label do swoich<label>s, aby były wyśrodkowane pionowo z powiązanymi kontrolkami formularza.

czasami możesz użyć narzędzi marginowania lub wypełnienia, aby stworzyć idealne wyrównanie, którego potrzebujesz. Na przykład usunęliśmypadding-top na naszej etykiecie ułożonych wejść radiowych, aby lepiej wyrównać linię bazową tekstu.,

sortowanie etykiet w formie poziomej

sortowanie kolumn

jak pokazano w poprzednich przykładach, nasz system siatki pozwala umieścić dowolną liczbę .cols w obrębie .row lub .form-row. Podzielą dostępną szerokość równo między sobą. Możesz również wybrać podzbiór kolumn, aby zająć więcej lub mniej miejsca, podczas gdy pozostałe .cols równomiernie dzielą resztę, z konkretnymi klasami kolumn, takimi jak.col-7.,

Automatyczne Ustawianie rozmiaru

poniższy przykład wykorzystuje narzędzie flexbox do pionowego wyśrodkowania zawartości i zmiany.coldo.col-auto, aby Twoje kolumny zajmowały tylko tyle miejsca, ile potrzebujesz. Innymi słowy, wielkość kolumny zależy od zawartości.

możesz to ponownie zremiksować za pomocą klas kolumn dostosowanych do rozmiaru.

i oczywiście niestandardowe formanty są obsługiwane.,

formularze w wierszu

Użyj klasy.form-inline, aby wyświetlić serię etykiet, formantów formularza i przycisków w jednym poziomym wierszu. Formanty formularzy w formularzach wbudowanych różnią się nieznacznie od ich domyślnych Stanów.

• kontrolki sądisplay: flex, zwijając dowolne białe spacje HTML i umożliwiając sterowanie wyrównaniem za pomocą narzędzi spacing i flexbox.
• kontrolki i grupy wejściowe otrzymująwidth: auto w celu nadpisania domyślnej wartości Bootstrapwidth: 100%.,
• elementy sterujące są wyświetlane w linii tylko w widokach o szerokości co najmniej 576px, aby uwzględnić wąskie widokówki na urządzeniach mobilnych.

może być konieczne ręczne dostosowanie szerokości i wyrównania poszczególnych formantów za pomocą narzędzi odstępowych (jak pokazano poniżej). Na koniec pamiętaj, aby zawsze dołączać<label> przy każdej kontroli formularza, nawet jeśli chcesz ukryć ją przed odwiedzającymi spoza programu screenreader za pomocą .sr-only.

obsługiwane są również niestandardowe kontrolki formularzy i selekcje.,

tekst pomocy

tekst pomocy na poziomie bloków w formularzach można utworzyć za pomocą .form-text(wcześniej znany jako .help-block w wersji v3). Wbudowany tekst pomocy może być elastycznie zaimplementowany przy użyciu dowolnego wbudowanego elementu HTML i klas narzędzi, takich jak .text-muted.,

tekst pomocy poniżej Wejścia może być stylizowany na.form-text. Ta klasa zawiera display: block I dodaje górny margines dla łatwego odstępu od powyższych wejść.,

tekst Inline może używać dowolnego typowego elementu HTML inline (czy to<small>,<span>, czy coś innego) z niczym więcej niż klasą użytkową.

wyłączone formularze

Dodaj atrybut booleandisabled na wejściu, aby zapobiec interakcjom użytkownika i sprawić, że będzie on lżejszy.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

Dodaj atrybut disabled do <fieldset> aby wyłączyć wszystkie kontrolki wewnątrz.

Walidacja

Zapewnij użytkownikom cenne, przydatne informacje zwrotne dzięki walidacji formularza HTML5-dostępnej we wszystkich obsługiwanych przez nas przeglądarkach. Wybierz spośród domyślnych opinii sprawdzania poprawności w przeglądarce lub zaimplementuj niestandardowe wiadomości za pomocą naszych wbudowanych klas i startowego JavaScript.,

Jak to działa

oto jak Walidacja formularzy działa z Bootstrap:

• Walidacja formularzy HTML jest stosowana za pomocą dwóch pseudoklas CSS, :invalidI :valid. Dotyczy to <input>, <select> I <textarea> elementów.,
• zakres Bootstrap:invalid I:valid style do rodzica.was-validated, zwykle stosowane do<form>. W przeciwnym razie każde Wymagane pole bez wartości jest wyświetlane jako nieprawidłowe podczas ładowania strony. W ten sposób możesz wybrać, kiedy je aktywować (zazwyczaj po próbie przesłania formularza).
• aby zresetować wygląd formularza (na przykład w przypadku dynamicznego przesyłania formularzy za pomocą AJAX), Usuń klasę.was-validated z<form> ponownie po przesłaniu.,
• jako alternatywa,.is-invalid I.is-valid klasy mogą być używane zamiast pseudo-klas do walidacji po stronie serwera. Nie wymagają .was-validated klasy nadrzędnej.
• ze względu na ograniczenia w działaniu CSS, nie możemy (obecnie) stosować stylów do<label>, które występują przed kontrolą formularza w DOM bez pomocy niestandardowego JavaScript.
• wszystkie nowoczesne przeglądarki obsługują constraint validation API, serię metod JavaScript do walidacji formantów.,
• wiadomości zwrotne mogą wykorzystywać domyślne ustawienia przeglądarki (inne dla każdej przeglądarki i niestandardowe przez CSS) lub nasze niestandardowe style opinii z dodatkowymi HTML i CSS.
• możesz dostarczać niestandardowe komunikaty ważności za pomocąsetCustomValidity w JavaScript.

mając to na uwadze, rozważ następujące dema dla naszych niestandardowych stylów walidacji formularzy, opcjonalnych klas po stronie serwera i domyślnych ustawień przeglądarki.,

niestandardowe style

w przypadku wiadomości walidacji niestandardowego formularza Bootstrap musisz dodać atrybutnovalidate boolean do twojego<form>. Powoduje to wyłączenie domyślnych podpowiedzi przeglądarki, ale nadal zapewnia dostęp do interfejsów API walidacji formularzy w JavaScript. Spróbuj przesłać poniższy formularz; nasz JavaScript przechwyci przycisk Wyślij i przekaże ci opinię. Podczas próby przesłania formularza zobaczysz style :invalid I :valid zastosowane do kontrolek formularza.,

niestandardowe style sprzężenia zwrotnego stosuj niestandardowe kolory, obramowania, style ostrości i ikony tła, aby lepiej przekazywać informacje zwrotne. Ikony tła dla <select>s są dostępne tylko z .custom-select, a nie .form-control.

ustawienia domyślne przeglądarki

nie jesteś zainteresowany niestandardowymi komunikatami zwrotnymi lub pisaniem JavaScript w celu zmiany zachowań formularzy? Wszystko dobrze, możesz użyć domyślnych ustawień przeglądarki. Spróbuj przesłać poniższy formularz. W zależności od przeglądarki i systemu operacyjnego zobaczysz nieco inny styl opinii.,

chociaż te style opinii nie mogą być stylizowane za pomocą CSS, nadal można dostosować tekst opinii za pomocą JavaScript.

po stronie serwera

zalecamy korzystanie z walidacji po stronie klienta, ale jeśli potrzebujesz walidacji po stronie serwera, możesz wskazać nieprawidłowe i ważne pola formularza za pomocą.is-invalid I.is-valid. Zauważ, że .invalid-feedback jest również obsługiwane przez te klasy.,

obsługiwane elementy

style walidacji są dostępne dla następujących formantów i komponentów formularza:

podpowiedzi

Jeśli układ formularza na to pozwala, możesz zamienić klasy.{valid|invalid}-feedback na klasy.{valid|invalid}-tooltip aby wyświetlić informacje zwrotne o walidacji w stylizowanym podpowiedzi. Pamiętaj, aby mieć rodzica z position: relative na nim do pozycjonowania podpowiedzi. W poniższym przykładzie nasze klasy kolumn już to mają, ale twój projekt może wymagać alternatywnej konfiguracji.,

dostosowywanie

Stany walidacji można dostosować za pomocą Sass za pomocą mapy$form-validation-states. Znajduje się w naszym pliku_variables.scss, ta mapa Sass jest zapętlona, aby wygenerować domyślne Stany walidacjivalid/invalid. W zestawie znajduje się zagnieżdżona mapa do dostosowywania kolorów i ikon każdego stanu. Chociaż żadne inne stany nie są obsługiwane przez przeglądarki, osoby używające niestandardowych stylów mogą łatwo dodawać bardziej złożone informacje zwrotne.,

należy pamiętać, że nie zalecamy dostosowywania tych wartości bez modyfikacjiform-validation-state mixin.

niestandardowe formularze

aby uzyskać jeszcze większą personalizację i spójność między przeglądarkami, użyj naszych CAŁKOWICIE niestandardowych elementów formularza, aby zastąpić domyślne ustawienia przeglądarki. Są one zbudowane w oparciu o semantyczne i dostępne znaczniki, więc są solidnymi zamiennikami dla dowolnej domyślnej kontroli formularza.,

pola wyboru i radia

każde pole wyboru i radio <input>I <label>parowanie jest zawinięte w <div> aby utworzyć naszą niestandardową kontrolę. Strukturalnie jest to takie samo podejście jak nasze domyślne .form-check.

używamy selektora rodzeństwa (~) dla wszystkich naszych stanów <input>—podobnych do :checked —aby poprawnie stylować nasz Niestandardowy wskaźnik formularza., W połączeniu z klasą .custom-control-label możemy również stylować tekst dla każdego elementu na podstawie stanu <input>.

ukrywamy domyślny <input> z opacity I używamy .custom-control-label aby zbudować nowy wskaźnik niestandardowego formularza w jego miejsce z ::before I ::after. Niestety nie możemy zbudować niestandardowego z <input> ponieważ content nie działa na tym elemencie.,

w zaznaczonych Stanach używamy wbudowanych ikon SVG Base64 z Open Iconic. Zapewnia nam to najlepszą kontrolę nad stylizacją i pozycjonowaniem w przeglądarkach i urządzeniach.

Checkboxes

niestandardowe pola wyboru mogą również używać pseudo klasy :indeterminate gdy ręcznie ustawia się je za pomocą JavaScript (nie ma dostępnego atrybutu HTML do jej określenia).,

Jeśli używasz jQuery, coś takiego powinno wystarczyć:

$('.your-checkbox').prop('indeterminate', true)

Radia

inline

wyłączone

niestandardowe pola wyboru i radia mogą być również wyłączone., Dodaj disabledatrybut logiczny do <input>, a Niestandardowy wskaźnik i opis etykiety zostaną automatycznie stylizowane.

Przełączniki

przełącznik ma znaczniki niestandardowego pola wyboru, ale używa klasy.custom-switch do renderowania przełącznika. Przełączniki obsługują również atrybut disabled.,

wybierz menu

niestandardowe<select>menu wymaga tylko niestandardowej klasy,.custom-select aby wywołać niestandardowe style. Niestandardowe style są ograniczone do początkowego wyglądu <select>I nie mogą modyfikować <option>ze względu na ograniczenia przeglądarki.

Możesz również wybierać spośród małych i dużych niestandardowych selekcji, aby dopasować nasze wejścia tekstowe o podobnej wielkości.,

atrybut multiple jest również obsługiwany:

podobnie jak atrybut size:

zakres

utwórz własny <input type="range"> sterowanie za pomocą .custom-range. Ścieżka (tło) i kciuk (wartość) są stylizowane tak, aby wyglądały tak samo w przeglądarkach. Ponieważ TYLKO IE i Firefox wspierają „wypełnianie” ich ścieżki z lewej lub prawej strony kciuka jako sposób wizualnego wskazania postępu, obecnie nie obsługujemy go.,

<label for="customRange1">Example range</label><input type="range" class="custom-range">

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">

By default, range inputs „snap” to integer values., Aby to zmienić, możesz podać wartość step. W poniższym przykładzie podwoimy liczbę kroków używając step="0.5".

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

przeglądarka plików

wejście pliku jest najbardziej gnarly z grupy i wymaga dodatkowego JavaScript, jeśli chcesz podłączyć je do funkcji Wybierz plik … i zaznaczoną nazwę pliku tekst.

ukrywamy domyślny plik<input> poprzezopacity I zamiast tego styl<label>. Przycisk jest generowany i pozycjonowany za pomocą ::after. Na koniec deklarujemy width I heightna <input> dla prawidłowego odstępu dla otaczającej treści.,

tłumaczenie lub dostosowywanie łańcuchów za pomocą SCSS

pseudo-Klasa:lang() jest używana do tłumaczenia tekstu „przeglądaj” na inne języki. Nadpisuje lub dodaje wpisy do zmiennej$custom-file-text Sass z odpowiednim znacznikiem języka i zlokalizowanymi łańcuchami. Angielskie ciągi można dostosować w ten sam sposób., Na przykład, oto jak można dodać tłumaczenie na język hiszpański (kod języka hiszpańskiego jest es):

$custom-file-text: ( en: "Browse", es: "Elegir");

tutaj lang(es) w działaniu na niestandardowym pliku wejściowym dla tłumaczenia na język hiszpański:

musisz poprawnie ustawić język dokumentu (lub jego poddtree), aby wyświetlany był poprawny tekst., Można to zrobić za pomocą lang atrybutu <html> elementu lub Content-Language nagłówka HTTP, między innymi metod.

tłumaczenie lub dostosowywanie ciągów za pomocą HTML

Bootstrap zapewnia również sposób na przetłumaczenie tekstu” Przeglądaj”w HTML za pomocą atrybutu data-browse, który można dodać do niestandardowej etykiety wejściowej (przykład w języku niderlandzkim):