RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

HTML

CSS

PHP

WordPress

Bootstrap

Автор

Главная » Основы Bootstrap 3 » Форма. Основы bootstrap 3 для начинающих. Урок №14

20.09.2016


16:02


10608


2


Форма. Основы bootstrap 3 для начинающих. Урок №14

Форма. Основы bootstrap 3 для начинающих. Урок №14

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

Все виды форм для веб-страницы я описывать не буду, так как все это вы сможете найти в статье «HTML формы». В Bootstrap 3 все формы создаются идентично HTML, разница лишь в том, что в бутстрапе есть готовые CSS стили, которые помогут быстро и красиво визуально оформить формы и сделать их адаптивными.

Простой пример формы

Вот так выглядит код простой формы.

<form>
  <div class="form-group">
    <label for="exampleInputEmail">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Ваш email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Я не бот
    </label>
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

В форме используем класс «form-group» для  интервала между другими полями форм:

<div class="form-group">
<!-- форма №1 -->
</div>
<div class="form-group">
<!-- форма №2 -->
</div>

Класс «form-control» - задает ширину для поля 100% (поле адаптивное), закругление углов, отступы внутри поля.

<input type="email" class="form-control" id="exampleInputEmail" placeholder="Ваш email">

placeholder –  подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value)

placeholder="Ваш email">

Схема:

Форма. Основы bootstrap 3 для начинающих. Урок №14

В результате вы увидите вот такую форму:




Горизонтальная форма

Чтобы выровнять каждое поле с текстом по горизонтали, добавляем для тега <form> класс «form-horizontal», для тега <label> добавить класс «form-control». Класс «col-xs-2», «col-xs-10» и «col-xs-offset-2» это размер (читайте тут):

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="col-xs-2 control-label">Адрес email:</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Введите email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-xs-2 control-label">Пароль:</label>
    <div class="col-xs-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label><input type="checkbox"> Запомнить</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-default">Войти</button>
    </div>
  </div>
</form>

Схема:

Форма. Основы bootstrap 3 для начинающих. Урок №14

Результат:

Форма в одну строку

Чтобы расположить элементы формы в одну строку, необходимо добавить Bootstrap класс «form-inline» к тегу <form>.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputEmail">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Ваш email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">Пароль</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Я не бот
    </label>
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

Результат:




Или вот так:

<form class="form-inline">
  <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Ваш email">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
          <input type="checkbox"> Я не бот
    </label>
  </div>
  <button type="submit" class="btn btn-default">Отправить</button>
</form>

Удалил строки :

<label for="exampleInputEmail">Email</label>

<label for="exampleInputPassword">Пароль</label>

Результат:


Создание статических элементов управления формы

Если вам нужно разместить в горизонтальной форме обычный текст рядом с элементом <label>, то используйте класс «form-control-static» для тега <p>:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="control-label col-xs-2">Email</label>
    <div class="col-xs-10">
      <p class="form-control-static">admin@stepkinblog.ru</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label col-xs-2">Пароль</label>
    <div class="col-xs-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label><input type="checkbox"> Запомнить</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-primary">Войти</button>
    </div>
  </div>
</form>

Результат:

admin@stepkinblog.ru

Изменение высоты полей формы

Чтобы задать высоту полей формы, в Bootstrap есть класс «input-lg» и «input-sm» для тегов <input> и <select>.

<form>
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-lg" placeholder="Большой">
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control" placeholder="Средний">
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-sm" placeholder="Маленький">
    </div>
  </div>
</form>

Результат:

Изменение ширины полей формы

Ширину полей можно менять используя сетку Bootstrap. Я думаю, вы в курсе, что такое сетка в Bootstrap. Если нет,  тогда вам стоит почитать статью «Сетка в Bootstrap 3»:

<form>
  <div class="row">
    <div class="col-xs-3">
      <input type="text" class="form-control">
    </div>
    <div class="col-xs-9">
      <input type="text" class="form-control">
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-3">
      <textarea class="form-control"></textarea>
    </div>
    <div class="col-xs-9">
      <textarea class="form-control"></textarea>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-3">
      <select class="form-control">
        <option>Выбор</option>
      </select>
    </div>
    <div class="col-xs-9">
      <select class="form-control">
        <option>Выбор</option>
      </select>
    </div>
  </div>
</form>

Результат:

Иконки или знаки в поле формы.

