Элементы управления формой: типы input, select, textarea
Используйте поля input для текста, электронной почты, чисел, дат, флажков, переключателей, диапазонов, файлов и цветов вместе с элементами select и textarea.
«Элементы управления формой: типы input, select, textarea» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Полный набор типов полей ввода
HTML5 представил множество специализированных типов полей ввода помимо обычного текста. Каждый тип сообщает браузеру, какие данные следует ожидать, благодаря чему становятся доступны встроенная проверка, подходящие клавиатуры на мобильных устройствах и системные элементы управления.
Поля для текста, поиска и веб-адресов
type="text" — обычный запасной вариант для текста. type="search" предлагает клавиатуру, оптимизированную для поиска, и часто отображает кнопку очистки. type="url" проверяет формат веб-адреса и показывает на мобильном устройстве клавиатуру для ввода адресов.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">Электронная почта и телефон
type="email" проверяет формат адреса электронной почты и показывает оптимизированную для него клавиатуру с клавишей @. type="tel" показывает цифровую телефонную клавиатуру, но не проверяет формат, поскольку телефонные форматы различаются в разных странах.
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Типы для чисел, диапазонов и дат
type="number" используется с min/max/step для числовых данных. type="range" — для ползунков. type="date", type="time", type="datetime-local" — для данных о дате и времени со встроенными средствами выбора.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Флажки и радиокнопки
Флажки работают независимо друг от друга. Радиокнопки в одной группе (с одинаковым name) позволяют выбрать только один вариант. Для каждого элемента нужна связанная с ним подпись.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Цвет, файл и скрытое поле
type="color" показывает системное средство выбора цвета. type="file" открывает диалог выбора файла; используйте атрибут accept, чтобы ограничить типы файлов. type="hidden" отправляет данные без элемента управления в интерфейсе.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Выпадающие списки select
Элемент <select> создаёт выпадающий список. Используйте multiple для выбора нескольких значений (обычно это не лучший вариант с точки зрения удобства). Для длинных списков группируйте варианты с помощью <optgroup>.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Многострочное текстовое поле
<textarea> создаёт многострочное поле ввода текста. Используйте rows и cols для задания исходного размера или CSS для более точного управления. Закрывающий тег обязателен, а любое содержимое между тегами становится значением по умолчанию.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — варианты автодополнения
<datalist> предоставляет список подсказок для поля ввода, не ограничивая свободный ввод текста. Свяжите поле ввода со списком datalist с помощью атрибутов list и id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Атрибуты value и name
name — это ключ, отправляемый вместе с данными формы. value задаёт исходное значение. Для флажков и радиокнопок value — это значение, отправляемое при выборе элемента. Для текстовых полей value — это предварительно заполненное содержимое.
Размер поля ввода и placeholder
placeholder показывает текст-подсказку, пока поле ввода пусто. При получении фокуса он исчезает и не заменяет видимую подпись. size задаёт видимую ширину в символах; для изменения размера предпочтительно использовать CSS.
Быстрая проверка
Какой тип поля ввода показывает на мобильном устройстве цифровую клавиатуру и проверяет, что введённое значение является допустимым числом?
Итоги: элементы управления формами
Используйте семантические типы полей ввода: email для адресов электронной почты, number для чисел, date для дат. Используйте select для фиксированного набора вариантов, datalist для автодополнения с подсказками, textarea для многострочного текста. Всегда добавляйте атрибуты name для отправки данных и атрибуты value там, где они нужны.
Часто задаваемые вопросы
Урок «Элементы управления формой: типы input, select, textarea» бесплатный?
Да — полный текст урока «Элементы управления формой: типы input, select, textarea» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Элементы управления формой: типы input, select, textarea»?
Используйте поля input для текста, электронной почты, чисел, дат, флажков, переключателей, диапазонов, файлов и цветов вместе с элементами select и textarea. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Элементы управления формой: типы input, select, textarea»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Элементы управления формой: типы input, select, textarea
- ARIA и доступность: label, role, aria-*
- Семантический HTML5: семантика вместо набора div
- Атрибуты проверки форм