Latest web development tutorials

bootstrap Formularz

W tym rozdziale dowiemy się, jak utworzyć formularz za pomocą startowej. Bootstrap kilku prostych znaczników HTML i rozszerzonych klas do tworzenia różnych stylów formach.

Układ formularz

Bootstrap przewiduje następujące rodzaje układu formach:

  • Vertical Form (domyślnie)
  • inline Form
  • Formularz Level

Pionowe lub podstawową formą

Podstawowa struktura postaci Bootstrap jest wyposażony w indywidualne kontrolki formularzy automatycznie otrzymywać jakąś globalną styl. Oto kroki, aby utworzyć podstawową formę:

  • Do rodzica <form> element, aby dodaćrole = "formę".
  • Etykiety i kontrole wklasie.form grupie z <div> w. Jest to konieczne, aby uzyskać najlepszy skok.
  • Wszystkie elementy tekstowe <input>, <textarea> i <wybierz> Dodajklasę.form nad sobą.

Przykłady

<Formularz role = "forma"> <div class = "form-grupa"> <Label dla = "name"> Nazwa </ label> <Wejście type = "text" class = "form-control" id = "name" placeholder = "Proszę podać nazwę"> </ Div> <div class = "form-grupa"> <Label w pliku wejściowym = ""> plik wejściowy </ label> <Wejście type = "file" id = "plik_wejściowy"> <P class = "help-block"> Tutaj jest blok poziomie instancji tekst pomocy. </ P> </ Div> <div class = "checkbox"> <Label> <Wejście type = "checkbox"> Proszę zaznaczyć </ label> </ Div> <Przycisk type = "submit" class = "btn btn-default" > Prześlij </ button> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Podstawową formą

inline Form

Jeśli trzeba utworzyć formularz, że wszystkie elementy są inline, pozostawione etykiety dostosowane są obok siebie, dodaćklasę.form-inline do znacznika <form>.

Przykłady

<Formularz class = "form-inline" role = "forma"> <div class = "form-grupa"> <Label class = "sr-only" dla = "name"> Nazwa </ label> <Wejście type = "text" class = "form-control" id = "name" placeholder = "Proszę podać nazwę"> </ Div> <div class = "form-grupa"> <Label class = "sr-only" w pliku wejściowym = ""> plik wejściowy </ label> <Wejście type = "file" id = "plik_wejściowy"> </ Div> <div class = "checkbox"> <Label> <Wejście type = "checkbox"> Proszę zaznaczyć </ label> </ Div> <Przycisk type = "submit" class = "btn btn-default" > Prześlij </ button> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

inline Form
  • Domyślnie bootstrapu wejściowego, select, textarea i 100% szerokości. Podczas korzystania z formularzy inline, trzeba ustawić szerokość w kontrolach formularza.
  • Wykorzystanieklasy.sr tylko można ukryć tagu formularza inline.

Formularz Level

Liczba różnych poziomów i form nie tylko wyznacza inną formę, ale forma jest prezentowany w postaci jest inna. Aby utworzyć poziomą układ formularza, należy wykonać kilka czynności:

  • <Form> element jest dodawany doklasynadrzędnej .form-poziomej.
  • Etykiety i kontrole wklasie.form grupie z <div> w.
  • Dodajklasy.control-label na etykiecie.

Przykłady

<Formularz class = "form-poziomy" role = "forma"> <div class = "form-grupa"> <Label dla = "FirstName" class = "kol-SM-2 kontrolno-label"> Nazwa </ label> <div class = "kol-SM-10 "> <Wejście type = "text" class = "form-control" id = "Imię" placeholder = "Proszę podać nazwę"> </ Div> </ Div> <div class = "form-grupa"> <Label dla = "Nazwisko" class = "kol-SM-2 kontrolno-label"> Nazwa </ label> <div class = "kol-SM-10 "> <Wejście type = "text" class = "form-control" id = "Nazwisko" placeholder = "Proszę podać nazwę"> </ Div> </ Div> <div class = "form-grupa"> <div class = "kol-sm-offset -2 kol-SM-10"> <div class = "checkbox"> <Label> <Wejście type = "checkbox"> Pamiętaj moje </ label> </ Div> </ Div> </ Div> <div class = "form-grupa"> <div class = "kol-sm-offset -2 kol-SM-10"> <Przycisk type = "submit" class = "btn btn-default" > log </ button> </ Div> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Formularz Level

