Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса

																

																	

																			

																			
																	
  
																			
Условные обозначения
																	
  
																			Название
																	
  
																			 type="text" placeholder="Type something…">
																	
  
																			 class="help-block">Это пример вспомогательного текста.
																	
  
																			 class="checkbox">
																	
    
																			 type="checkbox"> Проверить
																	
  
																	
  
																			 type="submit" class="btn">Подтвердить
																	

																

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент для построения закругленной рамки.

																

																	

																			 class="form-search">
																	
  
																			 type="text" class="input-medium search-query">
																	
  
																			 type="submit" class="btn">Search
																	

																

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.

Запомнить Отправить

																

																	

																			 class="form-inline">
																	
  
																			 type="text" class="input-small" placeholder="Email">
																	
  
																			 type="password" class="input-small" placeholder="Password">
																	
  
																			 class="checkbox">
																	
    
																			 type="checkbox"> Запомнить
																	
  
																	
  
																			 type="submit" class="btn">Отправить
																	

																

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

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

• Добавьте .form-horizontal в форму
• Добавьте текст и элементы управления внутрь .control-group
• Добавьте .control-label в текст
• Добавьте любой подходящий элемент управления .controls для точной настройки

Условные обозначения

Email

 

Пароль

 

Запомнить Отправить

 

 

																

																	

																			 class="form-horizontal">
																	
  
																			 class="control-group">
																	
    
																			 class="control-label" for="inputEmail">Email
																	
    
																			 class="controls">
																	
      
																			 type="text" id="inputEmail" placeholder="Email">
																	
    
																	
  
																	
  
																			 class="control-group">
																	
    
																			 class="control-label" for="inputPassword">Password
																	
    
																			 class="controls">
																	
      
																			 type="password" id="inputPassword" placeholder="Password">
																	
    
																	
  
																	
  
																			 class="control-group">
																	
    
																			 class="controls">
																	
      
																			 class="checkbox">
																	
        
																			 type="checkbox"> Remember me
																	
      
																	
      
																			 type="submit" class="btn">Sign in
																	
    
																	
  
																	

																

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

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type.

																

																	

																			 type="text" placeholder="Text input">
																

Многострочный текст

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