5 самых полезных атрибутов элемента ввода, которые вы должны знать

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

В этом блоге мы собираемся обсудить именно это. Я объясню вам о теге ввода и 5 обязательных атрибутах ввода, которые используются для веб-разработки.

Входной тег

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

Входной тег очень мощный и сложный для большого количества комбинаций входных типов и атрибутов.

Возьмем пример входного тега. Здесь мы взяли входной тег для ввода имени, в котором пользователь может заполнить минимум 4 символа своего имени и максимум 8 символов.

На изображении ниже показано, как HTML-код будет отображаться в редакторе.

На изображении ниже показано, как приведенный выше вывод будет отображаться в браузере.

Таким образом, вы можете принимать данные от пользователя. Существует много типов входных тегов. Вот некоторые из них: текст, кнопка, флажок, радио, локальная дата и время, диапазон, поиск. Следует отметить, что значение атрибута type по умолчанию — «текст».

Важно отметить, что поведение <input> существенно меняется в зависимости от значения его атрибута type; в результате различные виды описываются на отдельных справочных страницах. Если это свойство не указано, текстовый тип будет использоваться как значение по умолчанию.

Входные атрибуты

Элемент <Input> очень мощный благодаря своим атрибутам. Из этого очень важен атрибут type. Поскольку каждый элемент <input>, независимо от типа, основан на интерфейсе HTMLInputElement, это связано с тем, что они оба имеют почти одинаковый набор атрибутов. Однако на самом деле это влияет на определенный тип подмножества типа ввода. Кроме того, некоторые атрибуты влияют на тип ввода, но могут отличаться для разных атрибутов.

Здесь мы перечислили некоторые важные атрибуты типа ввода, которые разработчик должен знать очень хорошо:

• Минимальная длина
• Максимальная длина
• Неполноценный
• Автофокус
• Заполнитель

Минидлина

Этот атрибут работает только с текстом, поиском, телефоном, URL-адресом, электронной почтой или паролем в элементе ввода. Атрибут minlength указывает минимальное количество символов, которое должно быть введено в поле ввода, например единицы кода UTF-16.

Это должно быть неотрицательное целочисленное значение, меньшее или равное значению, указанному в maxlength. Если для minlength не задано значение или указано недопустимое значение, то вход не имеет минимальной длины. Отправка формы завершится ошибкой, если в поле ввода введено меньше символов, чем минимальная длина.

На изображении ниже показано, как HTML-код будет отображаться в редакторе.

На изображении ниже показано, как приведенный выше вывод будет отображаться в браузере.

Максимальная длина

Этот атрибут также работает только с текстом, поиском, телефоном, URL-адресом, адресом электронной почты или паролем в элементе ввода, таком как minilength. Атрибут maxlength указывает максимальное количество символов, которые можно ввести в поле ввода, например единицы кода UTF-16.

Это должно быть неотрицательное целое значение, большее или равное значению, указанному в minlength. Если значение maxlength не задано или указано недопустимое значение, то вход не имеет максимальной длины.

По умолчанию браузеры запрещают пользователю вводить количество символов в поле ввода, если оно превышает указанную максимальную длину.

На изображении ниже показано, как HTML-код будет отображаться в редакторе.

На изображении ниже показано, как приведенный выше вывод будет отображаться в браузере.

Неполноценный

Это логический атрибут. Этот атрибут указывает, что пользователь не должен взаимодействовать с вводом.

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

На изображении ниже показано, как HTML-код будет отображаться в редакторе.

На изображении ниже показано, как приведенный выше вывод будет отображаться в браузере.

Автофокус

Это также логический атрибут, такой как отключенный атрибут. Это указывает на то, что поле ввода становится в фокусе, когда страница завершает процесс загрузки. Или когда отображается элемент ввода, содержащий атрибут автофокуса.

Не более одного элемента получили атрибут автофокуса. Если поместить более одного элемента, первый с атрибутом будет сфокусирован, поскольку скрытые входы не могут быть сфокусированы. Таким образом, атрибут автофокуса можно использовать со скрытыми типами ввода.

На изображении ниже показано, как HTML-код будет отображаться в редакторе.

На изображении ниже показано, как приведенный выше вывод будет отображаться в браузере.

Заполнитель

Заполнитель — это строковый атрибут. Это атрибут, который дает представление о данных, которые должны быть введены в поле ввода.

Это должно быть слово или короткая фраза, которая намекает на тип данных, которые нужно ввести в поле ввода, а не объяснение. Так, например, если ожидается, что поле будет содержать имя пользователя, а его метка — «Имя», подходящим заполнителем может быть «например, Брюс».

На изображении ниже показано, как HTML-код будет отображаться в редакторе.

На изображении ниже показано, как приведенный выше вывод будет отображаться в браузере.

Подведение итогов

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

Несмотря на то, что день ото дня добавляется множество новых атрибутов, в том числе в HTML, это лишь некоторые из обязательных атрибутов.

Я надеюсь, что этот блог был полезен для вас! Нужна помощь в веб-разработке или веб-дизайне? Не стесняйтесь связаться с нами!

Монтажер: Амрута