Можно форму приукрасить, добавив, например, иконку или текст перед или после элемента <input> .
Текст или иконка размещается между  тегом <span> с классом «input-group-addon». Контейнер  <span> с классом «input-group-addon» можно размещать  перед или после тега <input>

Контейнер <span> с классом «input-group-addon»  нужно разместить внутри контейнера <div> с классом «input-group»:

<form>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Email пользователя">
  </div>
  <br />
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
  </div>
  <br />
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
  </div>
  <br />
  <div class="input-group">
    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
    <input type="text" class="form-control" placeholder="поиск по сайту">
    <span class="input-group-addon"><a href="#">ок</a></span>
  </div>
</form>

Это иконки Bootstrap. Все иконки можете найти тут.

<span class="glyphicon glyphicon-search"></span>

Результат:

@

.00

$.00

ок

Радиопереключатель или флажек в поле формы

Можно разместить в форму флажек или радеопереключатель:

<form>
    <div class="row">
        <div class="col-xs-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-xs-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="radio">
            </span>
            <input type="text" class="form-control">
          </div>
        </div>
      </div>
</form>

Результат:

Кнопка в поле формы
Также можно поместить кнопку перед или после поля формы. Кнопки нужно разместить внутри контейнера <span>  с классом «input-group-btn»:

<form>
  <div class="row">
    <div class="col-xs-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-xs-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>
</form>

Результат:

Кнопка с выпадающим меню в поле формы

Также можно создать кнопку с выпадающим меню:

<form>
  <div class="row">
    <div class="col-xs-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="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li class="divider"></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-xs-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="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li class="divider"></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</form>

Результат:

Группы кнопок, поделенных на сегменты

<form>
  <div class="row">
    <div class="col-xs-6">
      <div class="input-group">
        <div class="input-group-btn">
          <button tabindex="-1" class="btn btn-default" type="button">ОК</button>
          <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu"> 
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li class="divider"></li>
            <li><a href="#">Отдельная сслыка</a></li>
          </ul>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="col-xs-6">
      <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn">
          <button tabindex="-1" class="btn btn-default" type="button">ОК</button>
          <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu pull-right">
            <li><a href="#">Действие</a></li>
            <li><a href="#">Другое действие</a></li>
            <li class="divider"></li>
            <li><a href="#">Отдельная ссылка</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</form>

Результат:

Неактивное поле формы

Если вам нужно создать форму, где будет неактивное поле, добавьте атрибут «disabled» к полю <input>:

<form>
<input type="text" class="form-control" placeholder="Неактивный элемент" disabled="disabled">
</form>

Результат:


Поле формы только для чтения

Также можно создать поле формы только для чтения. Поле будет не активным для изменения.  Добавьте атрибут «readonly»  для тега <input>:

<form>
<input type="text" class="form-control" placeholder="Элемент только для чтения" readonly="readonly">
</form>

Результат:


Поясняющий текст

Чтобы создать поясняющий текст под полем, добавьте после тега <input> тег <span> с классом «help-block»:

<form>
<input type="text" class="form-control">
<span class="help-block">Блок справочного текста будет расположенный на новой строке.</span>
</form>

Результат:


Блок справочного текста будет расположенный на новой строке.

Стили состояний полей формы для проверки заполнения

Если вам нужно сообщить об ошибках или уведомлениях об успешном выполнении действий, в Bootstrap есть готовые стили для оформления. Чтобы воспользоваться стилями, добавьте один из классов «has-warning», «has-error» или «has-success» к элементу «form-group».

Значение классов «has-warning», «has-error» или «has-success»:

has-success / Успешный ввод
has-warning / Ввод с предупреждением
has-error / Ввод с оcшибкой

Пример:

<form>
  <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>
</form>

Результат:




А можно еще больше расширить возможности для состояний полей, добавив к полям соответствующие иконки.
Добавьте класс «has-feedback» к «form-group»  и класс «form-control-feedback» к соответствующей иконке glyphicon:

<form>
  <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>
</form>

На все иконки glyphicon я давал ссылку выше, либо поищите у меня на блоге.

Результат:







Вроде, все сказал. Теперь в  подарок от блогера Степана форма на Bootstrap :rose::

<h2>Анкета работника завода</h2>
<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-xs-3" for="lastName">Фамилия:</label>
    <div class="col-xs-9">
      <input type="text" class="form-control" id="lastName" placeholder="Введите фамилию">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3" for="firstName">Имя:</label>
    <div class="col-xs-9">
      <input type="text" class="form-control" id="firstName" placeholder="Введите имя">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3" for="fatherName">Отчество:</label>
    <div class="col-xs-9">
      <input type="text" class="form-control" id="fatherName" placeholder="Введите отчество">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3">Дата рождения:</label>
    <div class="col-xs-3">
