Bootstrap Формы
В этой главе мы узнаем, как использовать Bootstrap для создания форм. Bootstrap может создавать формы разных стилей с помощью некоторых простых HTML-тегов и расширенных классов.
Bootstrap предоставляет следующие типы макетов форм:
- Вертикальная форма (по умолчанию)
- Встроенная форма
- Горизонтальная форма
Вертикальная или базовая форма
Базовая структура формы встроена в Bootstrap, и отдельные элементы управления формы автоматически получают некоторые глобальные стили. Шаги создания базовой формы перечислены ниже:
- Добавьте к родительскому элементу <form>role="form"。
- Поместите метки и элементы управления в div с классом.form-groupв <div>. Это необходимо для оптимальных отступов.
- Добавьте class = ко всем текстовым элементам <input>, <textarea> и <select>form-control" 。
Пример
<form role="form">
<div class="form-group">
<label for="name">Имя</label>
<input type="text" class="form-control" id="name" placeholder="Пожалуйста, введите ваше имя">
</div>
<div class="form-group">
<label for="inputfile">Ввод файла</label>
<input type="file" id="inputfile">
<p class="help-block">Вот пример текста справки блочного уровня.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Пожалуйста, отметьте</label>
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
Попробуйте »
Результат следующий:
Встроенная форма
Если вам нужно создать форму, в которой все элементы расположены в одну строку, выровнены по левому краю, а подписи находятся рядом, добавьте класс к тегу <form>.form-inline。
Пример
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Имя</label>
<input type="text" class="form-control" id="name" placeholder="Пожалуйста, введите ваше имя">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">Ввод файла</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Пожалуйста, отметьте</label>
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
Попробуйте »
Результат следующий:
- По умолчанию элементы input, select и textarea в Bootstrap имеют ширину 100%. При использовании встроенных форм необходимо задать ширину для элементов управления формы.
- Используя класс.sr-only, можно скрыть метки встроенной формы.
Горизонтальная форма
Горизонтальные формы отличаются от других форм не только объемом разметки, но и способом представления формы. Чтобы создать горизонтально расположенную форму, выполните следующие шаги:
- Добавьте класс к родительскому элементу <form>.form-horizontal。
- Поместите метки и элементы управления в div с классом.form-groupв <div>.
- Добавьте класс к метке.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="Пожалуйста, введите ваше имя">
</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="Пожалуйста, введите вашу фамилию">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Запомнить меня</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Войти</button>
</div>
</div>
</форма>
Попробуйте »
Результат следующий:
Bootstrap поддерживает наиболее распространённые элементы управления формами, в основномinput, textarea, checkbox, radio и select。
Ввод
Наиболее распространённым текстовым полем формы является input. В него пользователи могут ввести большинство необходимых данных формы. Bootstrap поддерживает все нативные типы ввода HTML5, включая:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、telиcolor. Правильное объявлениеtypeтребуется, чтобыinputполучал полные стили.
Пример
<form role="form">
<div class="form-group">
<label for="name">Метки</label>
<input type="text" class="form" placeholder="Текстовое поле">
</div>
</форма>
Попробуйте сами »
Результат следующий:
Текстовая область
Когда нужен многострочный ввод, можно использовать textarea. При необходимости можно изменить атрибутrows(меньше строк = меньше поле, больше строк = больше поле).
Пример
<form role="form">
<div class="form-group">
<label for="name">Текстовая область</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
Попробуйте сами »
Результат следующий:
Флажки и радиокнопки
Флажки и радиокнопки используются, чтобы дать пользователям возможность выбрать один из набора предустановленных вариантов.
- При создании формы, если вы хотите, чтобы пользователи выбирали несколько вариантов из списка, используйтеcheckbox. Если вы ограничиваете пользователей выбором только одного варианта, используйтеradio。
- Для группы флажков и радиокнопок используйте класс.checkbox-inlineили.radio-inline, чтобы они отображались на одной строке.
В следующем примере демонстрируются оба типа (стандартный и встроенный):
Пример
<label for="name">Пример стандартных флажков и радиокнопок</label>
<div class="checkbox">
<label><input type="checkbox" value="">Вариант 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Вариант 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Вариант 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Вариант 2 - При выборе этого варианта выбор варианта 1 будет снят</label>
</div>
<label for="name">Пример встроенных флажков и радиокнопок</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">Вариант 1</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">Вариант 2</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3">Вариант 3</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>Вариант 1</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">Вариант 2</label>
</div>
Попробуйте сами »
Результат следующий:
Выбор
Когда нужно, чтобы пользователи выбирали из нескольких вариантов, но по умолчанию можно выбрать только один, используйте выпадающий список.
- Используйте <select>, чтобы отобразить список вариантов, обычно списки, с которыми пользователи знакомы, например штаты или числа.
- Используйтеmultiple="multiple", чтобы позволить пользователям выбирать несколько вариантов.
Следующий пример демонстрирует оба типа (select и multiple):
Пример
<form role="form">
<div class="form-group">
<label for="name">Список выбора</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">Список выбора с множественным выбором</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">Эл. почта</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Пароль</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">
</div>
</div>
</form>
Попробуйте сами »
Результат следующий:
Помимо:focusсостояния (т. е. когда пользователь щёлкает по полю ввода или использует клавишу Tab, чтобы сфокусироваться на поле ввода), Bootstrap также определяет стили для отключённых полей ввода и предоставляет классы проверки формы.
Фокус на поле ввода
Когда поле ввода получает:focus, у поля ввода удаляется контур и добавляетсяbox-shadow。
Отключённое поле ввода
Если вы хотите отключить поле ввода, просто добавьте атрибутdisabled, который не только отключает поле ввода, но также изменяет его стиль и стиль курсора мыши при наведении указателя на элемент.
Отключенный fieldset
Добавьте атрибут 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">Фокус</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Это поле ввода получает фокус...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Отключено</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="Это поле нельзя редактировать..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Отключённое поле ввода (Fieldset отключён)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Недоступно для редактирования">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">Отключённое меню выбора (Fieldset отключён)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Недоступно для выбора</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">Успешный ввод</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">Предупреждение ввода</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">Ошибка ввода</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</форма>
Попробуйте сами »
Результаты следующие:
Вы можете использовать класс.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="Ввод по умолчанию">
</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="">Выбор по умолчанию</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 могут иметь блочный текст подсказки у элемента input. Чтобы добавить блок содержимого, занимающий всю ширину, используйте его после <input>.help-block. Следующий пример демонстрирует это:
Пример
<form role="form">
<span>Пример текста подсказки</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">Более длинный блок текста подсказки, который превышает одну строку и должен переноситься на следующую строку. Текст подсказки в этом примере занимает всего две строки.</span>
</form>
Попробуйте сами »
Результаты следующие:
Другие расширения
