Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


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

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

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

Сергей    07.02.2017    456    5.0 из 5.0 (3)

Оцените материал:

Цель урока

Применить формы Bootstrap на сайте uCoz: выбрать единый стиль оформления для всех форм.

Где применяются формы на сайте 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. Так вы гарантируете работоспособность скриптов после кастомизации.

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

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

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

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

<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$ (в данном случае пример для магазина).

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

Форма поиска Bootstrap для uCoz

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

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

<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>
Горизонтальная форма

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

Упражнения

  1. Ознакомьтесь со способами представления форм с помощью фреймворка Bootstrap
  2. Кастомизируйте форму поиска. Это наиболее простой способ применить полученные знания
  3. Поупражняйтесь в оформлении почтовых форм. Это несколько сложнее, но поможет справиться с заданием кастомизации страницы оформления заказа


Оцените материал:


Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 0

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