Другое

Что такое тег «input» в HTML, его значение и свойства, для чего он нужен

Lorem ipsum dolor

Знать, что такое «input» в HTML, должен каждый верстальщик и веб-разработчик. Даже если по каким-то причинам вы до сих вор в верстке сайта не сталкивались с этим тегом, это всего лишь вопрос времени. Тег «input» — это один из самых часто используемых и самых важных тегов. Он применяется для определения области ввода какой-либо информации пользователями. В основном его используют при программировании HTML-форм, однако он может применяться и в качестве самостоятельного элемента.

 

Что такое «input»?

Тег «input» был введен еще в первых версиях HTML. Напомним, что сейчас актуален HTML 5, а «input» появился в HTML 3 и XHTML 1.0. Это тег, который поддерживается всеми основными современными браузерами. Его поддержку ввели в:

  • Internet Explorer 3.0;

  • Google Chrome 1.0;

  • Opera 4.0;

  • Safari 1.0;

  • Firefox 1.0;

  • Android 1.0;

  • iOS 1.0;

  • Edge 1.0;

  • и др.

То есть проблем с использованием тега «input» нет, поэтому применять этот тег можно в любых проектах. Итак, мы уже писали, что данный тег используется для обозначения поля для ввода какой-то информации пользователем. Вводимая информация может быть разной, например:

  • текстовое сообщение;

  • аудиофайлы;

  • видеоконтент;

  • изображения;

  • и др.

Также при помощи «input» можно определить:

  • кнопку для отправки сообщения или формы;

  • радио-переключатель выбора одного элемента из нескольких;

  • множественный выбор из нескольких элементов;

  • скрытые поля;

  • поля для защищенной информации, например, поле для пароля;

  • и мн. др.

Чтобы задать тегу «input» какое-то назначение, нужно использовать соответствующий атрибут. Атрибутов у этого тега очень много. Сегодня представим вашему вниманию основные из них.

 

Тег «input» в HTML: атрибуты

Самый важный атрибут тега «input» это «type». Данный атрибут оповещает обозревателей интернета, к какому типу следует относить HTML-компонент, определенный тегом «input». Например:

  • "type=text" — оповестит о простой текстовой области;

  • "type=password" — что текстовая область предназначена для написания пароля;

  • "type=radio" — что перед пользователем открывается радио-переключатель, где он может выбрать один элемент из нескольких;

  • "type=checkbox" — оповестит браузер, что перед пользователем открывается множественный выбор из нескольких элементов;

  • "type=button" — определит обычную кнопку;

  • "type=submit" — определит кнопку для отправки формы;

  • "type=file" — оповестит браузер, что пользователь может через это поле отправить какой-либо файл;

  • "type=reset" — определит кнопку, нажав на которую можно очистить заполненную форму;

  • и др.

 

Дополнительные атрибуты тега «input» в HTML

Название атрибутов

В каких ситуациях используется

Короткое описание атрибута

Accept

Используется для: аудио, изображений, видео и загрузки файлов.

Определяет форматы файлов, которые пользователь может загрузить через поле «input».

Alt

Используется для изображения.

Является альтернативным текстом изображений. Когда браузер не может отобразить изображение, он будет отображать альтернативный текст.

Autocomplete

Для текстовых полей.

Определяет, активно ли автозаполнение текстовых полей.

Checked

Используется в чек-боксах.

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

Form

Используется для полей формы.

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

Formtarget

Используется для форм.

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

Height

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

Задает высоту HTML-элементам.

Max и Min

Используются в числосодержащих полях.

Задают максимальное и минимальное числовое значение, которое может ввести пользователь.

Name

Используется в полях формы.

Задает имена полям, созданным тегом «input». Одно и то же имя может применяться для нескольких полей.

Placeholder

Используется в текстовых полях.

Определяет предварительно заполненный текст текстового поля, который служит подсказкой для пользователя.

Readonly

Используется в полях формы.

Ограничивает пользователям возможность что-либо писать в поле, так как разрешает «только читать».

Required

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

Определяет обязательное заполнение поля. Если поле не заполнить, тогда форма не будет отправлена.

Size

Используется для текстовых полей.

Может определить ширину текстового поля в количестве видимых символов.

Src

Используется для изображений.

Определяет ссылку на изображение, например, когда создается «input» кнопки с изображением.

Width

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

Определяет ширину элемента, определенного тегом «input».

Value

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

Определяет значение текстового элемента.

  1. Что такое тег «input»: пример использования

Чтобы лучше понять, что такое «input», нужно посмотреть код его реального применения.

Давайте посмотрим вот такой код:

<!DOCTYPE html>

<html>

<head>

<title>HTML-формы: что такое тег input</title>

</head>

<body>

<form>

Имя: <input type = "text" name = "PeopleFirstName" value = "Введите имя"> <br> <br>

Фамилия: <input type = "text" name = "PeopleLastName"value = "Введите фамилию"> <br> <br>

Мужчина <input type = "radio" name = "SelectSex"value = "man" checked>

Женщина <input type = "radio" name = "SelectSex"value = "woman"> <br> <br>

О себе: <br>

<input type = "checkbox" name = "SelectType1" value = "low">Меньше 18<br>

<input type = "checkbox" name = "SelectType2" value = "2old">От 18 до 35<br>

<input type = "checkbox" name = "SelectType3" value = "high">Больше 35<br>

<input type = "checkbox" name = "SelectType4" value = "busy">Женат /-а<br>

<input type = "checkbox" name = "SelectType5" value = "cat">Есть кошка<br>

<br>

<input type = "submit" name = "SubmitButton" value = "Отправить">

</form>

</body>

</html>

Результат работы этого кода будет таким:

 

Заключение

Что такое «input»? Это тег, который лежит в основе создания HTML-форм. Без него не обходится практически ни одна верстка, потому что сейчас уже почти нет сайтов, где не использовались бы контактные формы.

Тег «input» в HTML имеет принципиальное значение. Сегодня мы лишь слегка коснулись его возможностей.

Схожие статьи

Другое

Что такое передача данных? Как она работает в телефоне?

Движок Source и Source 2: определение, технические характеристики и отличия
Другое

Движок Source и Source 2: определение, технические характеристики и отличия

Геттеры и сеттеры Java. Где применяются, какие у них различия?
Другое

Геттеры и сеттеры Java. Где применяются, какие у них различия?

Как стать фрилансером-программистом и с чего начинать свой путь
Другое

Как стать фрилансером-программистом и с чего начинать свой путь