Obsługiwane kontrolki formularzy

Bootstrap wsparcie dla najbardziej popularnych pól formularza, główniewejściowych, textarea, checkbox, radio i wybierz.

Pole wejściowe (Input)

Pole najczęstszą formą tekst jest wejście pole wprowadzania. Użytkownicy mogą wprowadzić większość potrzebnych danych formularzy w niej. Bootstrap zapewnia obsługę sygnału wejściowego dla wszystkich rodzajów rodzimej HTML5, wtym: tekst, hasło, datetime, datetime-local, data, miesiąc, tydzień, czas, numer, adres e-mail, adres URL wyszukiwania, tel ikoloru.wymagane jest stosowne oświadczenietyp,tak aby umożliwićwejściedo pełnego stylu.

Przykłady

<Formularz role = "forma"> <div class = "form-grupa"> <Label dla = "name"> tag </ label> <Wejście type = "text" class = "form-control" placeholder = "input text"> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

pole wejściowe

Box (Textarea)

Kiedy trzeba umożliwić wprowadzanie wielu linii, można użyć textarea polu tekstowym. Można zmienić właściwośćwierszy,jeśli jest to konieczne (mniejsza liczba wierszy = mniejsze pudełko, linia = więcej dużych ramka).

Przykłady

<Formularz role = "forma"> <div class = "form-grupa"> <Label dla = "name"> Pole tekstowe </ label> <textarea class = "form-control" wiersze = "3"> </ textarea> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Pole tekstowe

Pole wyboru (checkbox) i radio button (Radio)

Pola wyboru i przyciski radiowe są stosowane, aby umożliwić użytkownikom wybór spośród wielu zaprogramowanych opcji.

  • Kiedy tworzysz formularz, jeśli chcesz użytkownikowi wybrać kilka opcji z listy, należy skorzystać zpola wyboru.Jeśli ograniczysz użytkownik może wybrać opcję, za pomocąradia.
  • Seria pól wyboru i przycisków radiowych używać.checkbox-inlineinline lub.radio-klasę,kontrolować ich wyświetlanie na tej samej linii.

Poniższy przykład pokazuje oba typy (domyślne i inline):

Przykłady

<Label dla = "name"> instancja domyślna polach wyboru i przycisków opcji </ label> <div class = "checkbox"> <Label> <Wejście type = "checkbox" value = ""> Opcja 1 </ label> </ Div> <div class = "checkbox"> <Label> <Wejście type = "checkbox" value = ""> Opcja 2 </ label> </ Div> <div class = "radio"> <Label> <Wejście type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "Opcja 1" sprawdzone> Opcja 1 </ label> </ Div> <div class = "radio"> <Label> <Wejście type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "Opcja 2"> Wariant 2 - Wybór będzie odznaczyć opcję 1 </ label> </ Div> <Label dla = "name"> pola wyboru instancji inline i przycisków radiowych </ label> <Div> <Label class = "checkbox-inline"> <Wejście type = "checkbox" id = "inlineCheckbox1" value = "Opcja 1"> Opcja 1 </ label> <Label class = "checkbox-inline"> <Wejście type = "checkbox" id = "inlineCheckbox2" value = "Opcja 2"> Opcja 2 </ label> <Label class = "checkbox-inline"> <Wejście type = "checkbox" id = "inlineCheckbox3" value = "opcja3"> Opcja 3 </ label> <Label class = "checkbox-inline"> <Wejście type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "Opcja 1" sprawdzone> Opcja 1 </ label> <Label class = "checkbox-inline"> <Wejście type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "Opcja 2"> Opcja 2 </ label> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Pola wyboru i przyciski radiowe

