Bootstrap 4 предоставляет стили по умолчанию, которые применяются к большинству элементов управления формы. Он также предоставляет классы для определенных целей, которые мы подробнее рассмотрим ниже.
Базовая форма
Используйте класс Bootstrap .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы применить базовое оформление и ширину элемента в 100%.
Так же, оберните лэйблы (<label>)и элементы управления формы внутри тега <fieldset> с помощью класса Bootstrap .form-group, применяемого для выставления оптимального расстояния между элементами. В качестве альтернативы fieldset вы можете использовать <div> или другой блоковый элемент.
Пример простой формы в Bootstrap 4:
<form action=""> <fieldset class="form-group"> <label for="first_name">First Name</label> <input type="text" class="form-control" id="first_name"> </fieldset> <fieldset class="form-group"> <label for="last_name">Last Name</label> <input type="text" class="form-control" id="last_name"> </fieldset> <button type="submit" class="btn btn-primary">Submit</button> </form>
Горизонтальная форма
В предыдущем примере, элементы форм располагались вертикально (один под другим). Давайте рассмотрим пример, где элементы формы располагаются горизонтально.
Используйте класс Bootstrap .form-inline, чтобы элементы формы отображались как inline-block и выравнивались по левому краю. Чтобы добавить пробел между элементами, используйте утилиту spacer (например, mr-sm-2).
<form action="" class="form-inline"> <label class="mr-sm-2 mb-0" for="first_name">First Name</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name"> <label class="mr-sm-2 mb-0" for="last_name">Last Name</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name"> <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button> </form>
Скрытые метки (label)
В полях ввода всегда должны указываться метки, иначе люди с ограниченными возможностями столкнутся с проблемой при использовании вашей страницы.
Здесь мы используем .sr-only, чтобы скрыть метки. Мы также добавляем атрибут-заполнитель placeholder, чтобы подсказывать пользователю, что вводить в конкретное поле.
<form action="" class="form-inline"> <label class="mr-sm-2 mb-0 sr-only" for="first_name">First Name</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" placeholder="First name"> <label class="mr-sm-2 mb-0 sr-only" for="last_name">Last Name</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" placeholder="Last name"> <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button> </form>
Горизонтальные метки (label)
Вы можете использовать сетку Bootstrap для расположения элементов форм и их меток (лэйблов) горизонтально. Просто укажите, сколько столбцов должен охватывать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждого столбца.
Вы также должны добавить класс .col-form-label к элементу <label>, чтобы расположить метку вертикально по середине, относительно элементов ввода текста.
<div class="container"> <form action=""> <div class="form-group row"> <label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label> <div class="col-xs-9"> <input type="text" class="form-control" id="first_name"> </div> </div> <div class="form-group row"> <label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label> <div class="col-xs-9"> <input type="text" class="form-control" id="last_name"> </div> </div> <div class="form-group row"> <div class="offset-xs-3 col-xs-9"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div>
Вы можете заменить .row на .form-row чтобы уменьшить отступы между столбцами и сделать форму более компактной.
Размеры элементов форм
Вы можете использовать .form-control-lg и .form-control-sm в Bootstrap 4 для увеличения или уменьшения размера элемента управления вводом (input, select).
<div class="form-group"> <input type="text" class="form-control form-control-sm" placeholder="Малый размер"> </div> <div class="form-group"> <input type="text" class="form-control" id="last_name" placeholder="Размер по умолчанию"> </div> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Большой размер"> </div>
Размер элементов label
Вы можете добавить .col-form-label-sm и .col-form-label-lg к вашим меткам, чтобы размер метки соответствовал элементу управления формы.
<form> <div class="form-group row"> <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Малый размер</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Малый размер"> </div> </div> <div class="form-group row"> <label for="colFormLabel" class="col-sm-2 col-form-label">Размер по умолчанию</label> <div class="col-sm-10"> <input type="email" class="form-control" id="colFormLabel" placeholder="Размер по умолчанию"> </div> </div> <div class="form-group row"> <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Большой размер</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="Большой размер"> </div> </div> </form>
Текст подсказки для элементов формы
Bootstrap 4 предоставляет класс .form-text, который можно использовать для обозначения текста подсказки. Вы можете комбинировать этот класс с служебными классами, такими как .text-muted или .text-danger.
Вам также следует использовать атрибут .aria-descriptionby, чтобы связать текст справки с элементом управления формы. Это гарантирует, что программы чтения с экрана смогут продиктовать текст подсказки, когда пользователь сосредоточится на элементе управления формы.
<label for="accountId">Поле формы</label> <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId"> <span id="helpAccountId" class="form-text text-muted">Текст подсказки или пояснения.</span>
Оставить комментарий