Текстовые поля и fieldset

Форма записи на курс LearnUp состоит из полей ввода, подписей и кнопки. В daisyUI у поля ввода свой компонент — input, у многострочного поля — textarea, а подписи и группировку даёт компонент fieldset.

Поле ввода

Класс input ставят прямо на <input>:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<input type="text" placeholder="Ваше имя" class="input">

Поле с рамкой, скруглением и подсветкой при фокусе. Цвет рамки меняют модификаторы input-primary, input-error и другие, размер — input-sm, input-lg. Многострочное поле оформляют так же: <textarea class="textarea">.

Подписи и fieldset

Fieldset — HTML-тег, который группирует связанные поля, а legend — заголовок группы. daisyUI даёт им классы fieldset и fieldset-legend, а подписи и подсказки внутри оформляются классом label:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<fieldset class="fieldset w-xs rounded-box border border-base-300 bg-base-200 p-4">
  <legend class="fieldset-legend">Запись на курс</legend>
 
  <label class="label" for="name">Имя</label>
  <input id="name" type="text" class="input" placeholder="Анна">
 
  <label class="label" for="email">Email</label>
  <input id="email" type="email" class="input" placeholder="anna@example.com">
  <p class="label">На этот адрес придёт ссылка на курс.</p>
 
  <button class="btn btn-primary mt-4">Записаться</button>
</fieldset>

Серая панель с заголовком «Запись на курс», двумя подписанными полями, бледной подсказкой и кнопкой. fieldset сам расставляет элементы колонкой с ровными промежутками, а w-xs — утилита Tailwind, задающая ширину. Атрибут for у подписи связывает её с полем: щелчок по слову «Имя» ставит курсор в поле.

Поле во всю ширину

Поля по умолчанию имеют фиксированную ширину. Растянуть поле на всю ширину колонки помогает утилита w-full:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<fieldset class="fieldset p-4">
  <legend class="fieldset-legend">Отзыв о курсе</legend>
  <textarea class="textarea w-full" placeholder="Что понравилось?"></textarea>
  <p class="label">Не больше 500 символов.</p>
</fieldset>

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

Текст внутри поля

Если input поставить на <label>, а сам <input> положить внутрь без класса, внутри рамки рядом с полем можно разместить текст или значок:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<label class="input m-4">
  <span class="label">https://</span>
  <input type="text" placeholder="anna.example.com">
</label>

Поле для адреса сайта с серой приставкой «https://» внутри рамки. Рамку и фокус теперь рисует <label>, а <input> занимает оставшееся место.

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

Искать класс form-control, знакомый по статьям о daisyUI 4. В пятой версии его нет, как и label-text: строка с таким классом просто не получит стилей. Группируйте поля в fieldset, а подписи и подсказки оформляйте классом label.

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