1. Текстовые поля

① text (по умолчанию)

• Для чего: Однострочный текст (имя, логин, поиск).

• Особенности:

  • Поддерживает maxlength, placeholder, pattern (регулярные выражения).

  • Нет встроенной валидации (кроме pattern).

html

Copy

Download

Run

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

② password

• Для чего: Пароли (символы скрыты точками ••••).

• Особенности:

  • Браузер может предложить сохранить пароль.

  • Нет встроенной проверки сложности.

html

Copy

Download

Run

<input type="password" name="pwd" required>

③ email

• Для чего: Ввод email.

• Особенности:

  • Автоматическая проверка формата (user@example.com).

  • На мобильных устройствах появляется клавиатура с @.

html

Copy

Download

Run

<input type="email" name="email" required>

④ tel

• Для чего: Номер телефона.

• Особенности:

  • На мобильных открывается цифровая клавиатура.

  • Нет автоматической проверки формата (нужна ручная валидация через pattern).

html

Copy

Download

Run

<input type="tel" name="phone" pattern="[0-9]{10}">

⑤ url

• Для чего: Ввод URL (например, https://example.com).

• Особенности:

  • Проверяет наличие http:// или https://.

  • Не проверяет, существует ли сайт.

html

Copy

Download

Run

<input type="url" name="website">

⑥ search

• Для чего: Поле поиска (визуально может отличаться в браузерах).

• Особенности:

  • В некоторых браузерах есть кнопка очистки (⨉).

html

Copy

Download

Run

<input type="search" name="query">

2. Числа и диапазоны

⑦ number

• Для чего: Ввод чисел (целых или дробных).

• Особенности:

  • Есть стрелки для увеличения/уменьшения значения.

  • Атрибуты: min, max, step (шаг).

html

Copy

Download

Run

<input type="number" name="age" min="1" max="120">

⑧ range

• Для чего: Ползунок для выбора значения в диапазоне.

• Особенности:

  • По умолчанию: min="0", max="100", step="1".

  • Не отображает выбранное число (нужен JavaScript для отображения).

html

Copy

Download

Run

<input type="range" name="volume" min="0" max="100">

3. Даты и время

⑨ date

• Для чего: Выбор даты (календарь).

• Особенности:

  • Формат зависит от локали пользователя.

  • Атрибуты: min, max (ограничение диапазона).

html

Copy

Download

Run

<input type="date" name="birthday">

⑩ time

• Для чего: Выбор времени (ЧЧ:ММ).

html

Copy

Download

Run

<input type="time" name="alarm">

⑪ datetime-local

• Для чего: Дата + время (без учёта часового пояса).

html

Copy

Download

Run

<input type="datetime-local" name="meeting">

4. Выбор вариантов

⑫ checkbox

• Для чего: Несколько вариантов (флажки).

• Особенности:

  • Если name одинаковый, отправляется массив значений.

  • Атрибут checked для выбора по умолчанию.

html

Copy

Download

Run

<input type="checkbox" name="colors" value="red"> Красный

<input type="checkbox" name="colors" value="blue" checked> Синий

⑬ radio

• Для чего: Один вариант из группы.

• Особенности:

  • Все кнопки в группе должны иметь одинаковый name.

html

Copy

Download

Run

<input type="radio" name="gender" value="male"> Мужской

<input type="radio" name="gender" value="female" checked> Женский