В этой статье вы узнаете, как легко создавать формы с помощью Bootstrap. Bootstrap упрощает работу с простой разметкой HTML и расширенными классами для разных стилей форм.
Содержание:
- Макет формы
- Вертикальная или базовая форма
- Встроенная форма
- Горизонтальная форма
- Поддерживаемые формы управления
- Поля ввода
- Textarea
- CheckBoxes и радио кнопки
- Элемент выбора - Select
- Статический контроль
- Состояние контроля формы
- Фокус ввода
- Отключение ввода
- Отключенные поля
- Статус проверки
- Размеры форм
Макет формы
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>
