Компьютерапия

Бутстрап - Формы

Категория: Bootstrap 3
Просмотров: 3700

В этой статье вы узнаете, как легко создавать формы с помощью 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>

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




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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok