Formularze

Przykłady i wskazówki dotyczące stosowania stylów kontrolek formularzy, opcji układu i niestandardowych składników do tworzenia różnorodnych formularzy.

Omówienie

Formanty formularzy Bootstrap rozszerzają się na nasze zrestartowane style formularzy z klasami. Użyj tych klas, aby zdecydować się na ich niestandardowe wyświetlanie w celu bardziej spójnego renderowania w różnych przeglądarkach i urządzeniach.

Upewnij się, że używasz odpowiedniego atrybutu type na wszystkich wejściach (np. , email w przypadku adresu e-mail lub number w przypadku informacji liczbowych), aby skorzystać z nowszych opcji wprowadzania, takich jak weryfikacja adresu e-mail, wybór numeru i nie tylko.

Oto szybki przykład pokazujący style formularzy Bootstrap. Czytaj dalej, aby uzyskać dokumentację na temat wymaganych klas, układu formularzy i nie tylko.

Formanty formularzy

Pamiętaj, aby zapoznać się z naszymi niestandardowymi formularzami, aby nadać styl <select> s.

Aby wprowadzić plik, zamień .form-control na .form-control-file.

Rozmiar

Ustaw wysokości za pomocą klas takich jak .form-control-lg i .form-control-sm.

Tylko do odczytu

Dodaj readonly boolean atrybut na wejściu, aby zapobiec modyfikacji wartości wejścia. Dane wejściowe tylko do odczytu są jaśniejsze (podobnie jak wyłączone dane wejściowe), ale zachowują standardowy kursor.

Zwykły tekst tylko do odczytu

Jeśli chcesz, aby elementy <input readonly> w formularzu były stylizowane na zwykły tekst, użyj elementu .form-control-plaintext, aby usunąć domyślny styl pól formularza i zachować prawidłowy margines i dopełnienie.

Pola wyboru i radia

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

Wyłączone pola wyboru i radia są obsługiwane, ale zapewniają not-allowed po najechaniu kursorem nadrzędnego <label>, musisz dodać atrybut disabled do .form-check-input. Atrybut disabled zastosuje jaśniejszy kolor, aby pomóc wskazać stan wejścia.

Pola wyboru i radia są zbudowane tak, aby obsługiwać walidację formularzy w formacie HTML i zapewniać zwięzłe, dostępne etykiety. W związku z tym nasze <input> s i <label> są elementami równorzędnymi w przeciwieństwie do <input> w <label>. Jest to nieco bardziej szczegółowe, ponieważ musisz określić atrybuty id i for, aby powiązać <input> i <label>.

Domyślnie (w stosie)

Domyślnie dowolna liczba pól wyboru i radia, które są bezpośrednim rodzeństwem, będzie ułożona pionowo i odpowiednio rozmieszczone za pomocą .form-check.

Wbudowane

Grupuj pola wyboru lub radia w tym samym poziomym rzędzie dodając .form-check-inline do dowolnego .form-check.

Bez etykiet

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

Układ

Ponieważ Bootstrap stosuje display: block i width: 100% do prawie wszystkich naszych kontrolek formularzy , formularze będą domyślnie układane w stos w pionie. Aby zmienić ten układ w zależności od formularza, można użyć dodatkowych klas.

Grupy formularzy

Klasa .form-group to najłatwiejszy sposób dodać strukturę do formularzy. Zapewnia elastyczną klasę, która zachęca do właściwego grupowania etykiet, kontrolek, opcjonalnego tekstu pomocy i komunikatów walidacji formularzy. Domyślnie stosuje tylko margin-bottom, ale w razie potrzeby wybiera dodatkowe style w .form-inline. Użyj go z <fieldset> s, <div> s lub prawie każdym innym elementem.

Siatka formularzy

Bardziej złożone formularze można zbudować za pomocą naszych klas siatki. Użyj ich do układów formularzy, które wymagają wielu kolumn, różnych szerokości i dodatkowych opcji wyrównania.

Wiersz formularza

Możesz również zamienić .row na .form-row, odmiana naszego standardowego wiersza siatki, która zastępuje domyślne odstępy między kolumnami w celu uzyskania ciaśniejszych i bardziej zwartych układów.

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

Forma pozioma

Twórz poziome formy z siatką, dodając klasę .row do tworzenia grup i używając .col-*-* do określania szerokości etykiet i elementów sterujących. Pamiętaj, aby dodać .col-form-label do swoich <label>, aby były wyśrodkowane w pionie wraz z powiązanymi kontrolkami formularza.

Czasami może być konieczne użycie narzędzi do tworzenia marginesów lub dopełnień, aby stworzyć idealne wyrównanie, którego potrzebujesz. Na przykład usunęliśmy padding-top z naszej stosowej etykiety wejść radiowych, aby lepiej wyrównać linię bazową tekstu.

Pozioma etykieta formularza rozmiar

Rozmiar kolumny

Jak pokazano w poprzednich przykładach, nasz system siatki umożliwia umieszczenie dowolnej liczby .col sw .row lub .form-row. Podzielą między siebie dostępną szerokość. Możesz także wybrać podzbiór swoich kolumn, aby zajmowały mniej lub więcej miejsca, podczas gdy pozostałe .col są równo podzielone na resztę, z określonymi klasami kolumn, takimi jak .col-7.

Automatyczne dopasowanie rozmiaru

Poniższy przykład wykorzystuje narzędzie flexbox do wyśrodkowania zawartości w pionie i zmiany .col do .col-auto, aby kolumny zajmowały tylko tyle miejsca, ile potrzeba. Innymi słowy, rozmiar kolumny zależy od zawartości.

Następnie możesz zremiksować to jeszcze raz z klasami kolumn zależnymi od rozmiaru.

I oczywiście obsługiwane są niestandardowe kontrolki formularzy.

Formularze wbudowane

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

• Kontrolki to display: flex, zwinięcie wszelkich białych znaków HTML i umożliwienie kontroli wyrównania za pomocą spacing i narzędzia flexbox.
• Kontrolki i grupy wejściowe otrzymują width: auto, aby zastąpić domyślne ustawienie Bootstrap width: 100%.
• Elementy sterujące pojawiają się w wierszu tylko w rzutniach o szerokości co najmniej 576 pikseli, aby uwzględnić wąskie obszary robocze na urządzeniach mobilnych.

Może być konieczne ręczne ustawienie szerokości i wyrównania poszczególnych elementów sterujących formularza z narzędziami do rozstawiania (jak pokazano poniżej). Na koniec pamiętaj, aby zawsze dołączyć <label> do każdej kontrolki formularza, nawet jeśli chcesz ją ukryć przed użytkownikami, którzy nie korzystają z czytnika ekranu, za pomocą .sr-only .

Obsługiwane są również niestandardowe kontrolki formularzy i opcje wyboru.

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 3). Wbudowany tekst pomocy można elastycznie zaimplementować za pomocą dowolnego wbudowanego elementu HTML i klas narzędzi, takich jak .text-muted.

Tekst pomocy poniżej danych wejściowych może mieć styl .form-text. Ta klasa zawiera display: block i dodaje trochę górnego marginesu dla łatwego odstępu od powyższych danych wejściowych.

W tekście wbudowanym można używać dowolnego typowego wbudowanego elementu HTML (czy to <small>, <span>, czy coś innego) z niczym więcej niż klasą użytkową.

Wyłączone formularze

Dodaj atrybut logiczny disabled do danych wejściowych, aby zapobiec interakcjom użytkownika i sprawić, by był widoczny lżejsze.

Dodaj disabled do <fieldset>, aby wyłączyć wszystkie elementy sterujące w obrębie.

Walidacja

Zapewnij użytkownikom cenne i przydatne informacje zwrotne dzięki weryfikacji formularza HTML5 – dostępnej we wszystkich obsługiwanych przeglądarkach. Wybierz jedną z domyślnych opinii weryfikacji przeglądarki lub zaimplementuj niestandardowe komunikaty za pomocą naszych wbudowanych klas i startowego kodu JavaScript.

Jak to działa

Oto jak walidacja formularzy działa z Bootstrapem:

• Walidacja formularza HTML jest przeprowadzana za pośrednictwem dwóch pseudoklas CSS, :invalid i :valid. Dotyczy elementów <input>, <select> i <textarea>.
• Bootstrap określa zakresy stylów :invalid i :valid do klasy nadrzędnej .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).
• Jako rozwiązanie zastępcze, .is-invalid i .is-valid klasy mogą być używane zamiast pseudoklas do walidacji po stronie serwera. Nie wymagają klasy nadrzędnej .was-validated.
• Ze względu na ograniczenia w działaniu CSS nie możemy (obecnie) stosować stylów do <label>, który znajduje się przed formantem formularza w DOM bez pomocy niestandardowego JavaScript.
• Wszystkie nowoczesne przeglądarki obsługują API walidacji ograniczeń, serię metod JavaScript do walidacji formantów formularza.
• W wiadomościach zwrotnych mogą być używane domyślne ustawienia przeglądarki (różne dla każdej przeglądarki i niemożliwe do wysłania przez CSS) lub nasze niestandardowe style opinii z dodatkowym kodem HTML i CSS.
• Niestandardowe komunikaty o poprawności mogą zawierać setCustomValidity w JavaScript.

Mając to na uwadze, rozważ poniższe prezentacje przedstawiające nasze niestandardowe style walidacji formularzy, opcjonalne klasy po stronie serwera i ustawienia domyślne przeglądarki.

Niestandardowe style

W przypadku niestandardowych komunikatów weryfikacyjnych formularzy Bootstrap należy dodać atrybut logiczny novalidate do <form>. Spowoduje 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 przesyłania i przekaże Ci opinię.

Podczas próby przesłania zobaczysz :invalid i :valid style zastosowane do kontrolek formularza.

Domyślne ustawienia przeglądarki

Nie interesują Cię niestandardowe komunikaty zwrotne dotyczące weryfikacji lub pisanie kodu JavaScript w celu zmiany zachowania formularzy? W porządku, 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ż tych stylów opinii nie można stylizować za pomocą CSS, nadal możesz dostosować tekst opinii za pomocą JavaScript.

Po stronie serwera

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

Obsługiwane elementy

Nasze przykładowe formularze pokazują natywne teksty <input> powyżej, ale dostępne są style walidacji formularza także dla naszych niestandardowych kontrolek formularzy.

Etykiety narzędzi

Jeśli układ Twojego formularza na to pozwala, możesz zamienić .{valid|invalid}-feedback klas dla .{valid|invalid}-tooltip klas, aby wyświetlić informacje zwrotne dotyczące walidacji w stylizowanej podpowiedzi. Upewnij się, że masz nadrzędnego z oznaczeniem position: relative do pozycjonowania podpowiedzi. W poniższym przykładzie nasze klasy kolumn już to mają, ale Twój projekt może wymagać innej konfiguracji.

Niestandardowe formularze

Aby jeszcze bardziej dostosować i krzyżować spójność przeglądarki, użyj naszych całkowicie niestandardowych elementów formularza, aby zastąpić domyślne ustawienia przeglądarki. Są zbudowane na podstawie semantycznych i dostępnych znaczników, więc są solidnymi zamiennikami dowolnej domyślnej kontrolki formularza.

Pola wyboru i radia

Każde pole wyboru i radio jest opakowane w <div> z rodzeństwem <span> w celu utworzenia naszej niestandardowej kontrolki i <label> dla towarzyszącego tekstu. Strukturalnie jest to to samo podejście, co nasze domyślne .form-check.

Używamy selektora rodzeństwa (~) dla wszystkie nasze <input> stany – takie jak :checked – aby odpowiednio stylizować nasz niestandardowy wskaźnik formularza. W połączeniu z klasą .custom-control-label możemy również stylizować tekst każdego elementu na podstawie stanu <input>.

Ukrywamy domyślne <input> z opacity i używamy .custom-control-label do tworzenia nowy wskaźnik formularza niestandardowego w jego miejsce z ::before i ::after. Niestety nie możemy zbudować niestandardowego tylko z <input>, ponieważ content CSS nie działa na tym elemencie.

W zaznaczonych stanach używamy osadzonych w base64 ikon SVG z Open Iconic. Zapewnia nam to najlepszą kontrolę nad stylami i pozycjonowaniem w różnych przeglądarkach i urządzeniach.

Pola wyboru

Niestandardowe pola wyboru może również korzystać z pseudoklasy :indeterminate w przypadku ręcznego ustawienia za pomocą JavaScript (nie ma dostępnego atrybutu HTML do określenia tego).

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

Radia

Inline

Wyłączone

Niestandardowe pola wyboru i radia można również wyłączyć. Dodaj atrybut logiczny disabled do <input>, a niestandardowy wskaźnik i opis etykiety zostaną automatycznie nadane.

Wybierz menu

Niestandardowe <select> menu wymagają tylko niestandardowej klasy, .custom-select, aby wywołać niestandardowe style.

Możesz także wybierać spośród małych i dużych opcji niestandardowych dopasować nasze wejścia tekstowe o podobnej wielkości.

Atrybut multiple jest również obsługiwany:

Tak jak atrybut size:

Przeglądarka plików

Plik wejściowy jest najbardziej zagmatwany grupy i wymaga dodatkowego JavaScript, jeśli chcesz je połączyć z funkcjonalnymi Wybierz plik… i tekst nazwy wybranego pliku.

Ukrywamy domyślny plik <input> za pośrednictwem i zamiast tego nadaj styl <label>. Przycisk jest generowany i pozycjonowany za pomocą ::after. Na koniec deklarujemy width i height na <input> w celu zapewnienia odpowiednich odstępów między otaczającą zawartością .

Tłumaczenie lub dostosowywanie ciągów

Pseudoklasa :lang() służy do tłumaczenia tekstu „Przeglądaj” na inny Języki. Zastąp lub dodaj wpisy do zmiennej $custom-file-text Sass za pomocą odpowiedniego znacznika języka i zlokalizowanych ciągów. Angielskie ciągi można dostosować w ten sam sposób.Na przykład, oto jak można dodać hiszpańskie tłumaczenie (kod języka hiszpańskiego to es):

Oto lang(es) w akcji na niestandardowym pliku wejściowym dla hiszpańskiego tłumaczenia:

Musisz poprawnie ustawić język swojego dokumentu (lub jego poddrzewa), aby wyświetlany był prawidłowy tekst. Można to zrobić za pomocą atrybutu lang w elemencie <html> lub w nagłówku HTTP Content-Language , wśród innych metod.