Создаем форму обратной связи на bootstrap 3. Три вида форм и модальное окно для блога

Доброго времени суток, мои верные читатели и гости сайта. В сегодняшней публикации мы поговорим о знакомых вам формах регистрации, заказа товаров, входа на сайт и других. Все это в общем называется в Bootstrap 3 форма обратной связи. Эту штуку действительно полезно знать и уметь пользоваться.

Поэтому после прочтения статьи вы будете уметь создавать три вида простых форм, научитесь их настраивать, ознакомитесь со встроенными типами полей и с модальными окнами, а также сможете закрепить полученный теоретический материал на практике. Ну что ж, давайте приступать к обучению!

Формы. Какие они бывают?

Фреймворк Bootstrap поддерживает три вида форм, которые отличаются друг от друга выравниванием полей ввода данных. К ним относятся вертикальная, горизонтальная и встроенная.

Все они могут использовать встроенные типы текстовых полей, в которые входят: text, date, email, search, color, time и т.д. С их помощью осуществляется валидация введенной информации и при некорректном ее написании пользователю выводится сообщение с указанием на ошибки.

А теперь давайте подробнее разберем каждый тип форм.

Vertical Forms

По умолчанию в фреймворке выбраны вертикальные типы форм, так как их чаще всего можно встретить на различных веб-сайтах. В этом случае вначале расположено название поля, а ниже само текстовое поле ввода или другие элементы ввода информации.

В качестве примера я создал базовую форму с проверкой полей ввода при помощи встроенных типов.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример стандартной формы</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Вертикальная форма</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Введите email">
    </div>
    <div class="form-group">
      <label for="pwd">Пароль:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Введите пароль">
    </div>
<div class="form-group">
      <label for="dat">Дата рождения:</label>
        <input type="date" class="form-control" id="dat" placeholder="Введите дату рождения">
    </div>
<div class="form-group">
      <label for="txt">Имя Фамилия:</label>
        <input type="text" class="form-control" id="txt" placeholder="Введите имя и фамилию">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Запомнить меня</label>
       <button type="submit" class="btn btn-default" style="float: right">Отправить</button>
    </div>
  </form>
</div>
</body>
</html>

Inline Forms

В окнах встроенного типа все элементы расположены в одну линию (если это позволяет размер экрана). При этом объекты выравниваются по левому краю, а подписи окон и других видов элементов ввода персональной информации располагаются практически без отступов друг от друга.

Для того чтобы создать такой вид окна обратной связи, нужно добавить в код класс .form-inline. Поэтому для предыдущего примера измените строки заголовка <form> на:

<h2>Встроенная форма</h2>

<form class="form-inline">

Horizontal Forms

Текущий вид форм несколько отличается от двух предыдущих, во-первых, количеством элементов разметки, а во-вторых, презентацией формы.

Так, вам потребуется прописать класс .form-horizontal в теге <form> и после к каждому элементу <label> добавить класс .control-label. И это еще не все. Для реализации horizontal forms вам потребуется из своей памяти достать уже выученный вами материал из прошлых публикаций, касающийся верстки сеток фреймворка.

В прикрепленном выше примере я выделил 2 колонки под наименования полей, а 10 колонок – под само поле ввода.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример стандартной формы</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Горизонтальная форма</h2>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
 
      <input type="email" class="form-control" id="email" placeholder="Введите email">
    </div>
 </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Пароль:</label>
<div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Введите пароль">
    </div>
 </div>
<div class="form-group">
      <label class="control-label col-sm-2" for="dat">Дата рождения:</label>
<div class="col-sm-10">
        <input type="date" class="form-control" id="dat" placeholder="Введите дату рождения">
    </div>
</div>
<div class="form-group">
      <label class="control-label col-sm-2" for="txt">Имя Фамилия:</label>
<div class="col-sm-10">
        <input type="text" class="form-control" id="txt" placeholder="Введите имя и фамилию">
    </div>
 </div>
<div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label><input type="checkbox"> Запомнить меня</label>
       <button type="submit" class="btn btn-default" style="float: right">Отправить</button>
    </div>
</div>
</div>
 
  </form>
</div>
 
</body>
</html>

Ну а для чего же тогда модальные окна?

Для начала стоит сказать, что в Bootstrap есть такой плагин, как Modal plugin. Он как раз и отвечает за описываемый инструмент, который появляется при нажатии на кнопку. В модальном окне обычно выводится некая дополнительная информация или сообщение о произведенных действиях.

К примеру, после отправки формы регистрации (после нажатия на кнопку «Отправить») пользователю выводится сообщение «Вы успешно зарегистрированы».

Для того чтобы создать модальное окно, вам нужно реализовать программный код, который условно можно разделить на 3 части:

Написание триггера.
При реализации кнопки в теге <button> нужно дописать

data-toggle="modal" data-target="#myModal"
Создание оболочки «Modal».
Для этого в блоке необходимо установить идентификатор с тем же именем, что и в data-target. Здесь же нужно добавить класс .modal и прописать роль: role="dialog".

Далее важно создать вложенный блок с указанием класса

class="modal-dialog"
Заполнение модального окна контентом.
И теперь мы перешли к последнему этапу. Создайте

<div class="modal-content">

и в него вносите текст сообщения. Обязательно реализуйте кнопку «Закрыть».

Закрепите теоретический материал разбором кода примера, прикрепленного ниже.

<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Modal">Открыть модальное окно</button>
 
  <div class="modal fade" id="Modal" role="dialog">
    <div class="modal-dialog">
 
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Внимание!</h4>
        </div>
        <div class="modal-body">
          <p>Здесь написан некий важный текстовый контент!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        </div>
      </div>
 
    </div>
  </div>
 
</div>

Если вы узнали что-то интересное и новое для себя, то обязательно подписывайтесь на обновления моего блога и не забывайте рассказывать о нем друзьям. До скорых встреч. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1051 раз