Применение полей ввода и форм bootstrap-3
Применение возможностей форм и полей ввода фреймворка bootstrap 3, предоставлено описание всем имеющимся селекторам в этой версии.
Форма ввода и текстовая область
Для применения адаптивной формы ввода или текстовой области, достаточно добавить class="form-control" элементам управления. Состояние :focus имеет стилевое оформление, для него используется свойство box-shadow.
<input type="text" class="form-control" placeholder="Форма ввода"> <textarea class="form-control" rows="4"></textarea>
Блокировка ввода
Вы можете заблокировать поля ввода и текстовые области сделав их состояния неактивными. Для блокировки ввода используйте атрибут disabled.
<input type="text" class="form-control" placeholder="Форма ввода"> <input type="text" class="form-control" placeholder="Заблокированная форма ввода" disabled> <textarea class="form-control" rows="4"></textarea> <textarea class="form-control" rows="4" disabled></textarea>
Пример удаления атрибута disabled
Приводим пример изменения состояния disabled для элемента ввода путём использования скрипта. Пример используется как возможность применения, и не имеет прямого отношения к функционалу форм bootstrap-3.
<input type="text" class="form-control" placeholder="Заблокированная форма ввода" disabled>
<label><input id="activevvod" type="checkbox"> Снять блокировку</label>
<script>
$(function (){
$('#activevvod').click(function (){
$('input').removeAttr('disabled');
});
});
</script>
Радио и чекбоксы
Горизонтальное расположение
Для горизонтального расположения используйте class="checkbox" и class="radio".
<div class="checkbox"> <label> <input type="checkbox" value=""> </label> </div> <div class="radio"> <label> <input type="radio" value=""> </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> </label> </div> <div class="radio"> <label> <input type="radio" value=""> </label> </div>
Вертикальное расположение
Для вертикального расположения используйте class="checkbox-inline" и class="radio-inline".
<label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </label> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> </label> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"> </label>
Размеры полей ввода
Вертикальные размеры
По умолчанию можно использовать 3 размера высоты полей ввода, если Вы укажите class="form-control", поле ввода будет иметь средний размер, если form-control input-lg, поле будет иметь больший размер высоты, а если class="form-control input-sm", тогда поле будет меньше среднего.
<input class="form-control" type="text" placeholder="Средний размер"> <input class="form-control input-lg" type="text" placeholder="Большой размер"> <input class="form-control input-sm" type="text" placeholder="Маленький размер"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> <select class="form-control input-lg"> <option>1</option> <option>2</option> <option>3</option> </select> <select class="form-control input-sm"> <option>1</option> <option>2</option> <option>3</option> </select>
Горизонтальные размеры
Горизонтальные размеры указываются классами вёрстки bootstrap 3 class="col-xs-ЧИСЛО", class="col-lg-ЧИСЛО", class="col-md-ЧИСЛО", class="col-sm-ЧИСЛО", а так же используются классы смещения class="col-ТИП-offset-ЧИСЛО". Применение тех или иных классов сетки зависит от условий указанных значений родителю (если есть).
<div class="row"> <div class="col-md-4"> <input type="text" class="form-control" placeholder="col-md-4"> </div> <div class="col-md-3"> <input type="text" class="form-control" placeholder="col-md-3"> </div> <div class="col-md-2"> <input type="text" class="form-control" placeholder="col-md-2"> </div> <div class="col-md-1"> <input type="text" class="form-control" placeholder="col-md-1"> </div> </div> <div class="row"> <div class="col-md-4 col-md-offset-2"> <input type="text" class="form-control" placeholder="col-md-4 col-md-offset-2"> </div> </div>
Комментарий для полей ввода
Если Вам нужно добавить комментарий к полям ввода используйте class="help-block".
<input type="text" class="form-control" placeholder="Поле ввода"> <span class="help-block">Здесь Ваш комментарий для поля.</span>
Группы формы и полей
Группы полей ввода могут находится в форме, для этого используйте <div class="form-group">, но так же группа может состоять из самостоятельных полей, для них применяйте <div class="input-group">.
Группы полей формы
Группы полей ввода форм, должны быть помещены в <div class="form-group">.
<div class="form-group col-md-3"> <input type="text" class="form-control" placeholder="Поле ввода 1"> <span class="help-block">Это первое поле группы формы.</span> </div> <div class="form-group col-md-4"> <input type="text" class="form-control" placeholder="Поле ввода 2"> <span class="help-block">Это второе поле группы формы.</span> </div> <div class="form-group col-md-5"> <input type="text" class="form-control" placeholder="Поле ввода 3"> <span class="help-block">Это третье поле группы формы.</span> </div>
Группы полей ввода и размеры
Индивидуальные поля ввода в группе дополняются <div class="input-group">, им устанавливаются размеры class="input-group" как средний, class="input-group input-group-lg" большой и class="input-group input-group-sm" маленький.
<div class="input-group col-md-5"> <input type="text" class="form-control" placeholder="Среднее поле ввода"> </div> <div class="input-group input-group-lg col-md-4"> <input type="text" class="form-control" placeholder="Большое поле ввода"> </div> <div class="input-group input-group-sm col-md-6"> <input type="text" class="form-control" placeholder="Маленькое поле ввода"> </div>
Определение полей ввода
Чтобы пользователь смог определить предназначение поля ввода используйте class="control-label".
<div class="form-group"> <label class="control-label">Это поле 1</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label class="control-label">Это поле 2</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label class="control-label">Это поле 3</label> <input type="text" class="form-control"> </div>
Проверка состояния полей ввода
Можно добавить стилевое оформления состояниям полей ввода через class="has-success", class="has-warning" и class="has-error". Состояния так же будут наследовать элементы селекторов class="control-label", class="form-control" и class="help-block".
<div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Отлично</label> <input type="text" class="form-control" id="inputSuccess1"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Внимание</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">Ошибка</label> <input type="text" class="form-control" id="inputError1"> </div>
Проверка состояния полей ввода с иконками
Для использования иконок полям ввода с возможностью проверки, добавьте группе class="has-feedback" и class="form-control-feedback" селекторам иконок.
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Отлично</label> <input type="text" class="form-control" id="inputSuccess2"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Внимание</label> <input type="text" class="form-control" id="inputWarning2"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Ошибка</label> <input type="text" class="form-control" id="inputError2"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div>
Дополнение полей ввода
Используйте маркировку полей ввода применяя class="input-group-addon".
<div class="row"> <div class="input-group col-md-6"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Ваше Е-майл"> </div> <div class="input-group input-group-lg col-md-6"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Ваше Е-майл"> </div> <div class="input-group input-group-sm col-md-6"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Ваше Е-майл"> </div> </div> <div class="row"> <div class="input-group"> <input type="text" class="form-control" placeholder="Ваше Е-майл"> <span class="input-group-addon">@</span> </div> <div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="Ваше Е-майл"> <span class="input-group-addon">@</span> </div> <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="Ваше Е-майл"> <span class="input-group-addon">@</span> </div> </div>
Дополнение флажками и переключателями
Дополняйте поля ввода флажками и переключателями type="checkbox" и type="radio" как альтернативу вводимому тексту.
<div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> </div> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div> </div> </div>
Дополнение кнопками
Используйте кнопки в качестве дополнения полей type="input-group-btn" и type="button".
<div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">ЖМИ</button> </span> <input type="text" class="form-control"> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">ЖМИ</button> </span> </div> </div> </div>
Дополнение выпадающим списком
Дополните поля ввода выпадающим списком, для возможности использования альтернативных способов ввода.
<div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Список <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li class="divider"></li> <li><a href="#">Отдельный пункт</a></li> </ul> </div> <input type="text" class="form-control"> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Список <span class="caret"></span></button> <ul class="dropdown-menu pull-right"> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li class="divider"></li> <li><a href="#">Отдельный пункт</a></li> </ul> </div> </div> </div> </div>
Управление формами
Для формирования обычной формы для отдельного позиционирования используется тег <form>, для онтологического определения формы используйте в комплекте с атрибутом role="form".
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Е-майл</label>
<input type="email" class="form-control" placeholder="Ваш Е-майл" disabled>
</div>
<div class="form-group">
<label>Пароль</label>
<input type="password" class="form-control" placeholder="Ваш пароль">
</div>
<div class="form-group">
<label>Ваш файл</label>
<input type="file">
<p class="help-block">Не более метра</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="nebot"> Я не бот
</label>
</div>
<button type="submit" class="btn btn-default">Отправить </button>
</form>
<script>
$(function (){
$('#nebot').click(function (){
$('input[type="email"]').removeAttr('disabled');
});
});
</script>
Встраиваемая форма и невидимые ярлыки
Для встраиваемой формы, имеющей ориентацию смещения к левому краю, используйте class="form-inline", если Вы хотите чтобы скрин ридеры фиксировали ярлыки обозначений полей ввода, но при этом они были бы не доступны для визуального просмотра, используйте class="sr-only".
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only">Е-майл</label> <input type="email" class="form-control" placeholder="Ваш Е-майл"> </div> <div class="form-group"> <label class="sr-only">Пароль</label> <input type="password" class="form-control" placeholder="Ваш пароль"> </div> <button type="submit" class="btn btn-default">Войти</button> </form>
Горизонтальная форма
Для встраиваемой формы, имеющей ориентацию смещения к левому краю, используйте class="form-inline", если Вы хотите чтобы скрин ридеры фиксировали ярлыки обозначений полей ввода, но при этом они были бы не доступны для визуального просмотра, используйте class="sr-only".
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-2 control-label">Е-майл</label> <div class="col-md-10"> <input type="email" class="form-control" placeholder="Ваш Е-майл"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">Пароль</label> <div class="col-md-10"> <input type="password" class="form-control" placeholder="Ваш пароль"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <div class="checkbox"> <label> <input type="checkbox"> Запомнить </label> </div> </div> </div> <div class="form-group"> <div class="col-md-2 col-md-offset-10"> <button type="submit" class="btn btn-default">Войти</button> </div> </div> </form>
Статическое дополнение ярлыкам форм
Для добавления ярлыкам горизонтальных форм статического дополнения применяйте class="form-control-static", для тега <p>.
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-md-2 control-label">Е-майл</label> <div class="col-md-6"> <p class="form-control-static">e-mail@yandex.ru</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-md-2 control-label">Пароль</label> <div class="col-md-6"> <input type="password" class="form-control" id="inputPassword" placeholder="Ваш пароль"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-default">Войти</button> </div> </div> </form>
Видимость и скрытность элементов форм
Используйте служебные классы скрытности и видимости для различных разрешений устройств. Ниже предоставлена таблица, показывающая определение классами размеры дисплеев и мониторов. Селекторы могут быть применены как к отдельным элементам форм и полей, так и целиком к форме.
| class="" | Устройства (<768px) | Устройства (≥768px) | Устройства (≥992px) | Устройства (≥1200px) |
|---|---|---|---|---|
.visible-xs |
Видно | Скрыто | Скрыто | Скрыто |
.visible-sm |
Скрыто | Видно | Скрыто | Скрыто |
.visible-md |
Скрыто | Скрыто | Видно | Скрыто |
.visible-lg |
Скрыто | Скрыто | Скрыто | Видно |
.hidden-xs |
Скрыто | Видно | Видно | Видно |
.hidden-sm |
Видно | Скрыто | Видно | Видно |
.hidden-md |
Видно | Видно | Скрыто | Видно |
.hidden-lg |
Видно | Видно | Видно | Скрыто |
Видимость форм при печати
Определите при необходимости видимость форм, или их элементам видимость для печатающих устройств, путём применения селекторов описанных в таблице ниже.
| class="" | В браузере | При печати |
|---|---|---|
.visible-print |
Скрыто | Видно |
.hidden-print |
Видно | Скрыто |
Проверьте себя
Проверьте свои знания в использовании форм и полей фреймворка bootstrap 3, вносите изменения в демо поле и получайте результат в реальном виде. Если окно результата не будет закрыто, новые данные введённые Вами в редактор обновятся.