Типы тега <іnput> HTML 5, для создания каких элементов управления используется

В HTML существуют разные типы тега для разных ситуаций. Сам тег очень распространен при создании HTML-формы для взаимодействия с посетителями веб-страниц. При этом он может использоваться и вне формы при разработке:

  •  полей для ввода текста;

  •  кнопок разного вида;

  •  переключателей;

  •  компонентов выбора (чекбоксов);

  •  и др.

Доминирующее применение тега — это, конечно, в составе форм и конкретно тега <form>. Тег <input> только собирает какую-либо информацию или реакцию пользователя, а обрабатывают ее какие-то языки программирования, например:

  •  JavaScript;

  •  PHP;

  •  Ruby;

  •  Perl;

  •  и др.

Кстати, до появления HTML5 и тега <form>, тег <input> уже существовал, а с его помощью собирали пользовательские формы. То есть сейчас HTML-форма определяется тегами <form> и </form>, а до HTML5 форма определялась простым блоком «div» и помещенными внутри него элементами <input>. Кстати, споры о том, что использовать для описания HTML-формы, идут до сих пор. Ряд веб-разработчиков и официальные рекомендации к HTML5 советуют всегда использовать тег <form>, так как это помогает программам для плохо видящих людей правильно определять разметку сайта. Однако часть разработчиков советует для описания HTML-форм использовать старый подход с «div», потому что это хоть немного, но защищает от спама. Большинство спам-роботов работают по простому принципу:

  •  они «ходят» по сайтам;

  •  отыскивают теги «form»;

  •  заполняют формы спам-информацией.

В результате владельцы сайтов получают десятки или сотни спам-писем через формы на сайтах. Когда форма обозначена тегами «div», тогда такого не происходит. Защиту от спама на сайтах мы разберем в следующих статьях, а пока давайте вернемся к теме нашей сегодняшней статьи и обсудим, какие типы бывают у тега <input>.

Типы тега <input> в HTML

Типы в HTML представлены широким разнообразием. До появления HTML5 видов было не так много. Практически со всеми «старыми» видами даже начинающие веб-разработчики знакомы. Эти типы определяет их самый главный атрибут — «type». Именно этот атрибут определяет все структурные элементы формы. Атрибут «type» тега <input> может быть таким:

  •  «text» — определяет область для ввода текста;

  •  «password» — определяет область для ввода пароля;

  •  «radio» — определяет значения для радио-переключателя;

  •  «checkbox» — определяет значения чекбокса;

  •  «hidden» — определяет скрытые поля;

  •  «button» — определяет кнопку;

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

  •  «reset» — определяет кнопку для очистки заполненной формы;

  •  «file» — определяет место для загрузки файлов;

  •  «image» — определяет кнопку в виде графического изображения.

Общий синтаксис тега <input> с его атрибутами выглядит так:

  <input «описание атрибутов»>

Атрибуты, описанные выше, — это лишь малая часть, которая определяет основные виды значений в HTML. С приходом HTML5 был добавлен еще ряд атрибутов.

Новые атрибуты, определяющие новые типы тега <input> в HTML

  1. «Accept». С помощью этого атрибута можно установить фильтр на загружаемые файлы в поле загрузки.

  2. «Accesskey». Этот атрибут определяет переход по элементам, используя комбинацию клавиш клавиатуры.

  3. «Align». Регламентирует выравнивание.

  4. «Autocomplete». С помощью этого атрибута можно включить или отключить автозаполнение.

  5. «Autofocus». Определяет фокус в полях формы.

  6. «Border». Поможет определить рамку.

  7. «Checked». Помогает установить значение по умолчанию в чекбоксе.

  8. «Disable». С помощью этого атрибута можно заблокировать доступ к изменению элементов.

  9. «Form». Не путать с тегом формы! Это атрибут, который связывает конкретную область с конкретной формой по идентификатору формы.

  10. «Formaction». Помогает определить программы для обработки формы.

  11. «List». Определяет несколько значений, среди которых можно выбрать готовое решение при заполнении формы.

  12. «Max». Определяет максимальное числовое значение при заполнении формы.

  13. «Min». Определяет минимальное числовое значение при заполнении формы.

  14. «Multiple». Открывает возможность одновременной загрузки нескольких файлов.

  15. «Name». Задает уникальное имя поля, чтобы потом это поле указать в обработчике формы.

  16. «Pattern». Определяет шаблон при вводе информации в форме.

  17. «Placeholder». Помогает вывести подсказывающий текст в текстовом поле.

  18. «Readonly». Запрещает пользователю изменять текущее поле и открывает его только для чтения.

  19. «Required». Определяет поля, которые обязательны для заполнения.

  20. «Size». Помогает определить размер поля для текста.

  21. «Src». Определяет адрес графического изображения для поля.

  22. «Value». Устанавливает значения элементам.

Это не все атрибуты тега, а лишь наиболее популярные и часто используемые.

Разные типы <input> в HTML-примере

Покажем несколько вариантов применения <input> в небольшом HTML-коде:

 <!DOCTYPE HTML>

<html>

 <head>

  <meta charset="utf-8">

  <title>Типы тега input в HTML</title>

 </head>

 <body>

 

 <form name="myFirstForm" method="post" action="input_form.php">

  <p><b>Представьтесь:</b><br>

   <input type="text" size="50">

  </p>

  <p><b>Какой браузер, по вашему мнению, наиболее популярный:</b><Br>

   <input type="radio" name="browser" value="gh"> Google Chrome<Br>

   <input type="radio" name="browser" value="safari"> Safari<Br>

   <input type="radio" name="browser" value="firefox"> Firefox<Br>

  </p>

  <p>Ваше мнение<Br>

   <textarea name="comment" cols="40" rows="3"></textarea></p>

  <p><input type="submit" value="Готово!">

   <input type="reset" value="Очистить форму"></p>

 </form>

 

 </body>

</html>

Заключение

Разные типы тега <input> в HTML определяются его атрибутами, атрибутов у этого тега несколько десятков, и большую их часть мы сегодня описали. Тег <input> в основном применяется при создании пользовательских форм, однако может применяться и в других блоках.