Формы Bootstrap. Разметка и оформление

Где применяются формы на сайте uCoz?

Важно понимать, где могут применяться формы:

• Форма поиска
• Почтовые формы
• Форма оформления заказа
• Форма входа/регистрации
• Форма добавления отзывов
• Кнопка "В корзину" с указанием количества
• Переключатель валюты

Это не полный список, вы, наверняка, найдете что-то еще.

Учитывайте, что зачастую в шаблоне указание тега form не требуется, она подключается автоматически с помощью переменных. Исключение составляют случаи, когда вы пытаетесь кастомизировать какую-либо форму, например, поиск.

Базовые формы

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

<form>
 <div class="form-group">
 <label for="exampleInputEmail1">Email адрес</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">Пароль</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Пароль">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> Запомнить меня
 </label>
 </div>
 <button type="submit" class="btn btn-default">Войти в личный кабинет</button>
</form>

Как я уже писал выше, подключение тега form необязательно. Когда вы решите перенести какую-либо форму на Bootstrap, следите за тем, чтобы у полей и кнопок совпадали атрибуты name и id. Зачастую именно с этими атрибутами идет взаимодействие посредством JavaScript. Так вы гарантируете работоспособность скриптов после кастомизации.

Пример. Простая форма регистрации:

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

Формы в одну строку более компактны, они отлично подходят для поиска. Такая форма может иметь следующий исходный код:

<form class="input-group search-form" action="/shop/search" onsubmit="this.sfSbm.disabled=true">
 <input type="text" class="form-control" name="query" placeholder="Поиск по сайту">
 <span class="input-group-btn">
 <button class="btn btn-default" type="submit" name="sfSbm"> Найти </button>
 </span>
</form>

Обратите внимание, в коде присутствует тег form, потому что форма кастомизируется. Т.е., чтобы такая форма появилась на сайте, приведенным кодом нужно заменить $MODULE_SEARCH_FROM$ (в данном случае пример для магазина).

Вот как выглядит такая форма на сайте:

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

Горизонтальные формы пригодятся, когда нужно представить большое количество полей в компактном виде. Например, при оформлении заказа или подписке на рассылку. Исходный код такой формы:

<div class="form-horizontal">
 <div class="form-group">
 <label for="order-fld-1" class="col-sm-2 control-label">Email</label>
 <div class="col-sm-10">
 <input type="email" class="form-control" placeholder="Email">
 </div>
 </div>
 <div class="form-group">
 <label for="order-fld-2" class="col-sm-2 control-label">Имя</label>
 <div class="col-sm-10">
 <input type="password" class="form-control" placeholder="Имя">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <div class="checkbox">
 <label>
 <input type="checkbox"> Получать новостную рассылку
 </label>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <button type="submit" class="btn btn-default" onclick="shopCheckOut()">Оформить заказ</button>
 </div>
 </div>
</div>

На этом урок окончен. Чуть позже мы будет практиковаться в кастомизации форм.