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

Макет формы

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

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

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

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

  • Добавить форму ролей в родительский элемент
    .
  • Оберните ярлыки и элементы управления в 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, вы можете скрыть метки встроенных форм.

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

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

  • Добавьте класс .form-horizontal в родительский элемент form.
  • Оберните ярлыки и элементы управления в div с классом .form-group.
  • Добавьте класс .control к ярлыкам.
<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>

Посмотреть результат

CheckBoxes и радио кнопки

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

  • При создании формы используйте флажок, если вы хотите, чтобы пользователь выбирал любое количество опций из списка. Используйте радио кнопку, если вы хотите ограничить пользователя только одним выбором.
  • Используйте .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 используется, когда вы хотите разрешить пользователю выбирать из нескольких параметров, но по умолчанию он разрешает только один.

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

В следующем примере демонстрируются как (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">Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</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>

Посмотреть результат

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

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

Фокус ввода

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

Отключение ввода

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

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

Добавьте атрибут 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>

Посмотреть результат


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok