КатегорииBulmaУроки

CSS фреймворк Bulma Урок 2. — Создание формы входа

В этом уроке мы создадим полноценную формы входа (авторизации) с помощью Bulma. Она будет содержать два поля: электронная почта и пароль. Так же она будет от центрована по вертикале и горизонтали.

Шаблон

Чтобы страница входа работала правильно, мы должны следовать веб-стандарту HTML5:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Вход</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>

<body>
  <!-- Тут будет наш код -->
</body>

</html>

Хотя эта страница действительна с точки зрения стандарта, она еще ничего не показывает, поэтому давайте это исправим.
Bulma предоставляет класс hero: он создает большой внушительный баннер, который полезен для выделения чего-то конкретного (в данном случае формы входа). Этот класс поставляется с модификаторами, которые в сочетании с базовым классом позволяют нам выбрать альтернативный стиль. Итак давайте добавим в <body> следующий фрагмент:

  <section class="hero is-primary is-fullheight">
    <div class="hero-body">
      Войти
    </div>
  </section>

Как мы видим в дополнении к классу hero, используются два модификатора Bulma: is-primary и is-fullheight. Как мы узнали ранее, модификаторы «изменяют» элемент, к которому он прикреплен. В этом случае is-primary добавляет основной цвет по умолчанию (бирюзовый), а is-fullheight заставляет увеличить высоту до 100% высоты браузера.

Теперь мы можем наблюдать, что весь видимый экран бирюзовый, с надписью «Вход» по левой стороне. Класс hero-body обеспечивает вертикальное центрирование данного текста.
Совет: если вы не видите бирюзовую страницу, убедитесь, что вы подключили все библиотеки и что вы подключены к Интернету.

Макет по центру страницы

Перед созданием самой формы необходимо для начала настроить макет (layout).

Предположим, мы хотим, что бы наша форма была от центрована по горизонтали и вертикали, для этого нам понадобятся специальные классы:
• container (контейнер): гарантирует, что наша форма будет иметь ограниченную максимальную ширину.
• columns: контейнер для колоночной сетки.
• column: будет обеспечивать положение формы по центру горизонтали.
• box (коробка): имеет белый фон и тень по краям для выделение нашей формы на бирюзовом фоне.

  <section class="hero is-primary is-fullheight">
    <div class="hero-body">
      <div class="container">
        <div class="columns is-centered">
          <div class="column">
            <form class="box">
              Войти
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

Поскольку у нас есть только один столбец, он занимает 100% ширины.
Совет: попробуйте добавить второй столбец и обратите внимание, что каждый столбец теперь занимает 50% от горизонтального пространства.
Поскольку мы не хотим, чтобы форма было слишком широкой, давайте изменим размер данного столбца.

Изменяем размер колонки

К счастью, Bulma предоставляет модификаторы, которые позволяют центрировать столбцы и указывать разные размеры для разных экранов.
Для этого добавим следующие модификаторы в оболочку формы. Каждый служит определенной цели.
• is-5-tablet: ограничивает ширину 5/12 для планшета (от 769 пикселей)
• is-4-desktop: ограничивает ширину 4/12 столбцами для рабочего стола (от 1024 пикселей)
• is-3-widescreen: ограничивает ширину 3/12 столбцов для широкоэкранных мониторах (от 1216 пикселей)
Bulma изначально разработан для мобильных устройств, поэтому нам не нужно добавлять модификатор специально для них.
Добавим эти модификаторы в столбец:

<div class="column is-5-tablet is-4-desktop is-3-widescreen">
  <form class="box">
    Войти
  </form>
</div>

Измените размер своего браузера, чтобы увидеть изменения ширины нашей будущей формы в действии! Колонка занимает всю ширину, при 768 пикселей. Если увеличить ширину, она изменит размер в каждой точке останова для поддержания разумной ширины для любого экрана.
Теперь мы можем реализовать содержимое формы.

Реализуем форму

Форма входа будет состоять из четырех полей:
• поле ввода электронной почты
• поле ввода пароля
• флажок «Запомнить меня»
• кнопка «Войти»
Так же добавим подсказки и атрибут обязательности заполнения для некоторых полей, которые обязательны, чтобы показать пользователю, почему они не смогли войти.

Логотип

Чтобы пользователь понимал куда он пытается войти, давайте сначала добавим логотип.
Заменим текст «Войти» на наш логотип:

<form class="box">
  <div class="field has-text-centered">
    <img src="images/logo.png" width="167"
  </div>
</form>

Bulma предоставляет класс field (поле), который позволяет равномерно распределить поле на форме. Он также поставляется с вспомогательными классами, такими как has-text-centrated для центрирования текста и встроенных элементов.

Email

В Bulma есть пара полезных классов для форм:
• label (метка): класс для всех меток формы, который делает ее начертание жирным и добавляет отступ снизу.
• control: этот класс действует как обертка для поля ввода и позволит нам улучшить его с помощью иконок.
Давайте добавим следующий HTML:

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="Введите почту">
  </div>
</div>

Хотя мы указали тип поля email по принципам HTML5, давайте украсим поле иконкой электронной почты от Font Awesome, чтобы намекнуть на ожидаемый здесь контент.
Чтобы сделать это с помощью Bulma, мы должны сначала добавить модификатор has-icons-left в оболочку элемента управления. Этот модификатор, добавляет отступы слева, чтобы освободить место под иконку.

<div class="control has-icons-left">

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

<span class="icon is-small is-left">
  <i class="fa fa-envelope"></i>
</span>

• icon: класс Bulma, который задает поведение иконки.
• is-small: модификатор, делающий иконку маленькой. Вы также можете использовать модификатор is-large.
• is-left: выравнивает значок слева от ввода формы.

Соединяем все вместе:

<div class="control has-icons-left">
  <input class="input" type="email" placeholder="Введите почту" required>
  <span class="icon is-small is-left">
    <i class="fa fa-envelope"></i>
  </span>
</div>

Примечание: Даже если иконка загрузиться после страницы, макет не будет «прыгать», поскольку Bulma гарантирует, что пространство, определенное для иконки, является фиксированным.

Пароль

Поле ввода пароля очень похоже на поле электронной почты, поэтому мы можем просто скопировать предыдущее поле и измените несколько частей:
• Label теперь «Пароль»
• Тип ввода — password
• Подсказка ввода ***********
• Иконка fa-lock

<div class="field">
  <label class="label">Пароль</label>
  <div class="control has-icons-left">
    <input class="input" type="password" placeholder="********" required>
    <span class="icon is-small is-left">
      <i class="fa fa-lock"></i>
    </span>
  </div>
</div>

Флажок «Запомнить меня»

Давайте добавим флажок для функции «Запомнить меня». Элемент <label> позволяет увеличить зону щелчка флажка: текст «Запомнить меня» также станет интерактивным.
Здесь нам не нужен класс control, так как мы не будем используете иконки.

<div class="field">
  <label class="checkbox">
    <input type="checkbox"> Запомнить меня
  </label>
</div>

Кнопка входа

Чтобы закончить форму, нам нужна только кнопка отправки. В ее качестве можно использовать следующие элементы
• теги ссылки <a>
• теги кнопок <button>
• теги поля ввода <input type=»submit»>
Мы будем использовать элемент <button>, так как он наиболее гибкий и современный.

<div class="field">
  <button class="button is-success">
    Войти
  </button>
</div>

Вот что у нас получилось в итоге:

В следующем уроке мы займемся часть, которую видит пользователь после входа. Успехов!

Добавить комментарий

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