Wejścia formularza Bootstrap
Obsługiwane kontrolki formularzy
Bootstrap obsługuje następujące kontrolki formularzy:
- Wejście
- obszar tekstowy
- pole wyboru
- radio
- wybierać
Wejście Bootstrap
Bootstrap obsługuje wszystkie typy danych wejściowych HTML5: tekst, hasło, data i godzina, data i godzina-lokalna, data, miesiąc, godzina, tydzień, numer, e-mail, adres URL, wyszukiwanie, tel i kolor.
Uwaga: Wejścia NIE będą w pełni stylizowane, jeśli ich typ nie zostanie poprawnie zadeklarowany!
Poniższy przykład zawiera dwa elementy wejściowe; jedno typu tekst i jedno typu hasło:
Przykład
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Obszar tekstowy Bootstrapa
Poniższy przykład zawiera obszar tekstowy:
Przykład
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Pola wyboru Bootstrapa
Pola wyboru są używane, jeśli chcesz, aby użytkownik wybrał dowolną liczbę opcji z listy wstępnie ustawionych opcji.
Poniższy przykład zawiera trzy pola wyboru. Ostatnia opcja jest wyłączona:
Przykład
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
Użyj .checkbox-inlineklasy, jeśli chcesz, aby pola wyboru pojawiły się w tym samym wierszu:
Przykład
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
Przyciski radiowe Bootstrap
Przyciski radiowe są używane, jeśli chcesz ograniczyć użytkownika tylko do jednego wyboru z listy wstępnie ustawionych opcji.
Poniższy przykład zawiera trzy przyciski radiowe. Pierwsza opcja jest domyślnie zaznaczona, a ostatnia opcja jest wyłączona:
Przykład
<div class="radio">
<label><input type="radio" name="optradio"
checked>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Użyj .radio-inlineklasy, jeśli chcesz, aby przyciski opcji pojawiały się w tym samym wierszu:
Przykład
<label class="radio-inline"><input type="radio" name="optradio"
checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Lista wyboru Bootstrapa
Listy wyboru są używane, jeśli chcesz, aby użytkownik mógł wybierać spośród wielu opcji.
Poniższy przykład zawiera listę rozwijaną (lista wyboru):
Przykład
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>