Pole wyboru (Select)

Jeśli użytkownik ma do wyboru kilka opcji, ale domyślnie może wybrać opcję, należy skorzystać z pola wyboru.

  • Użyj <wybierz> Wyświetla listę opcji, zwykle tych, którzy są zaznajomieni z listy wyboru, takich jak państwa lub liczby.
  • Użyjwielokrotnego = "wielokrotność"pozwala użytkownikom wybrać wiele opcji.

Poniższy przykład pokazuje oba typy (i wielokrotnego wyboru):

Przykłady

<Formularz role = "forma"> <div class = "form-grupa"> <Label dla = "name"> Lista wyboru </ label> <Wybierz class = "forma sterowania"> <Option> 1 </ option> <Option> 2 </ option> <Option> 3 </ option> <Option> 4 </ option> <Option> 5 </ option> </ Select> <Label Wybierz Lista = "name"> Wielokrotny wybór </ label> <Wybierz wielokrotność class = "forma sterowania"> <Option> 1 </ option> <Option> 2 </ option> <Option> 3 </ option> <Option> 4 </ option> <Option> 5 </ option> </ Select> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

pole wyboru

Static control

Kiedy trzeba umieścić postać zwykłego tekstu w poziomym tagu formularza, należy użyćklasy.form-Control-statyczne w <p> dalej.

Przykłady

<Formularz class = "form-poziomy" role = "forma"> <div class = "form-grupa"> <Label class = "kol-SM-2 kontrolno-label"> e-mail </ label> <div class = "kol-SM-10 "> <P class = "form-control-static "> [email protected] </ p> </ Div> </ Div> <div class = "form-grupa"> <Label dla = "inputPassword" class = "kol-SM-2 kontrolno-label"> Hasło </ label> <div class = "kol-SM-10 "> <Wejście type = "password" class = "form-control" id = "inputPassword" placeholder = "Podaj hasło"> </ Div> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Static control

Kontrola stanu Formularz

Ponadto: skupić sięstan (czyli użytkownik kliknie na wejściu lub użyj klawisza TAB, aby skupić się na wejściu), Bootstrap wyłączyć także pole wprowadzania definiuje styl i zapewnia klasę walidacji formularza.

Skoncentruj się pole wprowadzania

Po otrzymaniuwejściepolutekstowym: ostrości,pole wprowadzania konturu zostanie usunięty, a stosowaniebox-shadow.

Wyłącz wejście polu tekstowym

Jeśli chcesz wyłączyć wejście pole wprowadzania, wystarczy dodać atrybutdisabled,to nie tylko pole wprowadzania wyłączyć, ale również zmienić styl polu tekstowym, a gdy wskaźnik myszy nad kursorem myszy na styl elementu.

Pole niepełnosprawnych zestaw fieldset

Na <fieldset> dodać atrybut disabled do wyłączenia <fieldset> wewnątrz wszystkie kontrolki.

weryfikacja statusu

Bootstrap zawiera błędy, ostrzeżenia i komunikat o powodzeniu weryfikacji style. Tylko element nadrzędny wystarczy dodać odpowiedniąklasę (.has ostrzegania, .has-błędulub .has-success)może być stosowany w celu zweryfikowania statusu.

Poniższy przykład ilustruje cały stan sterowania:

Przykłady

