Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Типы элементов input в HTML5

Традиционная HTML-форма имеет как минимум несколько типов элемента input. К примеру, обычное текстовое поле, кнопки отправки и сброса, кастомные кнопки и т.д. В стандарте HTML5 появляется большое количество новых типов input’a. Ниже мы их рассмотрим.

Типы элементов input в HTML5

В первую очередь, появляется такой тип, как email. По сути, это обычное текстовое поле с небольшими изменениями.

  1. Изменение номер 1 – более четкая семантика. При просмотре кода страницы браузер или какие-то другие программы могут сразу понять, для какой именно информации предназначено данное поле.
  2. Изменение номер 2 – наличие автопроверки вводимых данных перед отправкой. То есть если вы введете строку, которая не соответствует шаблону почтового адреса, то отправить форму не получится.

Следующий тип input’a – url. Также представляет собой текстовое поле. Однако в данном случае это поле предназначено для ввода URL-адреса. Есть алгоритм проверки на шаблон, который не является в достаточной степени строгим. При несоответствии вводимых данных шаблону форму отправить не получится.

Input search используется для создания текстового поля, предназначенного для поиска какой-либо информации (в глобальной сети, в пределах конкретной страницы или сайта). Кроме семантики никаких явных отличий от типа text здесь нет. Хотя некоторые браузеры по-другому отображают поле – добавляют скругленные углы и крестик для очистки вводимых данных.

Input tel также создает простое текстовое поле, которое должно использоваться для ввода телефонных номеров в самых разных форматах. По умолчанию здесь нет какой-либо проверки данных (можно вводить даже буквы). Поэтому единственное отличие от типа text заключается в семантике.

Input number – это поле, предназначенное для ввода исключительно чисел. Причем можно задать диапазон (минимальное и максимальное значение), а также шаг ввода. Атрибуты min и max по умолчанию не заданы. Что касается шага ввода, то он обозначается атрибутом step и изначально равен 1 (то есть можно вводить только целые числа). Если изменить step, к примеру, на 0.1, то можно будет вводить числа с десятичной частью.

Input range создает горизонтальный ползунок, который пользователь может перемещать вправо или влево. Здесь также есть атрибуты min и max, которые задают минимальное и максимальное значение ползунка (в цифрах). А еще есть атрибут value, который задает текущее положение ползунка. Единственная проблема с использованием range заключается в том, что браузеры не предоставляют какой-либо обратной информации касательно того, в каком значении установлен ползунок. Это можно сделать лишь через JavaScript.

Для задания даты и времени в HTML5 используется сразу несколько типов input’ов:

  • date;
  • time;
  • datetime;
  • month;
  • week.

При использовании каждого из этих типов создается специальное поле, содержащее в себе дату и / или время в определенном формате. При фокусе на поле появляется выпадающий календарь, где пользователь может выбрать нужную ему дату или время. Тип date отображает год, месяц и день, time – часы, минуты и секунды, datetime – год, месяц, день, часы, минуты и секунды, month – год и месяц, week – год и неделю. В двух последних случаях используется порядковый номер месяца и недели.





Предыдущая статья:
Стратегия продвижения сайта по высокочастотным запросам

Читайте также:
Создание сайта под ключ

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»