HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Formularze Bootstrap

❮ Poprzedni Następny ❯

Domyślne ustawienia Bootstrapa

Kontrolki formularzy automatycznie otrzymują pewne globalne style za pomocą Bootstrap:

Wszystkie elementy tekstowe <input>, <textarea>i <select>z klasą .form-controlmają szerokość 100%.

Układy formularzy Bootstrap

Bootstrap udostępnia trzy rodzaje układów formularzy:

  • Forma pionowa (domyślna)
  • Forma pozioma
  • Formularz wbudowany

Standardowe zasady dla wszystkich trzech układów formularzy:

  • Zawijaj etykiety i kontrolki formularzy <div class="form-group">(potrzebne do uzyskania optymalnych odstępów)
  • Dodaj klasę do wszystkich elementów .form-controltekstowych <input>, <textarea>, i<select>

Forma pionowa Bootstrap (domyślna)

Poniższy przykład tworzy formularz pionowy z dwoma polami wejściowymi, jednym polem wyboru i przyciskiem przesyłania:

Przykład

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Formularz inline Bootstrap

W formularzu wbudowanym wszystkie elementy są wbudowane, wyrównane do lewej, a etykiety znajdują się obok.

Uwaga: dotyczy to tylko formularzy w rzutniach o szerokości co najmniej 768px!

Dodatkowa zasada dla formularza inline:

  • Dodaj klasę .form-inlinedo <form>elementu

Poniższy przykład tworzy formularz wbudowany z dwoma polami wejściowymi, jednym polem wyboru i jednym przyciskiem przesyłania:

Przykład

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Porada: Jeśli nie dodasz etykiety do każdego wejścia, czytniki zawartości ekranu będą miały problemy z formularzami. Możesz ukryć etykiety dla wszystkich urządzeń z wyjątkiem czytników ekranu, używając .sr-onlyklasy:

Przykład

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Pozioma forma Bootstrapa

Forma pozioma oznacza, że ​​etykiety są wyrównane obok pola wejściowego (poziomo) na dużych i średnich ekranach. Na małych ekranach (767px i mniej) przekształci się w formę pionową (etykiety są umieszczane na górze każdego wejścia).

Dodatkowe zasady dla formularza poziomego:

  • Dodaj klasę .form-horizontaldo <form>elementu
  • Dodaj klasę .control-labeldo wszystkich <label>elementów

Wskazówka: Użyj predefiniowanych klas siatki Bootstrap, aby wyrównać etykiety i grupy kontrolek formularza w układzie poziomym.

Poniższy przykład tworzy formularz poziomy z dwoma polami wejściowymi, jednym polem wyboru i jednym przyciskiem przesyłania.

Przykład

<form class="form-horizontal" action="/action_page.php">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

❮ Poprzedni Następny ❯