Главная | Все статьи | Код

Что такое input в html?

JavaScript Время чтения статьи ~4 минуты
Что такое input в html? главное изображение

В HTML элемент <input> — один из наиболее часто используемых. Он позволяет пользователю вводить данные в веб-форму. В зависимости от типа элемент <input> может отображаться и работать по-разному.

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Основные типы элемента <input>

Ниже перечислены основные типы элемента <input> с коротким комментарием о его предназначении:

  • Текстовое поле (<input type="text">).

Позволяет вводить однострочный текст.

  • Пароль (<input type="password">).

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

  • Поле для отправки файлов (<input type="file">).

Позволяет загружать файлы с локального компьютера.

  • Флажок (<input type="checkbox">).

Позволяет отметить один или несколько вариантов из множества в предоставленном списке.

  • Переключатель (<input type="radio">).

Позволяет пользователю выбрать только один вариант из группы.

  • Кнопка отправки (<input type="submit">).

Отправляет данные формы на сервер.

  • Поле для ввода электронной почты (<input type="email">).

Предназначается для ввода е-мейла. Может проверять, соответствует ли введенное значение формату электронной почты.

  • Поле для ввода номера телефона (<input type="tel">).

Предназначено для ввода телефонного номера с возможностью проверки формата.

  • Поле для ввода URL (<input type="url">).

Позволяет вводить адрес в интернете.

  • Скрытое поле (<input type="hidden">).

Используется для передачи данных, которые не видны пользователю и не изменяются им.

  • Поле для выбора даты (<input type="date">).

Позволяет пользователю выбрать дату.

  • Поле для выбора времени (<input type="time">).

Позволяет пользователю выбрать время.

Атрибуты элемента <input>

Атрибуты элемента <input> предназначены для настройки его поведения и в некоторых случаях — внешнего вида элементов формы. Вот список самых часто используемых атрибутов с комментарием об их предназначении:

Попробуйте себя в Frontend-разработке

Начать с 5 бесплатных уроков

  • id.

Уникальный идентификатор для элемента, например имени пользователя. Часто используется для связи со скриптом JavaScript.

<input type="text" id="username">
  • name.

Имя элемента, используемое при отправке данных формы.

<input type="text" name="username">
  • value.

Значение элемента по умолчанию. Например, в поле, где нужно подтвердить согласие на обработку персональных данных.

<input type="text" value="Yes">
  • placeholder.

Текст-подсказка, отображаемый в пустом поле.

<input type="text" placeholder="Введите ваше имя">
  • required.

Указывает, что поле обязательно для заполнения.

<input type="text" required>
  • readonly.

Поле доступно для просмотра, но не для редактирования.

<input type="text" readonly value="Только для чтения">
  • disabled.

Отключает элемент, делая его недоступным для взаимодействия.

<input type="text" disabled value="Отключено">
  • maxlength.

Ограничивает максимальное количество вводимых символов.

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

- min и max.

Устанавливают минимальное и максимальное допустимое значение для числовых и датированных полей.

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

<input type="date" min="2023-01-01" max="2023-12-31">
  • step.

Определяет шаг изменения значения для числовых полей, например при указании цены.

<input type="number" step="0.01">
  • pattern.

Устанавливает шаблон для проверки вводимых данных, например формулы или номера телефона.

<input type="text" pattern="[A-Za-z]{3,}">

Примеры использования элемента <input> в формах

С элементами типа <input> сталкивался любой пользователь интернета. Регистрация на любом сайте, отправка письма, подписка на рассылку — всё, что делается через формы, задействует этот элемент. Возможность связывать формы со скриптами JavaScript позволяет владельцам сайтов настраивать взаимодействие с пользователями как угодно.

Рассмотрим популярный пример — форму регистрации на сайте:

<form action="/register" method="post">

<label for="username">Имя пользователя:</label>

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

<label for="email">Email:</label>

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

<label for="password">Пароль:</label>

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

<input type="submit" value="Регистрация">

</form>

Как видите, в одной простой форме регистрации элемент <input> использовался четыре раза. То есть элемент этот распространенный и востребованный, хотя и довольно простой.

Рекомендуем попробовать

5 бесплатных уроков Frontend

Заключение

Элемент <input> в HTML важен для создания интерактивных веб-форм. За счет многочисленных типов и атрибутов этого элемента разработчик может гибко настраивать ввод данных и обеспечивать удобство для конечных пользователей.

Похожие статьи
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 5 декабря
профессия
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 5 декабря
профессия
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 5 декабря
профессия
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 5 декабря
профессия
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 5 декабря
профессия
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 5 декабря
профессия
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 5 декабря
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 5 декабря
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 5 декабря
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
Старт 5 декабря