Bootstrap — Формы

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

Макет формы

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

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

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

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

• Добавьте роль form к родителю элемента <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">Пример 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>

• По умолчанию inputs, selects, and texta имеет ширину в Bootstrap 100%. Вы должны установить ширину на контролях форм при использовании встроенной формы.
• С использованием класса .sr-only можно скрыть метки встроенных форм.

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

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

• Добавить класс .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">Имя</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter Имя">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Фамилия</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Фамилия">
      </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 изначально поддерживает наиболее распространенные формы управления в основном input, textarea, checkbox, radio, и select.

Inputs

Наиболее распространенной формой текстового поля является полем ввода. Это где пользователи будут вводить большинство необходимых данных формы. Bootstrap предлагает поддержку для всех встроенных типов ввода HTML5: текст, пароль, DateTime, дата, месяц, время, неделя, номер, адрес электронной почты, 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

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

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

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

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

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

Следующий пример демонстрирует оба типа (по умолчанию и встроенного):

<label for = "name">Пример 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">Пример 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>

Selects

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

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

Следующий пример демонстрирует, как (выбрать один или несколько) типов:

<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>

Static Control

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

<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@example.ru</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Пароль</label>
      
      <div class = "col-sm-10">
         <input type = "Пароль" class = "form-control" id = "inputPassword" placeholder = "Пароль">
      </div>
      
   </div>
</form>

Форма состояния контроля

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

фокус ввода

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

lnputs disabled

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

Fieldsets 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>. Следующий пример демонстрирует его:

<form role = "form">
   <span>Пример of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

Читайте также

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

5 лет назад

Показать пост в модальном окне в WordPress

8 лет назад

7 Основных инструментов для Frontend веб-разработки сайтов в 2023 году

2 года назад

0 0 голоса

Рейтинг статьи

Подписаться

авторизуйтесь

Уведомить о

новых последующих комментарияхновых ответах на мои комментарии

Я разрешаю использовать свой email и отправлять уведомления о новых комментариях и ответах (вы cможете отказаться от подписки в любое время).

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

0 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии