Типы ввода форм HTML5: дата, цвет и диапазон

Формы можно найти повсюду на сайтах. Facebook, Twitter, Google – и это лишь некоторые из них – требуют, чтобы мы входили в систему или регистрировались на сайте через форму, фактически мы также используем форму для чирикания и обновления статуса на социальных сайтах. Короче говоря, форма является очень важной частью, чтобы иметь возможность взаимодействовать с веб-сайтом.

Веб-форма построена с использованием входных данных, в прошлом у нас было только несколько вариантов для типов ввода; такие как текст, пароль, радио, флажок и отправить. Теперь HTML5 имеет большие улучшения и вводит много новых типов ввода в спецификации,

Итак, в этом посте мы рассмотрим некоторые из новых интересных частей из HTML5-форм, которые, по нашему мнению, вам следует примерить; давайте проверим их.

Рекомендуемое чтение: создание стильной адаптивной формы с CSS3 и HTML5

Выбор даты

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

Есть много библиотек JavaScript для создания выбора даты. Теперь мы также можем создать его намного проще с помощью входной даты HTML5, как показано ниже;

Выбор даты в HTML5 в основном работает очень похоже на то, как это делали библиотеки JavaScript; когда мы сфокусируемся на поле, появится календарь, а затем мы сможем перемещаться по месяцам и годам, чтобы выбрать дату.

Однако каждый браузер, который в настоящее время поддерживает тип ввода даты, а именно Chrome, Opera и Safari, отображает этот тип ввода немного по-своему, что потенциально может привести к проблеме несоответствия в пользовательском интерфейсе, и вот как это выглядит;

Некоторые заметные различия вы можете увидеть сразу на скриншоте выше; Опера использовала английскую трехбуквенную аббревиатуру для названия дней – Sun, Mon, Thu и т. д., в то время как Chrome использовал мой местный язык, Safari – с другой стороны – работает довольно странно, он не показывает календарь вообще.

Есть также несколько новых типов ввода для более точного выбора даты или времени; месяц, неделя, время, datetime и datetime-local, которые, как мы уверены, само ключевое слово достаточно наглядно, чтобы рассказать, что оно делает.

Вы можете просмотреть все из них в действии по ссылке ниже, но убедитесь, что вы просматриваете их в Опера 11 и выше, поскольку на момент написания статьи это единственный браузер, который поддерживает все эти типы ввода.

Палитра цветов

Выбор цвета часто требуется в определенных веб-приложениях, таких как этот генератор градиента CSS3, но все это время веб-разработчики все еще полагаются на библиотеку JavaScript, такую ​​как jsColor, чтобы сделать работу. Но теперь мы можем создать палитру цветов встроенного браузера с типом ввода цвета HTML5;

Еще раз, браузеры, в данном случае Chrome и Opera, отображают этот тип ввода немного по-другому;

Opera сначала отображает опцию базового цвета при нажатии, а также шестнадцатеричный формат текущего выбранного цвета в раскрывающемся списке, в то время как Chrome будет сразу же открывать цветовую палитру в новом окне при нажатии.

Кроме того, мы также можем установить цвет по умолчанию с помощью атрибута value следующим образом;

Таким образом, при просмотре в неподдерживаемых браузерах ввод будет ухудшаться в текстовом поле, и будет отображаться значение по умолчанию, которое может дать пользователям подсказку, что следует вводить в поле.

Показать значение цвета
Вместо того, чтобы открывать Photoshop просто для копирования шестнадцатеричного цветового формата, вы можете создать простой инструмент для этого типа ввода для выполнения работы, поскольку сгенерированный цвет уже находится в шестнадцатеричном формате, это будет действительно легко;

Во-первых, мы добавляем идентификатор colorpicker на вход, а также добавляем пустой div с id hexcolor рядом с ним, чтобы содержать значение.

Нам нужно JQuery ссылка в заголовке нашего документа. Затем мы сохраняем значение цвета и недавно добавленный div в переменной, вот так;

var color = $ (‘# colorpicker’). val ();
hexcolor = $ (‘# hexcolor’);

Получить начальное значение из #colorpicker;

hexcolor.html (цвет);

… и, наконец, измените значение, когда выбранный цвет также изменится;

$ (‘# colorpicker’). on (‘change’, function () {
hexcolor.html (this.value);
});

Это оно; Теперь давайте посмотрим на это в действии.

Ассортимент

Тип ввода диапазона позволяет нам добавить ползунок в браузере для выбора номера в диапазоне, который мы также можем найти в пользовательском интерфейсе jQuery.

Приведенный выше фрагмент является базовой реализацией типа ввода диапазона. Мы также можем изменить ориентацию слайдера на вертикальную с помощью CSS следующим образом;

вход[type=range] {
ширина: 20 пикселей;
высота: 200 пикселей;
-Вебкит-внешний вид: слайдер-вертикальный;
}

Кроме того, мы можем установить минимальный и максимальный диапазон чисел, например;

В приведенном ниже фрагменте мы устанавливаем мин на ноль и 225 на максимум. Если они не указаны явно, по умолчанию браузер возьмет от 0 до минимума до 100 за максимум.
Показать номер
Однако есть одно ограничение: число невидимо, мы не можем увидеть сгенерированное число / значение из ползунка в браузере. Чтобы отобразить число, нам нужно добавить немного JavaScript или jQuery, и вот как мы это делаем;

Сначала мы добавляем пустой div рядом с вводом, достаточно стилизируем div, чтобы он выглядел как прямоугольник.

Затем поместите следующий код, который будет делать то же самое, что и код выше, в палитре цветов, за исключением того, что теперь мы получаем значение из ползунка.

$ (Функция () {
var val = $ (‘# slider’). val ();
output = $ (‘# output’);

output.html (вал);

$ ( ‘# Слайдер’). Изменение (функция () {
output.html (this.value);
});

});

Теперь вы можете увидеть демо. Просто напомним, посмотрите демонстрацию в этих браузерах – Chrome, Opera и Safari, так как Firefox и IE не поддерживают тип ввода диапазона в данный момент.

Заключительные слова

Понятно, что HTML5 делает нашу жизнь намного проще, вводя много новых типов ввода. Но, как и любые другие функции HTML5, поддержка очень ограничена, особенно в старых браузерах, поэтому мы должны использовать эти новые функции с осторожностью, особенно с новыми типами ввода, которые мы обсуждали в этом посте; Дата, цвет и ассортимент.

Но, в конечном счете, мы надеемся, что теперь вы сможете лучше понять формы HTML5. Спасибо за чтение этого поста, и мы надеемся, что вам понравилось.

Дальнейшее чтение

Ниже приведены несколько полезных ссылок для дальнейшего изучения форм HTML.