Елемент <input>

Універсальний елемент для створення різноманітних полів введення. Тип поля визначається атрибутом type, значення якого за замовчуванням text - однорядкове текстове поле, що приймає будь-які символи.

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

Концептуально тег <input> представляє запис у словнику, який відправляється на сервер. Атрибут name визначає ім'я цього запису, а значення - це те, що ввів користувач. Ім'я поля повинно бути унікальним всередині форми. Значення атрибута name також використовується при роботі з формою в JavaScript.

Атрибут autofocus

Поле введення, якому заданий цей атрибут, автоматично отримає фокус під час завантаження сторінки, і в ньому можна відразу набирати текст. За замовчуванням атрибут не встановлений для жодного поля.

Оскільки фокус не може бути у кількох елементів одночасно, атрибут задається полю, з якого користувачеві варто почати заповнювати форму. Атрибут autofocus - логічний, тобто без значення, вказується тільки назва.

Корисно

Через особливості платформи з прикладами, поле введення імені користувача не отримує фокус під час завантаження сторінки. Роботу цього коду можна перевірити у себе в редакторі.

Атрибут placeholder

Дозволяє відображати текст-підказку про те, які дані необхідно ввести в поле, коли елемент <input> порожній. Цей атрибут можна використовувати в будь-якому елементі форми, де є текстове введення.

Корисно

Текст-підказка не замінює хороший <label>, а доповнює його демонстрацією прикладу типу даних, які слід вводити. Placeholders in Form Fields Are Harmful - відео про те, як правильно проектувати доступні і легкі у використанні елементи форм з мітками і підказками.

Пошта і пароль

Значення атрибута type впливає на тип поля, набір символів, які в нього можна ввести і подальшу валідацію значення. Наприклад, якщо браузер смартфона бачить поле з типом email, він відображає користувачеві спеціальну клавіатуру для введення електронної пошти з легко доступним символом @. Браузер також може надати спосіб вибрати адресу електронної пошти з адресної книги.

Для типу password, значення пароля, що вводиться, буде візуально підмінено на маркери з міркувань безпеки. Атрибути minLength і maxLength - не обов'язкові. Вони дозволяють обмежити кількість символів, які можна ввести у полі.

Радіо-кнопки (перемикачі)

Якщо задати атрибуту type значення radio - інпут перетвориться у перемикач (радіо-кнопку, radio button). Радіо-кнопки завжди йдуть групами, що дозволяє користувачеві вибрати одне з безлічі визначених значень.

Кожній радіо-кнопці в групі задається однакове значення атрибута name, інакше браузер не знатиме, що це група.

На відміну від текстових полів, в радіо-кнопку не можна вводити дані, тому кожній з них необхідно вказати значення в атрибуті value. Це значення, яке буде передане на сервер, коли користувач відправить форму.

Логічний атрибут checked вказує на те, який перемикач буде обраний (відмічений) за замовчуванням. У групі радіо-кнопок в стані checked може бути тільки один елемент.

Чекбокси (прапорці)

Прапорці (чекбокси, checkbox) схожі на перемикачі, але дозволяють вибирати довільну кількість значень, тобто багато з багатьох. Чекбоксів може бути ціла група, наприклад, вибір хобі, або тільки один, наприклад, прийняття згоди користувача під час реєстрації.

Числа

Звичайні текстові поля приймають буквально все: цифри, літери, пробіли, розділові знаки тощо. Для того, щоб дозволити вводити тільки числа, з можливістю обмежити діапазон, використовується тип поля number. При введенні даних у числове поле браузер автоматично ігнорує всі символи, крім цифр.

<label>
  Age
  <input type="number" name="age" value="0" min="18" max="120" />
</label>

Звичайно ж, існує багато чисел, які не підходять для кожного типу числових даних. Наприклад, може бути необхідно заборонити введення занадто великих, або від'ємних чисел. Ця проблема вирішується за допомогою атрибутів min і max, які визначають діапазон введення.

За замовчуванням числові поля приймають тільки цілі числа. Цю поведінку можна змінити за допомогою атрибута step, який вказує крок зміни числа. За замовчуванням значення кроку дорівнює 1.

Телефонні номери

Тип tel створює поле введення телефонних номерів, які можуть бути представлені у різних форматах. Зараз єдина користь від застосування поля типу tel полягає у відображенні віртуальної клавіатури для введення телефонних номерів у мобільних браузерах, яка містить цифри, але не літери.

<form>
  <label>
    Phone number
    <input type="tel" name="phone_number" />
  </label>

  <button type="submit">Submit</button>
</form>

Повзунки

Тип range використовується для створення повзунків з цілими і дробовими значеннями. Атрибути min і max встановлюють діапазон значень, а step контролює крок. Щоб встановити значення, потрібно просто перетягнути повзунок у потрібну позицію між мінімальним і максимальним значеннями.

Цікаво

Браузери не надають жодної візуальної зворотної інформації про встановлене значення. Це робиться за допомогою JavaScript і додаткової розмітки.

Дата та час

У браузерах є вбудований календар, в якому користувач може вибрати необхідну дату та/або час. Атрибути min і max дозволяють встановити мінімальні і максимальні дати, за умови використання правильного формату.

Цікаво

Через різний зовнішній вигляд у різних браузерах і складність його зміни за допомогою CSS, замість нативного календаря найчастіше використовують готові JavaScript-бібліотеки.