Тег input и его основные атрибуты

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

   Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

   Элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа или если данные обрабатываются с помощью клиентских приложений, например, скриптов на языке JavaScript, то указывать <form> обязательно.

 

   Закрывающий тег не требуется

 

Пример: <input type="radio" name="browser" value="ie"> Internet Explorer<Br>

Атрибуты:

   type

   type - основной атрибут тега <input>, определяющий вид элемента (формы).

   Может принимать значения:

      button - кнопка

      checkbox - флажок

      color - виджет для выбора цвета

      date - поле для ввода календарной даты (год, месяц, день)

      datetime - поле для ввода даты и времени

      datetime-local - поле для ввода даты и местного времени

      email - поле для ввода адреса электронной почты

      file - поле для ввода имени файла, который пересылается на сервер

      hidden - скрытое поле (не отображается на странице)

      image - графическая кнопка отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.

      month – Поле для ввода месяца и года
      number – Поле для ввода чисел.
      password – Поле для ввода пароля.
      radio – Переключатели (радио-кнопки).
      range – Ползунок для ввода чисел в указанном диапазоне.
      reset – Кнопка сброса данных формы в первоначальное состояние.
      search – Поле для ввода строки поиска.
      submit – Кнопка для отправки данных формы на сервер.
      tel – Поле для ввода номера телефона.
      text – Текстовое поле.
      time – Поле для ввода времени.
      url – Поле для ввода Web-адреса.
      week – Поле для ввода номера недели и года.

 

Другие атрибуты:

accept
    Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskey
    Переход к элементу с помощью комбинации клавиш.
align
    Определяет выравнивание изображения.
alt
    Альтернативный текст для кнопки с изображением.
autocomplete
    Включает или отключает автозаполнение.
autofocus
    Устанавливает фокус в поле формы.
border
    Толщина рамки вокруг изображения.
checked
    Предварительно активированный переключатель или флажок.
disabled
    Блокирует доступ и изменение элемента.
form
    Связывает поле с формой по её идентификатору.
formaction
    Определяет адрес обработчика формы.
formenctype
    Устанавливает способ кодирования данных формы при их отправке на сервер.
formmethod
    Сообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidate
    Отменяет встроенную проверку данных на корректность.
formtarget
    Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list
    Указывает на список вариантов, которые можно выбирать при вводе текста.
max
    Верхнее значение для ввода числа или даты.
maxlength
    Максимальное количество символов разрешенных в тексте.
min
    Нижнее значение для ввода числа или даты.
multiple
    Позволяет загрузить несколько файлов одновременно.
name
    Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern
    Устанавливает шаблон ввода.
placeholder
    Выводит подсказывающий текст.
readonly
    Устанавливает, что поле не может изменяться пользователем.
required
    Обязательное для заполнения поле.
size
    Ширина текстового поля.
src
    Адрес графического файла для поля с изображением.
step
    Шаг приращения для числовых полей.
tabindex
    Определяет порядок перехода между элементами с помощью клавиши Tab.
type
    Сообщает браузеру, к какому типу относится элемент формы.
value
    Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Ресурсы для более глубокого изучения:

http://htmlbook.ru/html/input 

https://htmlweb.ru/html/form/input.php 

https://guruweba.com/html/teg-input-html-pole-dlya-vvoda-knopka/