<Formularz class = "form-poziomy" role = "forma"> <div class = "form-grupa"> <Label class = "kol-SM-2 kontrolno-label"> ostrości </ label> <div class = "kol-SM-10 "> <Wejście class = "form-control" id = "focusedInput" type = "text" value = "pola tekstowego, aby uzyskać ostrość ..."> </ Div> </ Div> <div class = "form-grupa"> <Label dla = "inputPassword" class = "kol-SM-2 kontrolno-label"> Wyłącz </ label> <div class = "kol-SM-10 "> <Wejście class = "form-control" id = "disabledInput" type = "text" placeholder = "zakazać importu polu tekstowym ..." zablokowane> </ Div> </ Div> <fieldset zablokowane> <div class = "form-grupa"> <Label dla = "disabledTextInput" class = "kol-SM-2 kontrolno-label"> wejście wyłączyć (fieldset wyłączone) </ label> <div class = "kol-SM-10 "> <Wejście type = "text" id = "disabledTextInput" class = "form-control" placeholder = "zakazać importu"> </ Div> </ Div> <div class = "form-grupa"> <Label dla = "disabledSelect" class = "kol-SM-2 kontrolno-label"> Wyłącz menu wyboru (fieldset wyłączone) </ label> <div class = "kol-SM-10 "> <Wybierz id = "disabledSelect" class = "forma sterowania"> <Option> Wyłącz Wybór </ option> </ Select> </ Div> </ Div> </ Fieldset> <div class = "forma grupa HAS- sukces"> <Label class = "kol-SM-2 kontrolno-label" dla = ""> inputSuccess sukcesem wejście </ label> <div class = "kol-SM-10 "> <Wejście type = "text" class = "form-control" id = "inputSuccess"> </ Div> </ Div> <div class = "forma grupa HAS- ostrzegawczy"> <Label class = "kol-SM-2 kontrolno-label" dla = "inputWarning"> Wpisz Ostrzeżenie </ label> <div class = "kol-SM-10 "> <Wejście type = "text" class = "form-control" id = "inputWarning"> </ Div> </ Div> <div class = "forma grupa HAS- error"> <Label class = "kol-SM-2 kontrolno-label" dla = "inputError"> literówki </ label> <div class = "kol-SM-10 "> <Wejście type = "text" class = "form-control" id = "inputError"> </ Div> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Kontrola stanu Formularz

Kontrola Formularz Rozmiar

Można użyć każdejklasy.input-LG i.col-LG-*ustawić wysokość i szerokość formularza. Poniższy przykład ilustruje ten punkt:

Przykłady

<Formularz role = "forma"> <div class = "form-grupa"> <Wejście class = "forma sterowania input- lg" type = "text" placeholder = ".input-lg"> </ Div> <div class = "form-grupa"> <Wejście class = "form-control" type = "text" placeholder = "default wejście"> </ Div> <div class = "form-grupa"> <Wejście class = "form-kontrolki input- sm" type = "text" placeholder = ".input-sm"> </ Div> <div class = "form-grupa"> </ div> <div class = "form-grupa"> <Wybierz class = "forma sterowania input- lg"> <option value = ""> .input-lg </ option> </ Select> </ Div> <div class = "form-grupa"> <Wybierz class = "forma sterowania"> <option value = ""> wybór domyślny </ option> </ Select> </ Div> <div class = "form-grupa"> <Wybierz class = "forma sterowania input- sm"> <option value = ""> .input-sm </ option> </ Select> </ Div> <div class = "wiersz"> <div class = "kol-LG-2 "> <Wejście type = "text" class = "form-control" placeholder = ".col-LG-2 "> </ Div> <div class = "kol-LG-3 "> <Wejście type = "text" class = "form-control" placeholder = ".col-LG-3 "> </ Div> <div class = "kol-LG-4 "> <Wejście type = "text" class = "form-control" placeholder = ".col-LG-4 "> </ Div> </ Div> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Kontrola Formularz Rozmiar

Pomoc forma tekstu

Bootstrap kontrola Formularze mogą mieć wkład w polu tekstowym w tekście pomocy bloku poziomu. Aby dodać całą szerokość elementu zawartości w <input> Po użyciu.help blok.Poniższy przykład ilustruje ten punkt:

Przykłady

<Formularz role = "forma"> <Span> Pomoc tekstu na przykład </ span> <Wejście class = "form-control" type = "text" placeholder = ""> <span class = "help-block"> blok tekstu długości pomocy, więcej niż jedna linia musi być przedłużony do następnego wiersza. W tym przykładzie tekst pomocy w sumie dwie linie. </ Span> </ Form>

Spróbuj »

Wyniki przedstawiają się następująco:

Pomoc forma tekstu