Поле введення

Доберіть тип HTML-поля відповідно до значення та додайте підпис до кожного поля.

#Зв’язок поля з підписом

Якщо підпис і поле розділено, вкажіть у for унікальний id поля. Можна також вкласти поле в підпис. В обох випадках натискання підпису передає фокус у поле.

<div>
  <label for="input-display-name">Відображуване ім’я</label>
  <input id="input-display-name" type="text" autocomplete="nickname" />
</div>
<label>
  Електронна пошта
  <input type="email" autocomplete="email" />
</label>

Відображуване ім’я

Електронна пошта

#Типи полів

Елемент input без type працює як текстове поле. Trace CSS оформлює наведені нижче типи. Елементи вибору дати, часу й кольору надає браузер, тому вони можуть різнитися між платформами.

<label>
  Типове текстове поле
  <input />
</label>
<label>
  Текст
  <input type="text" />
</label>
<label>
  Пошук
  <input type="search" />
</label>
<label>
  Електронна пошта
  <input type="email" />
</label>
<label>
  Сайт
  <input type="url" />
</label>
<label>
  Телефон
  <input type="tel" />
</label>
<label>
  Пароль
  <input type="password" autocomplete="new-password" />
</label>
<label>
  Число
  <input type="number" />
</label>
<label>
  Дата
  <input type="date" />
</label>
<label>
  Місцеві дата й час
  <input type="datetime-local" />
</label>
<label>
  Місяць
  <input type="month" />
</label>
<label>
  Тиждень
  <input type="week" />
</label>
<label>
  Час
  <input type="time" />
</label>
<label>
  Колір
  <input type="color" value="#005473" />
</label>

Типове текстове поле Текст Пошук Електронна пошта Сайт Телефон Пароль Число Дата Місцеві дата й час Місяць Тиждень Час Колір

#Стани поля

Атрибут disabled робить поле недоступним. Атрибут readonly забороняє редагувати значення, зберігаючи можливість його побачити й виділити. У разі помилки валідації задайте aria-invalid="true" і зв’яжіть поле з видимим повідомленням через aria-describedby.

<label>
  Недоступно
  <input type="text" value="Недоступно" disabled />
</label>
<label>
  Лише читання
  <input type="text" value="Ідентифікатор облікового запису" readonly />
</label>
<label>
  Електронна пошта
  <input type="email" value="помилка" aria-invalid="true" aria-describedby="input-error" />
</label>
<small id="input-error">Введіть дійсну адресу електронної пошти.</small>

Недоступно Лише читання Електронна пошта Введіть дійсну адресу електронної пошти.

Кольори, межі й відступи задають токени полів введення.

#Класи розширень

Повна збірка додає trace-small і trace-large. Середній розмір застосовується типово.

<input type="text" class="trace-small" placeholder="Малий" aria-label="Мале поле" />
<input type="text" placeholder="Середній" aria-label="Середнє поле" />
<input type="text" class="trace-large" placeholder="Великий" aria-label="Велике поле" />

Щоб додати іконку, розмістіть її та поле безпосередньо в trace-input-wrap. На обгортці іконки вкажіть trace-input-icon-start або trace-input-icon-end.

<label>
  Пошук
  <span class="trace-input-wrap">
    <span class="trace-icon trace-input-icon-start"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="m21 21-4.34-4.34" />
  <circle cx="11" cy="11" r="8" />
</svg>
</span>
    <input type="search" placeholder="Пошук у документації" />
  </span>
</label>

Пошук