Elastyczny HTML i CSS

Najlepsza strona formularzy w Bootstrapie jest to, że wszystkie pola i kontrolki wyglądają świetnie, bez względu na to, w jaki sposób opisano je znacznikami. Wymagany jest niezbędny kod HTML, ale dla wymaganych znaczników zapewnione jest stylizowanie.

Cztery dołączone układy

Bootstrap wspiera cztery typy układów formularzy:

• Pionowy (Vertical, domyślny)
• Wyszukiwarka (Search)
• Śródliniowy (Inline)
• Poziomy (Horizontal)

Różne typy układów formularzy wymagają pewnych zmian w znacznikach, ale kontrolki pozostaja i zachowują się tak samo.

Kontrolki stanu i nie tylko

Formularze Bootstrapa obejmują style dla wszystkich podstawqowych pól formularza, takich jak pola tekstowe, obszary tekstowe, czy pola wyboru i inne. Ponadto Bootstrap wyposażony jest w szereg niestandardowych komponentów, takich jak ???? załączonych i dołączanych pola tekstowe oraz wsparcie dla list wyboru.

Stany takie jak bład, ostrzeżenie i powodzenie są interpretowane przez wszystkie kontrolki formularzy. Ponadto dołaczono style do wyłączonych kontrolek.

Podstawowy formularz

Domyślny - inteligentny i lekki bez dodatkowych znaczników.

<form class="well">
  <label>Nazwa etykiety</label>
  <input type="text" class="span3" placeholder="Wpisz coś…">
  <span class="help-block">Tutaj przykładowy blok pomocy.</span>
  <label class="checkbox">
    <input type="checkbox"> Zaznacz mnie
  </label>
  <button type="submit" class="btn">Wyślij</button>
</form>

Formularz Szukaj

Dodaj .form-search do znacznika formularza oraz .search-query do znacznika input.

<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Szukaj</button>
</form>

Formularz śródliniowy

Dodaj .form-inline, by uzyskać finezyjne wyrównanie w pionie i odstępy między pólami formularza.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="E-mail">
  <input type="password" class="input-small" placeholder="Hasło">
  <label class="checkbox">
    <input type="checkbox"> Pamiętaj mnie
  </label>
  <button type="submit" class="btn">Zapisz się</button>
</form>

Po prawej są wszystkie domyślne wspierane kontrolki formularzy. Oto ich lista:

• pole tekstowe (tekst, hasło, email, etc)
• pole zaznaczenia
• pole opcji (radio)
• lista wyboru
• lista możliwości
• wstawianie pliku
• obszar tekstowy

Przykłady znakowania

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="input01">Text input</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Walidacja formularzan

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

<fieldset
  class="control-group error">
  …
</fieldset>

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Pola zaznaczenia i wyboru

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Śródwierszowe formularze z wartością dodaną przed (dołączoną) i doklejoną za

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Tekst pomocy w formularzu

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.