1. входные
2. Текстовая область
3. Флажки
4. Основные флажки
5. Встроенный флажок
6. Переключатель
7. Основной переключатель
8. Встроенная кнопка радио
9. Выбор одного варианта
10. Выбор нескольких вариантов
11. Добавить текст справки к компоненту

Bootstrap предоставляет вам все инструменты для простой настройки ваших форм. С помощью Bootstrap вы можете добавить новые «элементы управления» формы, такие как флажки или текстовые области, с уже установленным стилем. Эта статья покажет вам основные способы настройки формы и код, необходимый для включения каждого элемента управления.

Эти инструкции предназначены для Bootstrap версии 4.2.1.

Если вы ищете инструкции по созданию макета формы Bootstrap, см. Наш Как настроить макеты формы Bootstrap ,

Элементы управления - это другое название для элементов Bootstrap, например текстовые области а также флажки , который может быть добавлен в вашу форму.

входные

Один элемент управления называется «входы». Входные данные - это поля, в которые пользователь может вводить текст. Ниже приведен пример кода, который можно использовать для добавления элемента управления вводом в форму:

<input type = "email" class = "form-control" placeholder = "Введите адрес электронной почты">

Код выше получится так:

В коде тип объявляет тип ввода. В случае примера это будет тип «email». Заполнитель определяет текст, отображаемый в поле ввода. В приведенном выше примере в качестве заполнителя используется «Введите адрес электронной почты». Этот текст исчезнет, ​​когда пользователь начнет вводить текстовое поле.

Входные данные начальной загрузки поддерживают типы ввода HTML5, что означает, что вы можете использовать любой из следующих типов:

цвет дата дата время дата время местный адрес электронной почты номер месяца пароль поиск тел текст время URL неделя

Эти типы могут быть объявлены путем добавления type = "---" к вашему входу, как в примере. Если вы хотите добавить ввод по электронной почте, измените его на type = «email»

<input type = "email" class = "form-control" placeholder = "Введите адрес электронной почты">

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

Текстовая область

Элемент управления текстовой областью - это область, которая допускает большие объемы текста, например раздел комментариев.

Ниже приведен фрагмент примера кода, который показывает, как будет использоваться элемент управления текстовой области:

<textarea class = "form-control" row = "3" placeholder = "Это текстовая область!"> </ textarea>

Этот код будет отображать текстовую область следующим образом:

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

<textarea class = "form-control" row = "3" placeholder = "Это текстовая область!"> </ textarea>

В приведенном выше примере текстовая область занимает три строки.

Флажки

Флажки позволяют пользователям выбирать несколько вариантов. По умолчанию флажки отображаются вертикально. Однако вы можете изменить флажки для горизонтального отображения, изменив тип на type = "checkbox-inline". Вертикальные флажки см. В наших Раздел основных флажков , Если вы хотите, чтобы флажки отображались горизонтально, см. Наш Встроенные флажки ,

Основные флажки

Основные чекбоксы отображаются вертикально.

Код для основных вертикальных флажков выглядит следующим образом:

<div class = "checkbox"> <label> <input type = "checkbox" value = "opt1"> Опция 1 </ label> </ div> <div class = "checkbox"> <label> <input type = " checkbox "value =" opt2 "> Вариант 2 </ label> </ div>

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

Для отображения флажков по горизонтали, см. следующий раздел ,

Встроенный флажок

Встроенные флажки отображаются горизонтально, как в примере ниже.

Хотя код для встроенных флажков очень похож на код вертикальных флажков, есть одно важное отличие. Горизонтальные флажки имеют добавленный класс = "checkbox-inline" к элементу метки.

<label class = "checkbox-inline"> <input type = "checkbox" value = "opt1"> Опция 1 </ label> <label class = "checkbox-inline"> <input type = "checkbox" value = "opt2 "> Вариант 2 </ label>

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

Встроенные флажки установлены иначе, чем основные флажки. Во встроенном коде флажка элемент <label> - это тот, которому присваивается class = ”checkbox-inline”. Однако, если вы посмотрите на основной код флажка, вы увидите, что class = ”checkbox” объявлен в элементе <div>, а не в элементе <label>.

