Формуляри

Настройки по подразбиране при Bootstrap

HTML формулярите и неговите контроли автоматично получават някои от глобалните стилове на Bootstrap. Всички тесктови <input>, <textarea>, и <select> елемнти с клас .form-control имат ширина от 100%.

Оформление на Bootstrap формулярите

Bootstrap предоставя три различни оформления на формулярите в уеб страниците ни.

  • вертикално оформлевие (това е по подразбиране)
  • хоризонтално
  • междуредово

Стандартни поавила за всичките три модела на оформление:

  • Винаги ползваме <form role="form"> (помага за увеличаване достъпността за хора ползващи екранни четци)
  • Обгръщане на Етикетите и Контролите в <div class="form-group"> (необходима е за оптималното разпределение на пространството между елементие)
  • Добавяне на класа .form-control към всички текстови елемнти за въвеждане на данни <input>, <textarea> и <select>

Вертикални формуляри(по подразбиране)

Следващият пример създава вертикално ориентиран формуляр с две полета за въвеждане на данни, един чекбокс и бутон за изпращане:

Опитайте сами »

Bootstrap вътрешноредови формуляри

В една такава форма всичките елементи са вътрешно редови, ляво подравнени и етикетите са успоредни/alongside/. Обърнете внимание на това, че се отнася само за форми които са за екрани с минимална ширина от 768px! Допълнителни изиксквания за вътрешноредовите формуляри:

  • добавяне на клас .form-inline към елемента <form>
Опитайте сами »

Ако не въведем елемента label за всеки input екранните четци ще изпитват затруднение с прочитането на нашите формуляри. Ние можем да скрием етикетите за всички устройства с изключение на екранните четци с помощта на класа  .sr-only:

Опитайте сами »

Bootstrap хоризонтални форми

Допълнителни изиксквания за хоризонталните формуляри:

  • добавяне на клас .form-horizontal на елемента <form>
  • добавяне на клас .control-label към всички елементи <label>

Използвайте предефинираните класове на Bootstrap грида за да подравните етикетите и групите на контролите в хоризонтално оформление. Следващият пример създава хоризонтална форма с две полета за въвеждане на данни, един чекбокс и бутон за изпращане:

Опитайте сами »