Najlepszy samouczek bootstrap Formularz W 2024 r. W tym samouczku możesz dowiedzieć się
Układ formularz,Przykłady,Przykłady,Przykłady,Obsługiwane kontrolki formularzy,Przykłady,Przykłady,Przykłady,Przykłady,Static control,Przykłady,Kontrola stanu Formularz,Przykłady,Kontrola Formularz Rozmiar,Przykłady,Pomoc forma tekstu,Przykłady,
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.
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:
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:
- 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:
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:
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 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:
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:
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@example.com </ 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:
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ść pl.">
</ 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 pl." 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:
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:
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: