Визуальное оформление HTML формы при помощи bootstrap

Как можно быстро визуально оформить HTML форму без особого знания каскадных таблиц стилей CSS? Ответом на этот вопрос является возможность использования фреймворка Bootstrap, где нужно будет подставить div контейнеры и прописать классы для.

Итак, у нас имеется HTML форма, состоящая из нескольких полей.

<form>
<label for="value1">Значение 1</label>
<input type="text" name="value1" id="value1"><br>
<label for="value1">Значение 2</label>
<select name="value2" id="value2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<input type="checkbox" value="1" id="Check1">
<label for="Check1">Значение 3</label><br>
<input type="radio" name="exampleRadios" id="Radio1" value="1" checked>
<label for="Radio1">Значение 4</label><br>
<label for="value5">Значение 5</label>
<textarea rows="3" id="value5"></textarea><br>
<label for="range">Диапазон</label>
<input type="range" id="range"><br>
<button type="submit">Отправить</button>
</form>

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

Теперь для быстрого оформления нам нужно подключить Bootstrap. Подключаем фреймворк версии 4.1.1 (текущая версия на момент написания статьи). Для этого загружаем актуальную версию с сайта Bootstrap, разархивируем папку и берем из нее папку dist, затем копируем ее содержимое в папку с нашей формой. У вас должно получиться две папки css и js. Вторая нам не пригодится.

На следующем этапе подключаем файл css фреймворка.

<link rel="stylesheet" href="css/bootstrap.min.css">

Далее помещаем каждый элемент формы в контейнер

<div class="form-group">....</div>

Для каждого значения input и textarea, а также select добавляем класс  class="form-control", кроме input с типом checkbox и radio. В последнем случае добавляем class="form-check-input". Для кнопки подставляем класс class="btn btn-primary". Для input type range подставляем класс class="custom-range".

Для того, чтобы увеличить или уменьшить элемент формы можно добавить в основной класс input значения form-control-lg (увеличение) и form-control-sm (уменьшение).

Для лучшено формления chekbox исаользуем следующий код

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="Check1">
  <label class="custom-control-label" for="Check1">Значение 3</label>
</div>

Для radio подставляет следующией код

<div class="custom-control custom-radio">
 <input type="radio" id="Radio1" name="customRadio" class="custom-control-input">
 <label class="custom-control-label" for="Radio1">Значение 4</label>
</div>

Здесь мы имеем основной контейнер div  с классом custom-control custom-checkbox и custom-control custom-radio, а также сами элементы с классами для checkbox и radio - custom-control-label.

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

Код данной формы:

<link rel="stylesheet" href="css/bootstrap.min.css">
<div class="container">
<form>
<div class="form-group">
<label for="value1">Значение 1</label>
<input class="form-control" type="text" name="value1" id="value1">
</div>
<div class="form-group">
<label for="value1">Значение 2</label>
<select class="form-control" name="value2" id="value2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Check1">
<label class="custom-control-label" for="Check1">Значение 3</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="Radio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="Radio1">Значение 4</label>
</div>
<div class="form-group">
<label for="value5">Значение 5</label>
<textarea class="form-control" rows="3" id="value5"></textarea>
</div>
<div class="form-group">
<label for="range">Диапазон</label>
<input class="custom-range" type="range" id="range">
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
</div>



Итак, мы за несколько минут визуально оформили HTML код нашей формы. Здесь необходимо помнить, что для каждого элемента подставляются свои классы. Более подробную инструкцию по оформлению при помощи bootstrap можно прочитать на официальном сайте bootstrap фреймворка.