Основы создания элементов формы на фреймворке Bulma.

С помощью фреймворка Bulma мы можем очень легко и быстро оформлять элементы форм на веб-страницах сайта.

Подробнее об этом можно почитать в разделе документации Form.

https://bulma.io/documentation/form/general/

Давайте рассмотрим, какие здесь есть возможности. 

Начнем с самого простого, с элемента input. Это текстовое поле и метка (label), которая к нему относится. 

Такой элемент на фреймворке Bulma можно сверстать следующим образом:

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
</div>

Первое, на что нужно обратить внимание, что все элементы форм, с которыми мы будем работать, располагаются в элементе div с классом field. Т.е. это некое поле  формы (field).

Далее идет элемент label. Чтобы применить к нему стили Bulma, добавляем для него класс label.

Далее внутри элемента с классом control мы размещаем сам элемент input, простое текстовое поле. 

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

Давайте еще создадим выпадающий список. 

<div class="field">
  <label class="label">Subject</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </div>
  </div>
</div>

Здесь мы видим аналогичные элементы field и label. Выпадающий список (элемент select) обрамляется в элемент div с классом select. 

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

Мы просто добавляем соответствующий класс, который применяет соответствующие стили для элементов формы.

В документации вы можете найти подробные примеры по каждому элементу формы, как это можно создавать. Для элементов списка, для кнопки, как можно добавлять иконки, в этом могут помочь модификаторы has-icon-left и has-icon-right (имеет иконку слева и справа).

Модификаторы is-small и is-large позволяют уменьшить/увеличить размер модификатора элемента формы. 

Это основы, как создаются элементы формы в фреймворке Bulma. Попробуйте тоже на основании этих примеров создать элементы формы.