Учебники

Bootstrap — Формы

Октябрь 26, 2018

В этой главе мы рассмотрим, как с легкостью создавать формы с помощью Bootstrap. Bootstrap упрощает простую разметку HTML и расширенные классы для разных стилей форм. В этой главе мы рассмотрим, как с легкостью создавать формы с помощью Bootstrap.

Макет формы

Bootstrap предоставляет вам следующие типы макетов форм —

  • Вертикальная (по умолчанию) форма
  • Линейная форма
  • Горизонтальная форма

Вертикальная или основная форма

Базовая структура формы поставляется с Bootstrap; отдельные элементы управления формой автоматически получают глобальный стиль. Для создания базовой формы сделайте следующее —

  • Добавьте форму роли в родительский элемент <form>.

  • Оберните метки и элементы управления в <div> с классом .form-group . Это необходимо для оптимального расстояния.

  • Добавьте класс .form-control ко всем текстовым элементам <input>, <textarea> и <select>.

Добавьте форму роли в родительский элемент <form>.

Оберните метки и элементы управления в <div> с классом .form-group . Это необходимо для оптимального расстояния.

Добавьте класс .form-control ко всем текстовым элементам <input>, <textarea> и <select>. 

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Встроенная форма

Чтобы создать форму, в которой все элементы встроены, выровнены по левому краю, а надписи расположены рядом, добавьте класс .form-inline в тег <form>. 

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

  • По умолчанию входы, селекторы и текстовые области имеют 100% ширину в Bootstrap. Вам нужно установить ширину на элементах управления формы при использовании встроенной формы.

  • Используя класс .sr-only вы можете скрыть метки встроенных форм.

По умолчанию входы, селекторы и текстовые области имеют 100% ширину в Bootstrap. Вам нужно установить ширину на элементах управления формы при использовании встроенной формы.

Используя класс .sr-only вы можете скрыть метки встроенных форм.

Горизонтальная форма

Горизонтальные формы выделяются среди других не только количеством разметки, но и представлением формы. Чтобы создать форму, которая использует горизонтальный макет, выполните следующие действия:

  • Добавьте класс .form-horizontal к родительскому элементу <form>.

  • Оберните метки и элементы управления в <div> с классом .form-group .

  • Добавьте класс .control-label к меткам.

Добавьте класс .form-horizontal к родительскому элементу <form>.

Оберните метки и элементы управления в <div> с классом .form-group .

Добавьте класс .control-label к меткам. 

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </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">Sign in</button>
      </div>
   </div>
	
</form>

Поддерживаемые элементы управления формы

Bootstrap изначально поддерживает наиболее распространенные формы управления, в основном ввод, текстовое поле, флажок, радио и выбор.

входные

Самым распространенным текстовым полем формы является поле ввода. Здесь пользователи будут вводить большинство основных данных формы. Bootstrap предлагает поддержку для всех собственных типов ввода HTML5: текст, пароль, дата-время, дата-время-локальный, дата, месяц, время, неделя, номер, электронная почта, URL-адрес, поиск, тел и цвет . Правильное объявление типа требуется, чтобы сделать входные данные полностью стилизованными. 

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Textarea

Текстовая область используется, когда вам нужно несколько строк ввода. При необходимости измените атрибут строки (меньше строк = поле меньше, больше строк = поле больше). 

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Флажки и радио кнопки

Флажки и переключатели удобны, когда вы хотите, чтобы пользователи выбирали из списка предустановленных параметров.

  • При создании формы установите флажок, если хотите, чтобы пользователь выбирал любое количество параметров из списка. Используйте радио, если вы хотите ограничить пользователя только одним выбором.

  • Используйте класс .checkbox-inline или .radio-inline, чтобы серии флажков или радио для элементов управления отображались в одной строке.

При создании формы установите флажок, если хотите, чтобы пользователь выбирал любое количество параметров из списка. Используйте радио, если вы хотите ограничить пользователя только одним выбором.

Используйте класс .checkbox-inline или .radio-inline, чтобы серии флажков или радио для элементов управления отображались в одной строке.

В следующем примере демонстрируются оба типа (по умолчанию и встроенный) — 

<label for = "name">Example of Default Checkbox and radio button </label>

<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 = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Выбирается

Выбор используется, когда вы хотите разрешить пользователю выбирать из нескольких вариантов, но по умолчанию он позволяет только один.

  • Используйте <select> для опций списка, с которыми пользователь знаком, таких как состояния или числа.

  • Используйте несколько = «несколько», чтобы позволить пользователям выбрать более одного варианта.

Используйте <select> для опций списка, с которыми пользователь знаком, таких как состояния или числа.

Используйте несколько = «несколько», чтобы позволить пользователям выбрать более одного варианта.

В следующем примере демонстрируются оба (выберите и несколько) типов — 

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Статический контроль

Используйте класс .form-control-static для <p>, когда вам нужно поместить простой текст рядом с меткой формы в горизонтальной форме. 

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Состояния контроля формы

В дополнение к состоянию : focus (т. Е. Пользователь нажимает на вход или вкладки на нем), Bootstrap предлагает стилизацию для отключенных входов и классов для проверки формы.

Фокус ввода

Когда вход получает : focus , контур входа удаляется и применяется тень от блока .

Отключенные входы

Если вам нужно отключить вход, простое добавление атрибута disabled не только отключит его; он также изменит стиль и курсор мыши, когда курсор будет находиться над элементом.

Отключенные поля

Добавьте отключенный атрибут в <fieldset>, чтобы отключить все элементы управления в <fieldset> одновременно.

Государства проверки

Bootstrap включает в себя стили проверки ошибок, предупреждений и сообщений об успехе. Чтобы использовать, просто добавьте соответствующий класс ( .has-warning, .has-error или .has-success ) к родительскому элементу.

В следующем примере демонстрируются все состояния управления формой — 

<form class = "form-horizontal" role = "form">

   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Disabled</label>
      
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         
         <label for = "disabledTextInput"  class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div>
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect"  class = "col-sm-2 control-label">
            Disabled select menu (Fieldset disabled)
         </label>
         
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control">
               <option>Disabled select</option>
            </select>
         </div>
         
      </div>
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
      
   </div>
	
</form>

Размер контроля формы

Вы можете установить высоту и ширину форм, используя такие классы, как .input-lg и .col-lg- * соответственно. Следующий пример демонстрирует это — 

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Текст справки

Элементы управления формой Bootstrap могут иметь текст справки на уровне блоков, который поступает вместе со входными данными. Чтобы добавить блок содержимого полной ширины, используйте .help-block после <input>. Следующий пример демонстрирует это —

54
Share: