В этой статье вы узнаете, как стилизовать элементы формы с помощью компонента формы Bootstrap и как использовать систему сетки для выравнивания этих элементов. Также мы увидим горизонтальные и встроенные формы в действии, а также обсудим проверку формы.
Я до сих пор помню (не очень хорошие) старые времена, когда нам приходилось кодировать все стили для веб-сайтов вручную. Было очень мало надежных CSS-решений, и создание сложных пользовательских интерфейсов раньше было огромной болью. Это было похоже на тайные знания, которыми разработчики делились друг с другом: они рассказывали истории о том, как сделать округлые круги, как выделить сфокусированные элементы или создать градиентный фон … Я действительно не скучаю по тем дням. К счастью, есть много новых технологий, которые помогают нам ускорить процесс разработки веб-приложений. Одна из таких технологий — Bootstrap , и сегодня мы обсудим один из наиболее часто используемых компонентов: формы .
Существует множество предопределенных стилей, которые можно применять к формам, и с их помощью вы можете создавать модные интерфейсы без особых усилий.
Начиная
Если вы хотите следовать, создайте следующий шаблон HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html> Мы загружаем стили Bootstrap и некоторые сценарии, которые потребуются в одном из примеров. Это оно! Вся разметка должна быть размещена внутри блока container который выступает в качестве основного элемента для нашей страницы.
Мы можем перейти к следующему разделу и приступить к созданию нашей первой формы.
Создание простой формы
Предположим, мы создаем регистрационную форму для нашего нового блестящего сайта. Наша форма должна содержать, как минимум, поля для адреса электронной почты и пароля:
<div class="container"> <p class="h1">Register</p> <form> <label for="email">Email address</label> <input type="email" id="email" placeholder="Enter email"> <label for="password">Password</label> <input type="password" id="password" placeholder="Password"> </form> </div>
Теперь давайте немного стилизуем эти поля. Прежде всего, label и input должны быть обернуты внутри элемента с помощью класса form-group компонента Bootstrap, который добавит небольшое верхнее поле. Кроме того, мы назначаем класс form-control для ввода, чтобы они выглядели лучше:
<form> <div class="form-group"> <label for="email">Email address</label> <input type="email" id="email" placeholder="Enter email" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" placeholder="Password" class="form-control"> </div> </form>
Обратите внимание, что Bootstrap автоматически перезагружает элементы формы, чтобы новые стили можно было легко применять.
Почему мы не показываем текст справки под формой электронной почты, чтобы сообщить пользователям, что мы не будем использовать их данные каким-либо вредоносным способом? В Bootstrap 3 текст справки помечается классом help-block , но в последнем выпуске платформы используется класс с именем form-text . Давайте разместим его прямо под input (внутри группы form-group ). Кроме того, давайте сделаем текст более тонким, применив text-muted класс компонента формы Bootstrap:
<div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"> <!-- #1 --> <small id="emailHelp" class="form-text text-muted"> <!-- #2 --> For authentication purposes only. We will never share your email with anyone! </small> </div>
Обратите внимание, как мы добавили атрибут aria-describedby описаныby (точка # 1) для ввода, чтобы объяснить, что это поле описывается нашим блоком справки (# 2).
Почему бы нам не сделать наши два поля немного больше, чтобы подчеркнуть их важность? Размер входных данных можно легко определить с помощью классов form-control-lg и form-control-sm компонента Bootstrap:
<div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control form-control-lg" id="email" aria-describedby="emailHelp" placeholder="Enter email"> <!-- #1 --> <small id="emailHelp" class="form-text text-muted"> For authentication purposes only. We will never share your email with anyone! </small> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control form-control-lg" id="password" placeholder="Password"> <!-- #2 --> </div>
Вот результат:
Форма выглядит очень четкой, а выбранный в данный момент ввод получает красивую синюю рамку. Здорово!
Элементы формы начальной загрузки, доступные только для чтения
Предположим, что сейчас мы хотели бы представить несколько тарифных планов для наших пользователей, но на данный момент доступен только «Базовый» план. Давайте добавим компонент формы Bootstrap только для чтения, стилизованный под простой текст . Это так же просто, как назначить form-control-plaintext :
<div class="form-group"> <label for="pricingPlan">Pricing plan</label> <input type="text" readonly class="form-control-plaintext" id="pricingPlan" value="Basic" aria-describedby="pricingPlanHelp"> <!-- #1 --> <small id="pricingPlanHelp" class="form-text text-muted"> Basic is the only plan so far, but we'll introduce more soon! </small> </div>
Вот результат:
Другие типы ввода, поддерживаемые компонентом формы начальной загрузки
Bootstrap поддерживает стилизацию для входов всех типов. Например, мы можем выбрать раскрывающийся список, чтобы пользователи могли выбирать свою роль:
<div class="form-group"> <label for="role">Your role</label> <select class="form-control" id="role"> <option>Developer</option> <option>Designer</option> <option>Manager</option> </select> </div>
Еще раз, мы просто оборачиваем все внутри контейнера классом form-group формы компонента Bootstrap и назначаем класс управления form-control выпадающему списку.
Как насчет textarea ? Мы просто следуем тому же принципу:
<div class="form-group"> <label for="comments">Comments (optional)</label> <textarea class="form-control" id="comments" rows="3"></textarea> </div>
Контроль загрузки файлов? Здесь тоже нет проблем:
<div class="form-group"> <label for="photo">Your photo</label> <input type="file" class="form-control-file" id="photo"> </div>
Флажки? Легко! Единственное, что нужно помнить, это то, что флажки и радио должны быть заключены в элемент с классом form-check , а не form-group . Этот класс добавляет некоторые дополнительные отступы, чтобы эти элементы выглядели лучше. Кроме того, мы назначаем form-check-input (# 1) для флажка и form-check-label (# 2) для метки, чтобы они были правильно выровнены:
<div class="form-check"> <input class="form-check-input" type="checkbox" value="1" id="userAgreement"> <!-- #1 --> <label class="form-check-label" for="userAgreement"> <!-- #2 --> I accept <a href="#">user agreement</a> </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="1" id="newsletter"> <label class="form-check-label" for="newsletter"> I'd like to receive newsletters </label> </div>
Давайте перезагрузим страницу и посмотрим на результат:
Выглядит довольно неплохо для страницы, на которой вообще нет пользовательских стилей.
Кнопки
Далее мы добавим кнопку « Отправить» и « Назад» в нижней части формы. Кнопки также могут быть оформлены с помощью Bootstrap: есть множество доступных цветов , размеров и состояний на выбор.
Интересно, что предопределенные классы не работают только с кнопками. Например, ссылка может выступать в качестве кнопки и может быть стилизована как таковая с использованием тех же классов. По крайней мере, элементу должен быть присвоен класс btn :
<!-- other form elements go here... --> <div class="mt-3"> <button type="submit" class="btn">Register!</button> <a href="#" class="btn">Back</a> </div>
mt-3 устанавливает небольшое верхнее поле для наших кнопок. Регистр! Кнопка, очевидно, является главной звездой, поэтому мы будем отмечать ее как основную и увеличивать ее. Ссылка « Назад» не обязательно должна привлекать все внимание, поэтому мы будем стилизовать ее как ссылку кнопки:
<div class="mt-3"> <button type="submit" class="btn btn-primary btn-lg">Register!</button> <a href="#" class="btn btn-link">Back</a> </div>
Теперь основная кнопка визуально выделяется благодаря синему фону:
Если вам не нравится этот фон, кнопка также может быть стилизована, как описано с помощью btn-outline-* :
<button type="submit" class="btn btn-outline-primary btn-lg">Register!</button>
Входные группы
Еще одна интересная особенность Bootstrap — это группы ввода . Допустим, мы хотим позволить пользователям выбирать URL своего уникального профиля в виде http://SUBDOMAIN.PROFILE.example.com , где:
-
SUBDOMAINлибоmy.private.илиown. -
PROFILEопределяется пользователем.
Таким образом, URL может быть http://my.superpage.example.com или http://private.dashboard.example.com . Конечно, мы можем предоставить базовый текстовый ввод и сказать что-то вроде «Введите свое уникальное имя профиля», но пользователь может не понимать, что происходит. Вместо этого мы хотим предложить наглядный пример того, как будет использоваться это имя профиля.
Для этого мы предоставим дополнительную помощь для ввода текста следующим образом:
<div class="form-group"> <label for="profileUrl">Your profile URL</label> <div class="input-group mb-3"> <!-- #1 --> <div class="input-group-prepend"> <!-- #2 --> <span class="input-group-text">http://</span> <!-- #3 --> <button class="btn btn-outline-secondary dropdown-toggle"> <!-- #4 --> type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">my.</button> <div class="dropdown-menu"> <!-- #5 --> <a class="dropdown-item" href="#">private.</a> <a class="dropdown-item" href="#">own.</a> </div> </div> <input type="text" id="profileUrl" class="form-control"> <div class="input-group-append"> <!-- #6 --> <span class="input-group-text">.example.com</span> </div> </div> </div>
Давайте пройдемся по коду выше, шаг за шагом:
- & # 1. Здесь открывается наша группа ввода. Каждая группа ввода содержит вход и одну или несколько «надстроек» для размещения до или после этого ввода.
- & # 2. Мы добавляем два элемента к нашему текстовому вводу.
- & # 3. Это будет отображать надстройку с текстом
http://. - & # 4. Здесь все становится немного сложнее. Мы отображаем кнопку с текстом «мой» (который является нашим поддоменом). При нажатии этой кнопки отображается раскрывающийся список с двумя другими параметрами: «личный» и «собственный». Не забывайте, что в раскрывающемся списке используется JavaScript, поэтому убедитесь, что вы подключили все необходимые сценарии, как описано в начале этой статьи.
- & # 5. Это собственно выпадающее меню, изначально скрытое. Это может быть далее стилизовано как объяснено в документах .
- & Num; 6. Этот
divс классомinput-group-appendпредставляет последнюю надстройку, которая должна быть добавлена к текстовому вводу.
Уф! В результате мы получили следующую часть пользовательского интерфейса:
Выглядит довольно красиво, и, что более важно, наши пользователи сразу поймут, для чего этот вклад!
Это завершает первый раздел этой статьи. Вы можете найти окончательный результат на CodePen:
Формы с сеткой
Все дело в строках и столбцах
Другая довольно распространенная задача — сделать формы более компактными, разместив несколько входов в одной строке. Это можно сделать с помощью системы сетки формы компонента Bootstrap, которая опирается на общую сетку Bootstrap.
Чтобы разместить несколько входов и меток в одной строке, наши группы форм должны быть обернуты либо row компонента формы Bootstrap, либо row form-row (единственное отличие состоит в том, что последний класс добавляет меньшие желоба между столбцами). Затем мы присваиваем класс col-{viewport}-{columns} самим группам форм . Например, вот как мы можем изменить первые три группы из формы регистрации, созданной в предыдущем разделе:
<div class="form-row"> <!-- #1 --> <div class="form-group col-sm-4"> <!-- #2 --> <label for="email">Email address</label> <input type="email" class="form-control form-control-lg" id="email" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted"> For authentication purposes only. We will never share your email with anyone! </small> </div> <div class="form-group col-sm-4"> <label for="password">Password</label> <input type="password" class="form-control form-control-lg" id="password" placeholder="Password"> </div> <div class="form-group col-sm-4"> <label for="pricingPlan">Pricing plan</label> <input type="text" readonly class="form-control-plaintext" id="pricingPlan" value="Basic" aria-describedby="pricingPlanHelp"> <small id="pricingPlanHelp" class="form-text text-muted"> Basic is the only plan so far, but we'll introduce more soon! </small> </div> </div>
Посмотрите на результат:
Для очень маленьких видовых экранов эти группы будут накладываться друг на друга.
Затем мы переходим к тарифному плану и URL профиля. Последняя группа, вероятно, требует довольно много места, поэтому давайте использовать точку останова md (medium viewport) в этом случае:
<div class="form-row"> <!-- #1 --> <div class="form-group col-md-4"> <!-- #2 --> <label for="role">Your role</label> <select class="form-control" id="role"> <option>Developer</option> <option>Designer</option> <option>Manager</option> </select> </div> <div class="form-group col-md-8"> <!-- #3 --> <label for="profileUrl">Your profile URL</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">http://</span> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">my.</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">private.</a> <a class="dropdown-item" href="#">own.</a> </div> </div> <input type="text" id="profileUrl" class="form-control"> <div class="input-group-append"> <span class="input-group-text">.example.com</span> </div> </div> </div> </div>
Наш второй ряд:
Все идет нормально. Далее мы разместим текстовую область Комментарии, элемент управления файлами фотографий и оба флажка в одной строке для средних и больших областей просмотра:
<div class="form-row"> <!-- #1 --> <div class="form-group col-md-4"> <!-- #2 --> <label for="comments">Comments (optional)</label> <textarea class="form-control" id="comments" rows="3"></textarea> </div> <div class="form-group col-md-4"> <!-- #3 --> <label for="photo">Your photo</label> <input type="file" class="form-control-file" id="photo"> </div> <div class="col-md-4"> <!-- #4 --> <div class="form-check"> <input class="form-check-input" type="checkbox" value="1" id="userAgreement"> <label class="form-check-label" for="userAgreement"> I accept <a href="#">user agreement</a> </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="1" id="newsletter"> <label class="form-check-label" for="newsletter"> I'd like to receive newsletters </label> </div> </div> </div>
Обратите внимание, что мы поместили оба флажка в один столбец (# 4) для удобного макета.
Наконец, давайте стилизовать кнопки. Я думаю, что они могут занимать один столбец:
<div class="form-row mt-3"> <div class="col-xs-12"> <!-- #1 --> <button type="submit" class="btn btn-outline-primary btn-lg">Register!</button> <a href="#" class="btn btn-link">Back</a> </div> </div>
Вот так выглядит наша форма:
Вот окончательный результат на CodePen:
Горизонтальные формы
Систему сетки также можно использовать для создания горизонтальных форм, то есть форм, которые имеют метку и элементы ввода в одной строке. Для достижения этого результата компонент формы Bootstrap предлагает класс col-form-label для добавления к меткам.
Давайте создадим небольшую демонстрацию, представляющую горизонтальную форму:
<div class="container"> <p class="h1">Register</p> <form class="mt-3"> <div class="form-group row"> <!-- #1 --> <label for="email" class="col-sm-2 col-form-label">Email address</label> <!-- #2 --> <div class="col-sm-10"> <!-- #3 --> <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted"> For authentication purposes only. We will never share your email with anyone! </small> </div> </div> <div class="form-group row"> <label for="password" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password"> </div> </div> <div class="form-group row mt-3"> <div class="col-10 offset-2"> <!-- #4 --> <button type="submit" class="btn btn-outline-primary">Register!</button> <a href="#" class="btn btn-link">Back</a> </div> </div> </form> </div>
Основные вещи, на которые стоит обратить внимание:
- & # 1. Каждой группе форм назначается класс
row - & # 2. Ярлыкам присваивается класс
col-form-label - & # 3. Входы (и сопровождающие блоки помощи) заключены в отдельные элементы
div - & # 4. Для кнопок мы дополнительно предоставляем класс
offset-2, так что они перемещаются вправо и выровнены по вертикали со входами.
Вот как выглядит форма:
А как насчет флажков? Ну, мы также можем применить некоторое смещение и выровнять их по вертикали с помощью кнопок и входов:
<div class="form-group row"> <!-- #1 --> <div class="col-10 offset-2"> <!-- #2 --> <div class="form-check"> <input class="form-check-input" type="checkbox" value="1" id="userAgreement"> <label class="form-check-label" for="userAgreement"> I accept <a href="#">user agreement</a> </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="1" id="newsletter"> <label class="form-check-label" for="newsletter"> I'd like to receive newsletters </label> </div> </div> </div>
И это наш окончательный вариант формы:
Все элементы имеют хороший интервал, поэтому визуальный интерфейс не загроможден. Исходный код для этого примера также можно найти на CodePen.
Встроенные формы
Встроенные формы также очень распространены в наши дни. Такие формы могут использоваться для отображения поиска или входа в функции. Давайте посмотрим на них в действии, создав форму «Подписаться на рассылку»:
<div class="container"> <p class="h1">Subscribe to our newsletter</p> <form class="form-inline"> <!-- #1 -- > <label class="sr-only" for="email">Name</label> <!-- #2 -- > <input type="text" class="form-control mb-2 mr-sm-2 form-control-sm" id="email" placeholder="Email"> <!-- #3 -- > <div class="form-check mb-2 mr-sm-2"> <!-- #4 -- > <input class="form-check-input" type="checkbox" id="partners" value="1"> <label class="form-check-label" for="partners"> Receive news from our partners </label> </div> <button type="submit" class="btn btn-primary mb-2 btn-sm">Subscribe</button> <!-- #5 -- > </form> </div>
Основные вещи, на которые стоит обратить внимание:
- & # 1. Форме должен быть присвоен
form-inlineкласс компонентаform-inlineBootstrap. Тем не менее, обратите внимание, что элементы формы будут отображаться встроенными только для областей просмотра размером более 575 пикселей. Для небольших экранов они будут сложены. - & # 2. Мы скрываем ярлык и отображаем его только для программ чтения с экрана.
- & # 3. Вход имеет правое поле для маленьких и больших областей просмотра с помощью класса
mr-sm-2. Мы не требуем этого поля для очень маленьких экранов, потому что элементы будут сложены, как описано выше. Кроме того, ввод уменьшается с помощьюform-control-sm. - & # 4. Флажок также имеет правое поле.
- & # 5. Кнопка также уменьшена с использованием класса
btn-sm.
Вот результат:
Исходный код также можно найти на CodePen:
Проверка формы
Еще одна очень важная вещь — проверка ввода пользователя. Как правило, мы никогда не должны слепо доверять данным, представленным пользователями, поскольку они могут ошибаться и предоставлять неверные значения. Это, в свою очередь, может привести к неправильной работе веб-приложения или, что еще хуже. Поэтому мы всегда должны выполнять проверки.
Первая линия защиты — проверка на стороне клиента . Конечно, мы могли бы положиться на предопределенные правила проверки браузера (например, современные браузеры проверяют формат электронной почты, введенный в поле с соответствующим типом), но это обычно не рекомендуется Bootstrap. Вместо этого мы можем использовать пользовательские стили валидации компонента формы Bootstrap.
Чтобы воспользоваться этими стилями, мы должны отключить механизм проверки браузера по умолчанию, добавив в novalidate атрибут novalidate . Кроме того, мы должны добавить класс needs-validation :
<div class="container"> <p class="h1">Register</p> <form class="needs-validation" novalidate> <!-- #1 --> </form> </div>
Далее мы просто отображаем все необходимые поля как обычно:
<form class="needs-validation" novalidate> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Email" required> <!-- #1 --> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" required minlength="6"> <!-- #2 --> </div> <div class="form-group mt-3"> <button class="btn btn-primary" type="submit">Register!</button> </div> </form>
Обратите внимание, что мы предоставили атрибут require для обоих входов (# 1, # 2), а также minlength для поля пароля (# 2). Это гарантирует, что пользователи не отправят пустую форму.
Что интересно, каждый вход может также содержать два необязательных блока справки компонента формы Bootstrap: valid-feedback и invalid-feedback . Первый отображается, когда данные верны, тогда как последний отображается только в том случае, если пользователи допустили ошибку. Давайте добавим эти блоки сейчас:
<div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Email" required> <div class="valid-feedback"> <!-- #1 --> Looks good! </div> <div class="invalid-feedback"> <!-- #2 --> The email is required! </div> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" required minlength="6"> <div class="valid-feedback"> Great! </div> <div class="invalid-feedback"> <!-- #3 --> The password must contain at least 6 characters! </div> </div>
И наконец, нам нужен JavaScript, чтобы выполнить фактическую проверку и предотвратить отправку формы в случае обнаружения ошибки:
<!-- your form goes here... --> <script> (function() { window.addEventListener('load', function() { var forms = document.getElementsByClassName('needs-validation'); var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script>
Здесь мы берем все формы, которые требуют проверки, и проверяем правильность введенных данных. Если это не так, мы предотвращаем процесс представления. Кроме того, обратите внимание, что мы должны добавить к форме was-validated компонент компонента Bootstrap. Каждому дочернему полю также назначается псевдокласс :invalid или :valid . Эти классы добавляют зеленую или красную рамку вокруг ввода соответственно и отображают правильное сообщение обратной связи.
Вот результат:
На CodePen:
Вот как выглядит стиль, примененный к псевдоклассу :valid в инструментах разработчика браузера:
Наконец, обратите внимание, что компонент формы Bootstrap также поддерживает проверку на стороне сервера . Все, что нам нужно сделать, это пометить входные данные либо классами is-valid либо is-invalid . Блоки обратной связи также хорошо работают с этим типом проверки.
Вывод
В этой статье мы проделали довольно долгий путь по функциям компонента формы Bootstrap и обсудили различные типы форм, которые поставляются в комплекте с последней версией Bootstrap. Мы видели, как стилизовать различные элементы формы, как создавать формы на основе системы сетки Bootstrap, как создавать горизонтальные и встроенные формы. Кроме того, мы обсудили, как можно реализовать правила проверки на стороне клиента и как стилизовать допустимые и недействительные входные данные формы.
Я очень надеюсь, что к настоящему времени вы готовы применить все эти знания на практике и начать создавать свои собственные модные формы!
Для получения дополнительной информации, не стесняйтесь использовать раздел комментариев ниже.
Если вы создаете сайт с помощью Bootstrap, для которого требуется портал входа в систему, ознакомьтесь с нашим курсом « Создание портала входа в систему с помощью Bootstrap 4» , который поможет вам освоить карточки, формы, кнопки и сетки.