<input type="date" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3" for="inputEmail">Email:</label>
    <div class="col-xs-9">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3" for="phoneNumber">Телефон:</label>
    <div class="col-xs-9">
      <input type="tel" class="form-control" id="phoneNumber" placeholder="Введите номер телефона">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3" for="postalAddress">Адрес:</label>
    <div class="col-xs-9">
      <textarea rows="3" class="form-control" id="postalAddress" placeholder="Введите адрес"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-3">Пол:</label>
    <div class="col-xs-2">
      <label class="radio-inline">
        <input type="radio" name="genderRadios" value="male"> Мужской
      </label>
    </div>
    <div class="col-xs-2">
      <label class="radio-inline">
        <input type="radio" name="genderRadios" value="female"> Женский
      </label>
    </div>
  </div> 
  <div class="form-group">
    <div class="col-xs-offset-3 col-xs-9">
      <label class="checkbox-inline">
        <input type="checkbox" value="agree">  Я согласен с <a href="#">условиями</a>.
      </label>
    </div>
  </div>
  <br />
  <div class="form-group">
    <div class="col-xs-offset-3 col-xs-9">
      <input type="submit" class="btn btn-primary" value="Регистрация">
      <input type="reset" class="btn btn-default" value="Очистить форму">
    </div>
  </div>
</form>

Результат:

Анкета работника завода

Всем спасибо! Жду вас на следующих уроках.



Случайные записи:

  1. Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18
  2. Тесты CSS онлайн. Основы CSS для начинающих
  3. Форма. Основы bootstrap 3 для начинающих. Урок №14
  4. Нам 4 годика! С Днем Рождения StepkinBlog.ru!!!
  5. Коды цветов в HTML. Основы HTML для начинающих. Урок №11

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

2 ответа(ов) на статью: “Форма. Основы bootstrap 3 для начинающих. Урок №14”

  1. Игорь says:
    11.10.2017 в 21:50

    Здравствуйте, подскажите, как Настроить форму, чтобы письма приходили на определенный email

    Ответить

    Степка ответил(а) на комментарий:
    17 октября, 2017 at 15:13

    Здравствуйте, Игорь!
    Вам нужно знать php язык.
    Замените в строке 9 - "ВАША_EMAIL" на ваш email.
    Файл должен быть в формате php.
    Это пример, а вы подставляйте или удаляйте так как вам нужно 

    <?php
if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}}
if (isset($_POST['sub'])) {$sub = $_POST['sub']; if ($sub == '') {unset($sub);}}
if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == '') {unset($body);}}
 
if (isset($name) && isset($email) && isset($sub) && isset($body)){
 
$address = "ВАША_EMAIL";
$mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body";
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
if ($send == 'true')
{echo "Сообщение отправлено успешно. Перейдите на главную страницу блога <a href='http://bloggood.ru/'>BLOGGOOD.RU</a>,и вы сможете продолжить ваш просмотр";}
else {echo "Ошибка, сообщение не отправлено!";}
 
}
else
{
echo "Заполнили все поля!!!";
}
?>
 
<h2>Форма обратной связи.</h2>
 
<form name="MyForm" action="" method="post">
<p><input class="input" name="name" type="text"  /> Ваше имя*</p>
<p><input class="input" name="email" type="text"  /> Электронная почта*</p>
<p><input class="input" name="sub" type="text"  /> Тема сообщения</p>
<p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" /></textarea></p>
<p><input id="submit" value="Отправить" type="submit" /></p>
</form>

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

  • Разные темы:

    • Реклама на блоге:

    Последние записи на блоге:

    Мои цели на
    2019 год:

    Довести количество статей до 150

    Доделать этот блог

    Закончить тему «Основы CSS»

    Закончить тему «Основы PHP»

    Начать тему «Основы JavaScript»

    Добиться посещаемости 500 чел/сутки

    Облако меток:

    bootstrap CSS HTML php WordPress Итог работы дополнение основы отдых праздники

    Статистика:

    Записей: 111
    Страниц: 3
    Рубрик: 9
    Меток: 11
    Комментариев: 347

    StepkinBlog.com © 2023

    Автор Костаневич Степан.

    Заказать сайт

    html css php wordpress bootstap Автор