Тег <input>

Тег <input> (укр. – “поле введення”) використовується для створення різних типів полів введення в HTML-формах. Цей тег дозволяє користувачам вводити текст, вибирати значення, завантажувати файли, надсилати дані тощо. Поля введення є базовими елементами для створення інтерактивних веб-додатків.

Атрибути

Специфічні атрибути

• type — визначає тип поля введення. Основні значення:
  • text — текстове поле.
  • password — поле для прихованого введення (паролі).
  • email — поле для введення електронної пошти.
  • number — числове поле.
  • checkbox — прапорець.
  • radio — перемикач.
  • submit — кнопка для відправки форми.
  • file — поле для вибору файлу.

Наприклад:

<input type="text" name="username">

• name — задає ім’я елемента, яке використовується для передачі значення на сервер або обробки даних. Наприклад:

<input type="text" name="username">

• placeholder — текст-заповнювач, який відображається у порожньому полі введення. Наприклад:

<input type="text" name="username" placeholder="Введіть ім'я">

• value — встановлює початкове значення для елемента введення. Наприклад:

<input type="text" value="Текст за замовчуванням">

• required — робить поле обов’язковим для заповнення перед відправленням форми. Наприклад:

<input type="email" required>

• readonly — забороняє змінювати значення поля. Наприклад:

<input type="text" value="Тільки для читання" readonly>

• disabled — відключає елемент, роблячи його недоступним для взаємодії. Наприклад:

<input type="text" value="Недоступно" disabled>

• maxlength — задає максимальну кількість символів для введення. Наприклад:

<input type="text" maxlength="20">

• checked — встановлює початковий стан прапорця або перемикача (для checkbox та radio). Наприклад:

<input type="checkbox" name="agree" checked>

• autocomplete — вказує браузеру, чи слід заповнювати поле автоматично (on або off). Наприклад:

<input type="text" autocomplete="off">

Глобальні атрибути

Тег <input> підтримує всі глобальні атрибути HTML, включаючи:

• id — унікальний ідентифікатор для елемента. Наприклад:

<input type="text" id="user-id">

• class — клас для застосування стилів через CSS. Наприклад:

<input type="text" class="form-input">

• style — інлайн-стилізація елемента. Наприклад:

<input type="text" style="border: 1px solid black;">

• title — опис елемента, що може бути відображений при наведенні. Наприклад:

<input type="text" title="Введіть ім'я користувача">

• lang — визначає мову для контенту. Наприклад:

<input type="text" lang="uk">

Приклад використання

<form>
  <label for="username">Ім'я користувача:</label>
  <input type="text" id="username" name="username" placeholder="Введіть ім'я" required>

  <label for="user-email">Електронна пошта:</label>
  <input type="email" id="user-email" name="user-email" placeholder="[email protected]" required>

  <label>
    <input type="checkbox" name="agree" required>
    Я погоджуюсь з умовами
  </label>

  <button type="submit">Надіслати</button>
</form>

Додаткові моменти

• Тег <input> є одинарним (самозакриваючий), тому він не потребує закриваючого тегу.
• Якщо значення поля введення не встановлено через атрибут value, то воно не відображається в полі введення до того, як користувач почне вводити текст або інші дані.
• Якщо поля форми обробляються за допомогою JavaScript (наприклад, через fetch або axios), атрибути name та value стають ключовими для передачі даних у форматі JSON.
• Для полів введення варто використовувати теги <label> із пов’язаними атрибутами for для покращення доступності.
• Поля введення можна стилізувати за допомогою CSS, враховуючи псевдокласи, такі як :focus, :disabled, і :valid.
• HTML надає вбудовані можливості для валідації, але їх можна розширити за допомогою JavaScript.
• Використовуйте атрибут autocomplete=”off”, якщо не бажаєте, щоб браузер пропонував збережені значення.