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

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

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

Он выглядит вот так

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

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

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

Значения для атрибута type, тега <input>

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

Рекомендованные

 

Вам также будет интересно

 

Оставить комментарий

avatar
  Подписаться  
Уведомление о