Bootstrap 3 - Формы

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

Платформа Twitter Bootstrap 3 содержит глобальные стили и классы, которые предназначены для оформления HTML форм и индивидуальных элементов управления.

Глобальные стили представляют собой определённые CSS правила, которые определяют внешний вид элементов управления на веб-странице. Эти стили элементы управления получают автоматически, и веб-разработчику их явно задавать не требуется.

В Twitter Bootstrap 3 основная задача для веб-разработчика в основном сводится в добавлении необходимых классов для элементов управления, форм и контейнеров.

Основные моменты при создании и оформлении формы представим в виде следующих этапов:

  • Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса), горизонтальная (.form-horizontal) и в одну строку (.form-inline).
  • Добавить к необходимым текстовым элементам управления <input>, <textarea>, <select> класс .form-control, чтобы установить им ширину, равную 100% (всю доступную ширину родительского элемента).
  • Поместить каждую надпись (<label>) и элемент управления в контейнер <div>...</div> с классом .form-group. Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.

Вертикальная форма - это макет формы, в которой её элементы распологаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом .form-group.

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

Bootstrap 3 - Вертикальная форма

Горизонтальная форма - это форма, в которой надписи и элементы управления находящиеся в одной группе (<div class="form-group">...</div>) располагаются на одной строке.

Принцип создания горизонтальной формы:

  • Добавить класс .form-horizontal к элементу form;
  • Поместить элементы формы, которые должны распологаться в одной строке, в контейнер <div>...</div> и добавить к нему класс .form-group
  • Кроме этого этим элементам, т.е. тем которые будут располагаться в одной строке, необходимо задать ширину с помощью классов системы сетки Twitter Bootstrap 3;
  • Добавить класс .control-label к элементам label.
<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 - Горизонтальная форма


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

Для создание формы с расположением элементов в одну строку, необходимо добавить Bootstrap класс .form-inline к элементу <form>. Такие формы можно создавать только для окон шириной не менее 768px.

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputPassword">Пароль</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Пароль">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Запомнить</label>
  </div>
  <button type="submit" class="btn btn-primary">Войти</button>
</form>

Выше приведенный пример будет выглядеть примерно так:

Примечание: Вы можете скрывать элемент <label> с помощью класса .sr-only.


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

Если вам нужно поместить обычный текст рядом с элементом <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@itchief.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@itchief.ru


Изменение высоты элементов <input> и <select>

С помощью классов 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 class="col-xs-6">
      <select class="form-control input-lg">
        <option>Большой - 1</option>
        <option>Большой - 2</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control" placeholder="Средний">
    </div>
    <div class="col-xs-6">
      <select class="form-control">
        <option>Средний - 1</option>
        <option>Средний - 2</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-6">
      <input type="text" class="form-control input-sm" placeholder="Маленький">
    </div>
    <div class="col-xs-6">
      <select class="form-control input-sm">
        <option>Маленький - 1</option>
        <option>Маленький - 2</option>
      </select>
    </div>
  </div>
</form>

Выше приведенный пример будет выглядеть примерно так:




Изменение размеров элементов <input>, <textarea>, <select> с помощью сетки Bootstrap 3

Вы также можете изменить размеры элементов управления формы с помощью задания ширины, в виде количества колонок сетки Twitter Bootstrap. Для этого, необходимо поместить элементы управления формы (<input>, <textarea>, <select>) в контейнер, или применить классы сеток Bootstrap 3 прямо на них.

<form>
  <div class="row">
    <div class="col-xs-3">
      <input type="text" class="form-control">
    </div>
    <div class="col-xs-4">
      <input type="text" class="form-control">
    </div>
    <div class="col-xs-5">
      <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-4">
      <textarea class="form-control"></textarea>
    </div>
    <div class="col-xs-5">
      <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-4">
      <select class="form-control">
        <option>Выбор</option>
      </select>
    </div>
    <div class="col-xs-5">
      <select class="form-control">
        <option>Выбор</option>
      </select>
    </div>
  </div>
</form>

Выше приведенный пример будет выглядеть примерно так:




Дополнительные элементы управления Twitter Bootstrap

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

Создание расширенного элемента управления <input>

Вы можете расширить элементы управления формы посредством добавления текста или кнопки перед или после элемента <input>.

Для этого:

  • Поместите текст или иконку внутри тега <span>, имеющего класс .input-group-addon. А затем контейнер <span> поместите перед или после элемента <input>
  • Поместите элемент <span> и элемент ввода <input> внутри контейнера <div> и примените к нему класс .input-group