Переключатель

Радиокнопка похожа на флажок. Тем не менее, только один переключатель может быть выбран одновременно, в то время как флажки могут иметь несколько выбранных полей.

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

Основной переключатель

По умолчанию переключатели отображаются вертикально, как показано в примере ниже:

Код для этого примера выглядит следующим образом:

<div class = "radio"> <label> <input type = "radio» name = "radioButtons" id = "Radio1" value = "opt1" флажок> Вариант 1 </ label> </ div> <div class = " radio "> <label> <input type =" radio "name =" radioButtons "id =" Radio2 "value =" opt2 "> Опция 2 </ label> </ div> <div class =" radio "> <label> <input type = "radio" name = "radioButtons" id = "Radio3" value = "opt3"> Параметр 3 </ label> </ div>

С помощью переключателей вы можете выбрать переключатель, который будет выбран по умолчанию. Добавьте «флажок» в конец одной из ваших радиокнопок, чтобы выбрать его.

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

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

Встроенная кнопка радио

Чтобы переключатели отображались горизонтально, добавьте class = "radio-inline" к элементу ярлыка переключателя.

Код вышеприведенного примера будет выглядеть так:

<label class = "radio-inline"> <input type = "radio" name = "radioInline" id = "inlineRadio1" value = "inlineOpt1"> Вариант 1 </ label> <label class = "radio-inline"> < input type = "radio" name = "radioInline" id = "inlineRadio2" value = "inlineOpt2"> Опция 2 </ label> <label class = "radio-inline"> <input type = "radio" name = "radioInline" id = "inlineRadio3" value = "inlineOpt3"> Вариант 3 </ label>

Как и в случае с флажками, встроенный код переключателя отличается от основного кода переключателя. Class = «radio-inline» находится в элементе <label> во встроенном коде радиосвязи, а не в элементе <div>, как в основной радиокод ,

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

Выпадающий выбор позволяет пользователю выбрать опцию (или несколько опций) из списка опций. Вы можете создать раскрывающийся список, в котором можно выбрать только один параметр или задать несколько.

Для выбора только одного варианта, см. Наш Раздел выбора одного варианта ,

Чтобы позволить пользователям выбрать более одного варианта, см. Наш Раздел выбора нескольких вариантов ,

Выбор одного варианта

При нажатии отображается один раскрывающийся список. Пользователь может выбрать один вариант из раскрывающегося списка, как в примере ниже:

Однако их код отличается. Единый выпадающий список будет похож на код ниже:

<select class = "form-control"> <option> Option 1 </ option> <option> Option 2 </ option> <option> Option 3 </ option> <option> Option 4 </ option> <option> Option 5 </ option> </ select>

Код является элементом select с вложенными элементами option.

Выбор нескольких вариантов

Multi-select раскрывающиеся списки отображаются таким образом, что позволяет выбрать несколько вариантов, как показано ниже:

Единственное различие между ними заключается в элементе <select>. В раскрывающемся списке это выглядит как <select class = "form-control">. Однако в меню множественного выбора оно отображается как <выберите несколько классов = "управление формой">.

<выберите несколько классов = "управление формой"> <опция> опция 1 </ option> <опция> опция 2 </ option> <опция> опция 3 </ option> <опция> опция 4 </ option> <опция> Вариант 5 </ option> </ select>

Эта разница позволяет пользователям выбирать несколько вариантов одновременно.

Добавить текст справки к компоненту

Вы можете добавить текст справки к вашим элементам управления. Bootstrap автоматически отформатирует текст как текст справки, который обычно отображается более мелким текстом под элементом формы. Вот пример текста справки:

Чтобы добавить текст справки, добавьте <small class = "form-text text-muted"> Текст справки здесь </ small> под элементом формы.

<label> Пример текста справки </ label> <input type = "text" class = "form-control"> <small class = "form-text text-muted"> Текст справки здесь </ small>

Элемент <small> добавляет меньший текст прямо под элементом формы. Class = "form-text text-muted" меняет цвет текста на серый.

Если вы ищете дополнительную информацию о формах Bootstrap, ознакомьтесь с нашими Как настроить макеты формы Bootstrap ,

Похожие

Комментарии