Формы

Bulma оформляет поля формы так же, как кнопки: одинаковая высота, рамка, скругление и цвета состояний. Каждое поле собирается из двух обёрток. Field (field) — строка формы: подпись, поле и подсказка, с отступом снизу. Control (control) — обёртка вокруг самого поля, к которой крепятся иконки и индикатор загрузки.

Поле с подписью

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="field">
  <label class="label" for="guest-name">Имя</label>
  <div class="control">
    <input class="input" id="guest-name" type="text" placeholder="Анна">
  </div>
</div>

Жирная подпись и поле на всю ширину со скруглёнными углами. Сами поля получают классы по типу: input, textarea, а список — обёртку select.

Форма бронирования

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<form style="max-width: 420px">
  <div class="field">
    <label class="label" for="guests">Гостей</label>
    <div class="control">
      <div class="select">
        <select id="guests">
          <option>2</option>
          <option>4</option>
          <option>6</option>
        </select>
      </div>
    </div>
  </div>
 
  <div class="field">
    <label class="label">Зал</label>
    <div class="control radios">
      <label class="radio"><input type="radio" name="hall" checked> Основной</label>
      <label class="radio"><input type="radio" name="hall"> Терраса</label>
    </div>
  </div>
 
  <div class="field">
    <label class="label" for="wishes">Пожелания</label>
    <div class="control">
      <textarea class="textarea" id="wishes" rows="3" placeholder="Например, стол у окна"></textarea>
    </div>
  </div>
 
  <div class="field">
    <div class="control">
      <label class="checkbox"><input type="checkbox"> Напомнить по SMS</label>
    </div>
  </div>
 
  <div class="field is-grouped">
    <div class="control"><button class="button is-primary">Забронировать</button></div>
    <div class="control"><button type="reset" class="button is-light">Очистить</button></div>
  </div>
</form>

Выпадающий список со стрелкой, два переключателя в строку, многострочное поле, флажок и две кнопки рядом. Обёртка field is-grouped ставит несколько control в ряд.

Состояния и подсказки

Цветовой модификатор красит рамку поля, а абзац help под ним объясняет, что не так:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 
<div class="field">
  <label class="label" for="email">Email</label>
  <div class="control has-icons-left">
    <input class="input is-danger" id="email" type="email" value="anna@example">
    <span class="icon is-small is-left"><i class="fa-solid fa-envelope"></i></span>
  </div>
  <p class="help is-danger">Проверьте адрес: не хватает домена.</p>
</div>

Поле с красной рамкой, значком конверта слева и красной подсказкой. Иконки Bulma не содержит: здесь их даёт подключённый Font Awesome, а control has-icons-left и icon is-left выставляют значок внутри поля.

Поле с кнопкой

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="field has-addons">
  <div class="control is-expanded">
    <input class="input" type="text" placeholder="Промокод">
  </div>
  <div class="control">
    <button class="button is-info">Применить</button>
  </div>
</div>

Поле и кнопка склеены в один блок; is-expanded растягивает поле на всё свободное место.

Класс	Где	Что делает
`is-small`, `is-medium`, `is-large`	поле	Размер
`is-rounded`	`input`	Скруглённые края
`is-loading`	`control`	Индикатор загрузки в поле
`is-horizontal`	`field`	Подпись слева от поля

Частая ошибка

Ставить класс select на сам тег <select>. Стрелку Bulma рисует на обёртке, поэтому правильно <div class="select"><select>...</select></div>. Без обёртки список останется в стиле браузера.

Спасибо, что читаете!