Інші типи input в HTML

Вивчаємо додаткові типи HTML input: email, number, url, tel, search, color, date, month, week, datetime-local та range.

Інші типи input в HTML

HTML має багато спеціальних типів поля input. Вони допомагають користувачу вводити дані у правильному форматі та додають зручні елементи керування.

email — поле для введення електронної пошти.
number — поле для чисел.
url — поле для посилань.
tel — поле для номера телефону.
search — поле пошуку.
color — вибір кольору.
date — вибір дати.
month — вибір місяця.
week — вибір тижня.
datetime-local — дата та час.
range — повзунок значення.

Email

Тип email використовується для введення електронної адреси. Браузер може перевіряти правильність формату.

<input 
  type="email"
  placeholder="example@mail.com"
>

Number

<input
  type="number"
  min="1"
  max="100"
>

Дозволяє вводити тільки числові значення. Атрибути min та max задають межі.

URL

<input
  type="url"
  placeholder="https://site.com"
>

Телефон

<input
  type="tel"
  placeholder="+380..."
>

Пошук

<input
  type="search"
  placeholder="Пошук..."
>

Вибір кольору

<input
  type="color"
>

Дата і час

<input type="date">

<input type="month">

<input type="week">

<input type="datetime-local">

Повзунок range

Тип range створює повзунок для вибору числового значення.

<input
  type="range"
  min="0"
  max="100"
  value="50"
>

Приклад форми з різними input

<form>

  <label>
    Email:
    <input type="email">
  </label>

  <br>

  <label>
    Вік:
    <input type="number">
  </label>

  <br>

  <label>
    Сайт:
    <input type="url">
  </label>

  <br>

  <label>
    Дата:
    <input type="date">
  </label>

  <br>

  <label>
    Колір:
    <input type="color">
  </label>

</form>

❗ Важливо:

Спеціальні типи input покращують взаємодію з користувачем: на телефоні відкривається потрібна клавіатура, а браузер може виконувати базову перевірку введених даних.

Практичне завдання

📌 Завдання:

№1. Створіть форму з різними типами input.
№2. Додайте поля email, number, url та tel.
№3. Додайте вибір дати, кольору та повзунок range.

<!-- Початковий код -->

<form>

</form>

💡 Показати підказку

Для кожного поля використовуйте свій type: email, number, url, tel, color, date або range.

✅ Показати відповідь

<form>

  <input type="email">

  <input type="number">

  <input type="url">

  <input type="tel">

  <input type="date">

  <input type="color">

  <input type="range">

</form>