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

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

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



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

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


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

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

Поля ввода

Поля для ввода используются в интернет магазинах повсеместно: форма поиска, добавление в корзину, оформление заказа, почтовые формы

Сергей    31.01.2017    636    2.3 из 5.0 (3)

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

Цель урока

Типы полей ввода

Наиболее распространены текстовые поля. В Bootstrap включена поддержка всех HTML5 типов: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Для многострочных текстовых полей используется тег textarea

Поля для ввода текста

Для оформления текстовых полей используется класс form-control. Так, поле займет всю доступную ширину. Чуть позже мы еще научимся располагать поля и кнопки в одну строку.

Исходный код:

<input type="text" class="form-control" placeholder="Введите текст">

Тег для ввода многострочного текста textarea допускает использование атрибута row. С помощью него задается количество строк:

Исходный код:

<textarea class="form-control" rows="3"></textarea>

Чекбоксы и radio-переключатели

Главное отличие: чекбоксы позволяют сделать множественный выбор (отметить несколько значений), а radio — только одно. Для размещения текста рядом с переключателями используется тег <label>:

Здесь используются классы checkbox и radio. Обратите внимание, как используются классы и атрибуты disabled и какой эффект при этом достигается:

<div class="checkbox">
 <label>
 <input type="checkbox" value="">
 Первый переключатель
 </label>
</div>
<div class="checkbox disabled">
 <label>
 <input type="checkbox" value="" disabled>
 Второй переключатель, недоступен для изменения
 </label>
</div>

<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 Первый переключатель
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
 Второй переключатель
 </label>
</div>
<div class="radio disabled">
 <label>
 <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
 Третий переключатель, недоступен для выбора 
 </label>
</div>

Чтобы иконка указателя мыши изменилась, нужно для родительского div добавить класс disabled.

Чтобы разместить переключатели в одной строке, используйте класс checkbox-inline и radio-inline:

<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Тогда вы добьетесь следующего:

Выпадающие списки

Выпадающие списки размещаются с помощью тега select. Ему, как и текстовым полям задается класс form-control. Бывает потребность в списках с множественным выбором. Тогда добавляется атрибут multiple .


Чтобы выбрать несколько значений, зажмите клавишу Ctrl.

Исходный код:

<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

<select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>

Размеры полей

Поля и выпадающие списки, как и кнопки, имеют свою сетку размеров. При этом регулируется размер шрифта и отступов, а не ширина. Для этого используются классы input-lg и input-sm:

Поля для ввода текста:

Выпадающие списки:


<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Упражнения

На этом мы завершили обзор ключевых элементов форм и готовы переходить к их размещению.

  1. Изучите типы текстовых полей, некоторые из них могут пригодиться при создании почтовых форм или страниц оформления заказа.
  2. Убедитесь, что усвоили, каким образом оформляются поля ввода на Bootstrap. За счет каких классов?
  3. Ознакомьтесь с размерами, которые могут быть заданы для полей
  4. Попробуйте самостоятельно кастомизировать кнопку добавления товара с количеством $2BASKET_Q$. Для этого потребуется вспомнить прошлый урок.


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


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

Обсуждение

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

Поля ввода
Поля ввода