<form>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Имя пользователя">
  </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>
</form>

Выше приведенный пример будет выглядеть примерно так:

@

.00

$ .00

Вы, так же, можете расширить элемент управления <input>, поместив перед ним флажок или переключатель.

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

Выше приведенный пример будет выглядеть примерно так:

Кроме этого, Вы можете расширить элемент управления <input>, поместив перед ним или после него кнопки. Кнопки необходимо заключить внутри контейнера <span> и применить класс .input-group-btn вместо .input-group-addon.

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

Выше приведенный пример будет выглядеть примерно так:



   Bootstrap 0    53775 0

Комментарии (60)

  1. Yaromir # 0
    Здравия
    Почему никто не показывает как сделать форму отправки заказа (для лэндингов)
    В шаблонах (и на сайте) показывается как сделать кнопку (визуально), но как сделать чтобы она отправляла данные на почту…
    Заранее благодарю за ответ.
    1. Александр Мальцев # +1
      Здрайствуйте, Yaromir.
      С помощью Twitter Bootstrap 3, вы не можете отправить форму на почту. Для этого необходимо использовать серверные скрипты (PHP, .NET или возможности системы управления сайтом).
    2. Максим # +1
      Здравствуйте! Спасибо за материал, предоставленный в удобной форме. Получаю удовольствие, изучая Bootstrap с помощью данного ресурса.

      Хочу обратить ваше внимание:

      — Опечатка в первом коде подглавы «Дополнительные элементы управления Twitter Bootstrap» — <br&>;
      — В главе «Bootstrap 3 — Работа с текстом» лишние запятые в заголовках;
      — Навигация по главам в конце некоторых статей не соответствует основной навигации.
      1. Александр Мальцев # 0
        Добрый день, Максим!
        Спасибо за положительный отзыв о ресурсе и за отмеченные опечатки.

        Навигация внизу статьи действительно может отличаться от навигации по разделу. Это связано с тем, что навигация внизу статьи формируется в зависимости от даты публикации, а навигация по разделу разбита на группы и формируется по смыслу. Т.е. нижняя навигация предназначена для пользователей, которые более часто посещают ресурс. А навигация по разделу имеет смысл для всех, т.к. c её помощью легче ориентироваться в разделе.
      2. Linda # 0
        Здравствуйте! Скажите, пожалуйста, а можно как-то сделать что — бы в строке было, скажем, 2 поля, затем перенос, и еще 2 поля.
        Что-то вроде этого wireframe.cc/a1n8js
        1. Александр Мальцев # 0
          Добрый день, Linda!
          <div class="row">
            <!--1 поле-->
            <!--Класс form-group используем для создания отступов снизу-->
            <div class="form-group col-xs-6">
              <input type="email" class="form-control" placeholder="Введите e-mail">
            </div>
            <!--2 поле-->
            <div class="form-group col-xs-6">
              <input type="email" class="form-control" placeholder="Введите e-mail">
            </div>
            <!--Запрещаем обтекание этого элемента для нижних элементов-->
            <div class="clearfix"></div>
            <!--3 поле-->
            <div class="form-group col-xs-6">
              <input type="email" class="form-control" placeholder="Введите e-mail">
            </div>
            <!--4 поле-->
            <div class="form-group col-xs-6">
              <input type="email" class="form-control" placeholder="Введите e-mail">
            </div>
          </div>
          
          1. Linda # 0
            Chief ! Спасибо, огромное. Чтобы я без вас делала ))
            А если мне скажем нужно увеличить ширину полей , или сделать их более закругленными? Тогда как, просто присваиваем дополнительный класс полю, выносим все в css файл? Или как такого можно добиться?

            2. И еще, насколько я поняла, на bootstrape можно только оболочку сделать? Для валидации вводимых данных, вроде номер телефона(должен начинаться с +7 или +38) в e-mail должен быть символ @ нужен JS? Может есть какой-то готовый плагин для этого, можете подсказать?
            1. Александр Мальцев # 0
              Ширину полей в Bootstrap стандартными средствами можно регулировать только с помощью количества колонок. Т.к. в Bootstrap всего 12 колонок, то получается:

              col-xs-1 — (1/12 = 8% — от ширины родительского элемента)
              col-xs-2 — (2/12 = 16% — от ширины родительского элемента)
              col-xs-3 — (3/12 = 25% — от ширины родительского элемента)
              и т.д. до 12
              Т.е. col-xs-12 (12/12=100% — будет занимать всю ширину родительского элемента)

              Если необходимы другие значения, то только с помощью CSS. Если адаптивный дизайн то лучше использовать %, в противном случае можно использовать px.

              Элементы сделать более закруглённые можно только с помощью CSS.
              Например, вот так:
              input {
              border-radius: 10px !important;
              }
              
              1. Николай # 0
                Ширину полей в Bootstrap стандартными средствами можно регулировать только с помощью количества колонок. Т.к. в Bootstrap всего 12 колонок, то получается:
                Не совсем так. Можно сгенерировать CSS для любого количества колонок:
                getbootstrap.com/customize/

                Поле Grid system

                Вообще в bootstrap можно изменить почти все через этот генератор :-)
              2. Александр Мальцев # 0
                Для валидации данных на стороне клиента нужен JavaScript.
                Email можно проверить с помощью регулярного выражения.
                HTML:
                <div class="form-group col-xs-6">
                  <input id="e-mail" type="email" class="form-control" placeholder="Введите e-mail">
                </div>
                
                Javascript (например при потере фокуса):
                jQuery(function($){
                  $("#e-mail").blur(function() {
                    //регулярное выражение для проверки e-mail
                    var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
                    //если e-mail попадает под регулярное выражение
                    //то изменить цвет границы на зелёный
                    //иначе изменить цвет границы на красный
                    if (testEmail.test(this.value))
                      $("#e-mail").css("border","green solid 1px");
                    else
                      $("#e-mail").css("border","red solid 1px");
                  });
                });
                
                1. Александр Мальцев # 0
                  С телефоном будет немного посложнее, т.к. формат номера будет зависеть от страны (+7 — Россия) и (+38 — Украина).
                  Для телефона лучшим вариантом будет использовать маску, т.к. количество цифр заранее известно.
                  Для задания маски полю можно воспользоваться плагином MASKED INPUT PLUGIN.

                  В форме лучше добавить раскрывающий список со странами:
                  <div class="col-xs-6">
                    <div class="row form-group">
                      <div class="col-xs-3">
                        <!-- Раскрывающий список -->
                        <select id="country" class="form-control">
                          <option value="ru" selected="selected">Россия</option>
                          <option value="uk">Украина</option>
                        </select>
                      </div>
                      <div class="col-xs-5">
                        <input id="phone" type="text" class="form-control">
                      </div>
                    </div>
                  </div>
                  
                  Подключаем плагины:
                  <!-- Если нету библиотеки jQuery, то подключаем её-->
                  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
                  <!-- Но и сам плагин MASKED INPUT PLUGIN -->
                  <script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
                  
                  Javascript:
                  jQuery(function($){
                    //если выбрана страна Украина то маска будет 
                    //иметь формат +38 (999) 999-9999,
                    //иначе если Россия то +7 (999) 999-9999.
                    if ($("#country option:selected").val()=="uk") 
                      $("#phone").mask("+38 (999) 999-9999");
                    else 
                      $("#phone").mask("+7 (999) 999-9999");
                    //При изменении страны изменить маску	
                    $("#country").change(function() {
                      if (this.value=="uk")
                        $("#phone").mask("+38 (999) 999-9999");
                      else
                        $("#phone").mask("+7 (999) 999-9999");
                    });
                    //Валидацию можно сделать вручную,
                    //Например с помощью количества цифр
                    //При выходе из поля телефон
                    $("#phone").focusout(function() {
                      //count - переменная хранящая количество цифр в номере
                      var count=0;
                      //цикл, в котором проверяем количество цифр в номере
                      for (var i=0;i<this.value.length;i++) {
                        //если число, то увеличиваем количество цифр на +1
                        if ($.isNumeric(this.value[i]))
                  	count++;
                      }
                      //Если выбрана страна Россия
                      if ($("#country option:selected").val()=="ru") {
                        //и количество цифр = 11, то окрашиваем рамку
                        //в зеленый цвет, т.е. номер правильный
                        if (count==11)
                  	$("#phone").css("border","green solid 1px");
                  	//иначе окрашиваем рамку в красный цвет
                        else
                  	$("#phone").css("border","red solid 1px");
                       }
                       //Если страна другая (в нашем случае Украина)
                       else {
                        //и количество цифр = 12, то окрашиваем рамку
                        //в зеленый цвет, т.е. номер правильный			
                        if (count==12)
                  	$("#phone").css("border","green solid 1px");
                        //иначе окрашиваем рамку в красный цвет
                        else
                  	$("#phone").css("border","red solid 1px");
                       }
                    });
                  });	
                  
                  1. Андрей # 0
                    Вопрос по теме, маска телефона,
                    Перепробывал кучу примеров, даже Ваш вводил на чистой странице, все равно маска не работает.
                    Перерыл кучу сайтов, везде одно тоже написано, копировал, переделывал, вытягивал с рабочих ресов, все равно не получается маску для телефона сделать.
                    1. Александр Мальцев # 0
                      Скорее всего Вы не правильно указываете путь к файлам jquery.min.js и maskedinput.min.js. Для проверки можно использовать консоль браузера (в Chrome: F12->вкладка Console).
                      1. Алексей # 0
                        Подскажите, почему maskedinput работает только на большом экране, а на мобильном(fly4413) не работает
                        1. Александр Мальцев # 0
                          Что за браузер? JavaScript случайно не отключён?
            2. Елена # 0
              Здравствуйте

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

              <li class="dropdown visible-xs">
              	      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span> Поиск по сайту<b class="caret"></b></a>
              	      <ul class="dropdown-menu">
              	        <form class="form-horizontal visible-xs" role="search" onsubmit="javascript: showBusyLayer()" method="post">
              			 <div class="row"><div class="col-xs-1"></div>
              	            <div class="input-group col-xs-10">
              		          <input type="text" name="story" class="form-control" placeholder="Поиск...">
              				    <span class="input-group-btn">
              				     <button type="submit" name="subaction" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Найти</button>
              				    </span>
                              </div>
              	              <input type="hidden" name="do" value="search"><input type="hidden" name="subaction" value="search">
              			    <div class="col-xs-1"></div>
              			 </div>
              	       </form>
              		  </ul>
              </li>
              

              Не подскажите, как ее можно убрать? Картинку откройте в новой вкладке, потому что она почему то у вас отображается обрезанной справа.
              1. Александр Мальцев # 0
                Добрый день!
                Не знаю как Вам, а мне с таким кодом работать неудобно. Надо по-хорошему код форматировать.
                В Вашем коде лишний контейнер
                <div class="row">...</div>
                , т.к. он задаёт отрицательные отступы и у Вас появляется горизонтальная полоса прокрутки.
                И ещё в коде непонятны назначение блоков
                <div class="col-xs-1"></div>
                . Если они нужны только для сдвига блока и его центрирования, то тогда лучше использовать класс .col-xs-offset-1.
                <li class="dropdown visible-xs">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-search"></span> Поиск по сайту
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <form class="form-horizontal visible-xs" role="search" onsubmit="javascript:showBusyLayer()" method="post">
                      <div class="input-group col-xs-offset-1 col-xs-10">
                        <input type="text" name="story" class="form-control" placeholder="Поиск...">
                	<span class="input-group-btn">
                	  <button type="submit" name="subaction" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span> Найти
                          </button>
                	</span>
                      </div>
                      <input type="hidden" name="do" value="search">
                      <input type="hidden" name="subaction" value="search">
                    </form>
                  </ul>
                </li>
                
              2. Святослав # 0
                Здравствуйте, скажите а можно сделать так что бы поля ввода были закругленными торцами с права и слева? А то просто надоели такие вечно прямые под 90 градусов углы
                1. Александр Мальцев # 0
                  Здравствуйте, Святослав.
                  Если Вам надо для всех компонентов Bootstrap, то более просто это сделать на странице Bootstrap Customize. За это дело отвечают переменные, содержащие в своём названии border-radius. Этим переменным необходимо установить необходимо значение и скомпилировать сборку Bootstrap.

                  Или с помощью свойства CSS border-radius.
                  Например, установить всем элементам форма радиус скругления торцов 16px:
                  .form-control {
                    border-radius: 16px !important;
                  }
                  
                2. Алексей З. # 0
                  Здравствуйте!

                  Возможно ли сделать. так, что бы в форме несколько полей размещалось на 1 строке.
                  Выше был пример с использованием сетки class=«col-md...». Этот вариант плох, потому как делает жесткое расположение полей. И вычислять колонки для разных типов полей — не удобно.
                  Например, в одной строке — дата из 3х полей: год, месяц, день.
                  На другой строке: поле выбора и поле значения. То есть пусть они блоками друг за другом будут.
                  1. Александр Мальцев # 0
                    Здравствуйте!
                    Что-то я Вас не совсем понял…
                    Можно блоки разместить и в строку, только Вам всё равно надо указать им какую то-ширину.
                    Например, можно вместо % (col-*-*) использовать px или rem.

                    Но в этом случае, если Вы будете делать сайт адаптивным, эту ширину надо будет рассчитать таким образом, чтобы эти поля выглядели на разных устройствах уместно.
                    1. Алексей З. # 0
                      Хочется разместить несколько полей «в строчку», по-скольку они по существу «вместе». Ширину можно задать и жестко, для каждого блока в пикселях. Что бы было понятнее, например некая форма — анкета.
                      В одной строке: Заголовок «Фамилия, имя, отчество» и следом 3 input поля.
                      Во второй — дата рождения. Просто поле + ввод даты.
                      В третьей строке — надпись «Место рождения» и 3 поля: Край/область, Район, Город. Следующая строка «Адрес». Там подряд «Индекс», «Город», «Улица, дом».
                      Похоже, как работает in-line форма, только тут их как бы несколько, все вместе — в виде обычной формы. И тег «form» то же один общий.
                      1. Александр Мальцев # 0
                        Разместить на форме поля в строчку можно следующим образом:
                        <form class="form-horizontal">
                          <div class="form-group">
                            <label class="control-label" style="display: inline-block; width:150px;">ФИО: </label>
                            <input type="text" id="lastName" class="form-control" placeholder="Фамилия" style="display: inline-block; width:100px;">
                            <input type="text" id="firstName" class="form-control" placeholder="Имя" style="display: inline-block; width:100px;">
                            <input type="text" id="fatherName" class="form-control" placeholder="Отчество" style="display: inline-block; width:100px;">
                          </div>
                          <div class="form-group">
                            <label class="control-label" style="display: inline-block; width:150px;">Место рождения: </label>
                            <input type="text" id="region" class="form-control" placeholder="Край/область" style="display: inline-block; width:120px;">
                            <input type="text" id="district" class="form-control" placeholder="Район" style="display: inline-block; width:100px;">
                            <input type="text" id="city" class="form-control" placeholder="Город" style="display: inline-block; width:100px;">
                          </div>
                          ...
                        </form>
                        
                        Стили, добавленные к элементам input с помощью атрибута style желательно вынести в соответствующий файл CSS Вашего сайта или страницы.
                  2. Алексей З. # 0
                    Премного благодарен.
                    Я еще очень не силен в CSS, однако и в первом Вашем ответе была очень полезная подсказка.
                    К стати, если использовать класс col-..-.., и поставить ему дополнительно width в px, то эффект будет тот же. Но это немного кривовато.
                    К стати еще прикол. Если установить width не в px, а в процентах, то форма будет смотреться гармоничнее при масштабировании. НО: если сумма процентов строго равна 100%, то не работает. Например, если у одного элемента поставить 30%, у другого 70%. Но если поставить 29% и 69% — то они встанут в строчку.
                    Может это особенность CSS, а может это у меня руки кривые.
                    В любом случае за ответ — большое спасибо.
                    1. Aleksandr Ustinov # 0
                      Доброго времени суток! Подскажите пожалуйста решение проблемы,: если расширить элемент управления «input», и поместив перед ним флажок или переключатель, то при валидации формы получается: что данная форма подсвечивается зеленым независимо от флажка, хотя если все данные ввести, то просит поставить флажок. Подскажите как связать инпут и чекбокс что бы при! НЕ заполнении! хотя бы одного, вся строка считалась невалидной и подсвечивалась как ошибка P.S. Валидация формы взята с вашего одноименного урока.
                      Заранее Спасибо ШЕФ
                      1. Александр Мальцев # 0
                        Здравствуйте, Александр.
                        Интересно, а что это за ситуация, когда необходимо связать элемент input (text) и input (checkbox) вместе… Расскажите…
                        Тут нет ничего сложного, правдо придётся всё делать ручками…
                        Можно, например, сделать так:
                        1. Добавить к чекбоксу и текстовому элементу идентификаторы:
                        <!-- ... -->
                        <input id="checkbox1" type="checkbox">
                        <!-- ... -->
                        <input id="textinput1" type="text" name="login" pattern="[A-Za-z]{6,}">
                        
                        2. В скрипте:
                        //...
                        $('input').each(function() {
                          var formGroup = $(this).parents('.form-group');
                          var glyphicon = formGroup.find('.form-control-feedback');
                          // элемент checkbox пропускаем и не будем его проверять
                          if ($(this).attr('id')=="checkbox1") return;
                          //если элемент textinput1 (т.е. тот который связан с checkbox), то
                          if ($(this).attr('id')=="textinput1") {
                            // проверяем состояние checkbox, если оно false (он не нажат) 
                            if ($("#checkbox1").prop("checked")==false) {
                              // то нет смысла проверять содержимое input и сразу добавляем ошибку 
                              formGroup.addClass('has-error').removeClass('has-success');
                              glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok');
                              //отмечаем форму как не валидную 
                              formValid = false;
                              //переходим к проверке следующего элемента
                              return;
                            } // если состояние checkbox true, то проверяем этот input по обычным правилам
                          }
                          //для валидации данных используем HTML5 функцию checkValidity
                          if (this.checkValidity()) {
                            //...
                        
                        1. Aleksandr Ustinov # 0
                          Спасибо!
                          test.theone1.ru/kontakty.html
                          Там на странице последняя строка…
                          1. Aleksandr Ustinov # 0
                            У меня еще вопрос! там же на странице, форма отправляется без валидной капчи, у меня поле капчи просто обязятельно для заполнения (required=«required») Можно ли научить его через js и pattern="" точно знать ответ на капчу.
                            1. Александр Мальцев # 0
                              Обычно проверка капчи осуществляется на сервере через AJAX.
                              Но можно создавать и проверять капчу на клиенте.
                      2. Виктор # 0
                        приветствую. я новичек на сайте да и в програмировании, и вот сразу взялся за крупный проект (по крайней мере для меня ) сайт бесплатных объявлений, нужна форма для заполнения места расположения рекламодателя (город, область итд) мне подойдут выше перечисленные в статье поля ввода, выбора? или там другая система пример выбора города итд пример с сайта olx.kz. что бы клиент не вводил данные а выбирал с имеющихся
                        1. Александр Мальцев # 0
                          Здравствуйте.
                          Для выбора города на указанном Вами ресурсе используется простой элемент input. При нажатию на него показывается панель (некий блок div), данные в котором берутся из JSON…
                          1. Виктор # 0
                            А какой атребут подойдёт для этой формы отправки
                            1. Александр Мальцев # 0
                              Укажите ей любой идентификатор (чтобы было более просто её выбирать) и полям тоже, а затем напишите скрипт для её отправки на сервер через AJAX.
                        2. Mixail # 0
                          Добрый день, Александр для каких случаев уместно применять SR-ONLY. Спасибо.
                          1. Александр Мальцев # 0
                            Класс sr-only предназначен для обеспечения совместимости с так называемыми вспомогательными технологиями (программами для чтения с экрана и др.).
                            Например, программы чтения с экрана имеют проблемы с формами, если в них Вы не включаете label для каждого элемента input. Чтобы это избежать и используют данный класс. Т.е. он предназначен для совместимости: вы создаёте данные элементы (label) и скрываете их с помощью этого класса. Другими словами, данный класс предназначен просто для скрытия элемента и его контента.
                            Расшифровывается данный класс так: screenreaders-only (только для программ чтения с экрана)
                            Т.е. если Вы не будете адаптировать свой сайт для вспомогательных технологий, то данный класс можно не использовать.
                          2. Александр # 0
                            Александр, большое спасибо за эту статью! Много полезного для себя узнал. Столкнулся с небольшой проблемой, возможно вы сможете подсказать как ее решить.
                            Суть проблемы:

                            Делаю строку поиска на одном из проектов на основе вашего примера «Создание группы кнопок, поделенных на сегменты»

                            s017.radikal.ru/i406/1601/8a/9b23207a932c.jpg

                            Собственно:
                            1. Текстовое поле — поле для заполнение,
                            2. Кнопка «Действие» = кнопка «Поиск» (отправка данных)
                            3. А каретка = Кнопка «Перейти в категорию» (Меню с нужными категориями)

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

                            www.bootply.com/WAAzt9qKa2
                            1. Александр Мальцев # 0
                              Для работы dropdown меню необходимо наличие подключенной библиотеки bootstrap.min.js и jquery.
                              Проверьте подключены ли они.
                              1. Александр # 0
                                Они подключены, сам dropdown работает. Суть в том, что когда я нажимаю на него, у меня он открывается и сразу же отправляются данные с формы поиска. Т.е. кнопка «Перейти в категорию» выполняет функцию кнопки «Поиск».
                                1. Александр Мальцев # 0
                                  А Вы данные как отправляете?
                                  Данные сами по себе же не отправляются. Их же отправляет только элемент с type =«submit».
                                  1. Александр # 0
                                    Код формы — www.bootply.com/WAAzt9qKa2
                                    1. Александр Мальцев # 0
                                      Форма как форма, я уже её смотрел. Она не будет сама отправляться. Скорее Вы что-то ещё делаете. Проверьте как Вы её отправляете. Если с помощью AJAX, то проверьте ваш код JavaScript.
                            2. Елена # 0
                              Здравствуйте. Подскажите пожалуйста как в стандартной форме с выпадающим меню заменить кнопку-стрелочку на иконку без кнопки?
                              1. Александр Мальцев # 0
                                Здравствуйте. Следующим образом:
                                <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                  Действие 
                                  <!-- Иконка -->
                                  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                  </button>
                                  <ul class="dropdown-menu pull-right">
                                    <li><a href="#">Пункт 1</a></li>
                                    <li><a href="#">Пункт 2</a></li>
                                    <li><a href="#">Пункт 3</a></li>
                                  </ul>
                                </div>
                                
                                1. Елена # 0
                                  Спасибо за ответ, но я возможно не точно задала вопрос. Вот мой код формы:
                                  <div class="currency1 col-md-12 col-sm-12 col-xs-12">
                                        <select class="form-control" id="currency">
                                                <option value="UAH">UAH (Гривня)</option>
                                                <option value="USD">USD (Долар)</option>
                                                <option value="EUR">EUR (Євро)</option>
                                                <option value="RUB">RUB (Рублі)</option>
                                         </select>
                                  </div>
                                  
                                  Как мне сюда вставить иконку и как убрать синюю прокрутку в option? И вообще изменить весь option? Через CSS что-то не работает.
                                  1. Александр Мальцев # 0
                                    Вот пример, как можно оформить select, используя только CSS:
                                    jsfiddle.net/itchief/254s6ure/
                                    1. Елена # 0
                                      Огромное спасибо! Прямо в точку!
                              2. Елена # 0
                                Здравствуйте! Подскажите пожалуйста возможно ли изменить цвет placeholder, если да, то как это сделать?
                                1. Александр Мальцев # 0
                                  Здравствуйте. Это можно осуществить с помощью CSS посредством псевдоэлементов или псевдоклассов (в зависимости от браузера).
                                  HTML:
                                  <input placeholder="Текст плейсхолдера">
                                  
                                  CSS:
                                  /* Браузеры на WebKit, Blink, Edge */
                                  ::-webkit-input-placeholder {
                                    color: red;
                                  }
                                  /* Mozilla Firefox от 4 до 18 версии */
                                  :-moz-placeholder {
                                    color: red;
                                    opacity: 1;
                                  }
                                  /* Mozilla Firefox начиная с версии 19 */
                                  ::-moz-placeholder {
                                    color: red;
                                    opacity:  1;
                                  }
                                  /* Internet Explorer 10 и 11 */
                                  :-ms-input-placeholder {
                                    color: red;
                                  }
                                  
                                  Кроме этого некоторые браузеры имеют предопределённые стили CSS, которые могут отобразить некоторые элементы input (search, email) не так, как Вы этого ожидаете.
                                  Это можно исправить, если задать внешний вид элементам. Например сделать так, чтобы они выглядели как текстовые поля.
                                  Например, для элемента input с type=«search»:
                                  [type="search"] {
                                    -moz-appearance: textfield;
                                    -webkit-appearance: textfield;
                                    appearance: textfield;
                                  }
                                  
                                  1. Елена # 0
                                    Спасибо!
                                2. Елена # 0
                                  Во всех браузерах пошло, кроме Хрома. В чем может быть еще причина?
                                  1. Александр Мальцев # 0
                                    А в какой версии? В Chrome 51 цвет изменяется.
                                  2. Елена # 0
                                    У меня тоже Chrome 51. Ничего не понимаю?
                                    1. stas # 0
                                      вопрос по формам
                                      а зачем нужен тег form? ведь можно добавить комментарий, к примеру, и без перезагрузки страницы, а посредством ajax запроса. даже последний комментарий можно вставить используюя старую запись $('.media-list').prepend( $(«li.media:first-child»).clone().addClass('last-comment')). а потом автора и комментарий заменить
                                      1. Александр Мальцев # 0
                                        Тег form предназначен для того чтобы указать useragent-ам то, что здесь находится форма. Вы конечно можете обойтись без него, если используете AJAX. Но используя его Вы создаёте код семантически правильным с точки зрения HTML5. Кроме этого он даёт преимущества. Одно из них — это проверка формы встроенными механизмами браузера, это облегчает валидацию и не требуется прибегать к дополнительным средствам. Второе — это возможность отправить форму посредством клавиши «Enter». Третье — если у пользователя отключен JavaScript, то у него всё равно будет возможность отправить форму (хоть и с перезагрузкой). Четвёртое — это перебор элементов для отправки, т.е. Вам всё равно необходимо создать какой-то контейнер, чтобы указать где искать элементы, которые необходимо перебрать для отправки их на сервер. Тем более что тег form визуально ни как не отображается. Тогда что мешает обернуть форму в тег form и сделать её семантически правильной.

                                        Если так рассуждать, то тогда из HTML5 можно выкинуть большинство элементов и использовать по возможности один только div. Например, использовать его как strong.
                                        <div style="display: inline; font-weight: bold">Важный текст</div>
                                        
                                        Но если так поступить, то тогда потеряется семантика (смысл) страницы.
                                        1. stas # 0
                                          спасибо.

                                          а если на кнопку, например отправить, повесить какой-то скрипт, при этом вывести return true/false проверка формы не работает. в чем может быть дело?
                                      2. Дмитрий # 0
                                        Добрый день!
                                        Огромное спасибо за уроки.
                                        Вариант «Создание кнопок, с выпадающим меню» не рабочий, возможно есть опечатка в коде?
                                        1. Александр Мальцев # 0
                                          Здравствуйте. Библиотека jQuery и плагин bootstrap.js подключён? Они необходимы для работы dropdown списков.
                                        2. Сергей Горин # 0
                                          Здравствуйте, Александр!
                                          С уверенностью могу сказать, что Ваш ресурс — один из самых лучших в плане обучения и практического применения Twitter Bootstrap. Уроки и статьи написаны четко, доходчиво и грамотно, что очень важно для новичков. Лично меня Вы уже не один раз выручали. Огромное спасибо!

                                          По данной статье у меня возник такой вопрос. Возможно ли средствами Bootstrap разместить внутри полей input иконки FontAwesome? Именно внутри, а не за пределами, как описано выше с помощью классов input-group и input-group-addon. Т.е. должно получиться как на картинке, которую прилагаю.

                                          1. Александр Мальцев # 0
                                            Здравствуйте, спасибо за ваш отзыв.
                                            Приведу 2 варианта. 1 вариант — с иконкой в формате png. 2 вариант — с иконкой в формате шрифта Glyphicons (для FontAwesome будет аналогично, то название классов другие).
                                            HTML код соответственно для 1 и 2 варианта:
                                            <h2>1 вариант</h2>
                                            <form>
                                              <div class="form-group">
                                                <label for="phone">Номер телефона</label>
                                                <input type="text" class="form-control" id="phone" placeholder="Введите номер телефона">
                                              </div>
                                            </form>
                                            
                                            <h2>2 вариант</h2>
                                            <form>
                                              <div class="form-group">
                                                <label for="phone2">Номер телефона</label>
                                                <div class="input_with_icon">
                                                  <input type="text" class="form-control" id="phone2" placeholder="Введите 2 номер телефона">
                                                  <i class="glyphicon glyphicon-phone-alt"></i>
                                                </div>
                                              </div>
                                            </form>
                                            
                                            CSS код:
                                            /* 1 вариант */
                                            #phone {
                                              background: url(phone.png) no-repeat scroll 10px 5px;
                                              background-size: 20px 20px;
                                              padding-left:40px;
                                            }
                                            
                                            /* 2 вариант */
                                            .input_with_icon { position: relative; }
                                            .input_with_icon input { text-indent: 30px;}
                                            .input_with_icon .glyphicon-phone-alt { 
                                              position: absolute;
                                              top: 6px;
                                              left: 10px;
                                              font-size: 20px;
                                            }
                                            
                                            1 вариант основан на использовании изображении в качестве фона и создании некоторого отступа.
                                            2 вариант (с иконками Glyphicons, FontAwesome и др.) с помощью позиционирования. Для родительского блока (input_with_icon) устанавливаем относительное позиционирование (position: relative). Это необходимо для того чтобы блок с иконкой (.glyphicon-phone-alt), которому мы установили абсолютное позиционирование, задавался относительно блока с классом input_with_icon. Потом используя свойства top и left, накладываем иконку поверх элемента input.
                                            HTML элемент input с иконкой
                                            HTML элемент input с иконкой
                                            1. Сергей Горин # 0
                                              Замечательно, Александр!
                                              Всё работает именно так, как хотел заказчик. Оба предложенных Вами варианта имеют свои достоинства. Огромное спасибо Вам за помощь, и за столь подробные и исчерпывающие разъяснения! Ваш труд неоценим.

                                          Вы должны авторизоваться, чтобы оставлять комментарии.