HTML: Тег input – значения для атрибута type

Содержимое:

Тег input является неотъемлемой частью для всех форм. Но не все знают, что некоторые его атрибуты сильно облегчают и улучшают обработку форм в дальнейшем. Type является одним из этих атрибутов. Сегодня я собрал для вас все самые популярные значения для атрибута type,  тега input.

Стандартный input выводит строку для вода данных и имеет type=”text”.

Данному полю мы зададим заголовок

Теперь я буду изменять значение атрибута type=’ ‘и  показывать что выводит каждое из значений.

Для начала вот полный список значений для атрибута type.

Значения для атрибута type

type
Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text.
Возможные значения:

  • button – Кнопка с надписью.
  • checkbox – Флажок.
  • color – Виджет для выбора цвета.
  • date – Поле для ввода календарной даты (год, месяц, день).
  • datetime – Поле для ввода даты и времени.
  • datetime-local – Поле для ввода даты и местного времени.
  • email – Поле для ввода адреса электронной почты.
  • file – Поле для ввода имени файла, который пересылается на сервер.
  • hidden – Скрытое поле (не отображается на Web-странице).
  • image – Графическая кнопка отправки данных формы на сервер. Вместе с этим значением нужно использовать атрибут src, чтобы определить адрес изображения и атрибут alt для определения альтернативного текста. Можно также задать атрибуты width и height, чтобы определить размер изображения в пикселях.
  • month – Поле для ввода месяца и года.
  • number – Поле для ввода чисел.
  • password – Поле для ввода пароля.
  • radio – Переключатели (радио-кнопки). Выбрать можно только один вариант. Атрибут checkedуказывает, что вариант выбран по умолчанию.
  • range – Ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
    • min = 1
    • max = 100
    • value = min + ( max – min ) / 2, или min , если max < min
    • step = 1
  • reset – Кнопка сброса данных формы в первоначальное состояние.
  • search – Поле для ввода строки поиска.
  • submit – Кнопка для отправки данных формы на сервер.
  • tel – Поле для ввода номера телефона.
  • text – Текстовое поле.
  • time – Поле для ввода времени.
  • url – Поле для ввода Web-адреса.
  • week – Поле для ввода номера недели и года.\

И так… я разбил все значения на некоторые группы.

Для форм.

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

Такие значения, как…

  • datetime – Поле для ввода даты и времени.
  • email – Поле для ввода адреса электронной почты.
  • number – Поле для ввода чисел.
  • tel – Поле для ввода номера телефона.
  • url – Поле для ввода Web-адреса.
  • password – Поле для ввода пароля.

Они изначально имеют пустые поля и проверяют введённые данные, на правильность ввода. Например: если поставить значение email, то если не ввести @, то нам выведется ошибка.

Пример работы атрибута type

В данной группе, все значения работают аналогично. Только пароль работает немного иначе, он просто закрывает знаками * все введённые символы.

А что бы проверить поля на заполненность, необходимо ещё добавить по мимо атрибута type , атрибут required=”required”.

С выбором ответа.

Вторая группа отличается тем что имеют дополнительно выпадающее окно, в котором есть несколько вариантов для выбора.

  • date – Поле для ввода календарной даты (год, месяц, день).
  • datetime-local – Поле для ввода даты и местного времени.
  • file – Поле для ввода имени файла, который пересылается на сервер.
  • time – Поле для ввода времени.
  • week – Поле для ввода номера недели и года.

Для примера мы рассмотрим такое значение, как date

Пример работы атрибута type, значения date

Прочие

А в третьей категории будут просто прочие значения.

  • button – Кнопка с надписью.

Пример работы атрибута type, значения button

  • checkbox – Флажок.

Пример работы значения checkbox

  • hidden – Скрытое поле (не отображается на Web-странице).
  • radio – Переключатели (радио-кнопки). Выбрать можно только один вариант. Атрибут checkedуказывает, что вариант выбран по умолчанию.

Пример работы значения radio

  • range – Ползунок для ввода чисел в указанном диапазоне. Если соответствующие атрибуты не указаны, то значения по умолчанию:
    • min = 1
    • max = 100
    • value = min + ( max – min ) / 2, или min , если max < min
    • step = 1

пример работы range

На этом всё ! Задавай свои вопросы в комментариях.

Если вы хотите больше практики по HTML, то вам сюда – http://prog-time.ru/html/

На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime