Взгляд в формы ввода HTML5 форм Дата, цвет и диапазон

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

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

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

Выбор даты

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

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

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

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

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

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

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

• Datepicker Demo

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

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

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

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

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

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

Показать значение цвета

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

Сначала мы добавляем идентификатор ColorPicker на вход, и мы также добавляем пустой ДИВ с идентификатором hexcolor рядом с ним, чтобы содержать значение.

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

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

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

 hexcolor.html (цвет); 

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

 $ ('# colorpicker'). on ('change', function () hexcolor.html (this.value);); 

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

• Colorpicker Demo

Спектр

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

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

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

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

В приведенном ниже фрагменте мы устанавливаем мин в ноль и 225 по максимуму. Если они не указаны явно, браузер по умолчанию 0 за минимум 100 для максимального.

Показать номер

Однако есть одно ограничение: число невидимо, мы не можем увидеть сгенерированное число / значение из ползунка в браузере. Чтобы отобразить число, нам нужно добавить немного JavaScript или jQuery, и вот как мы это делаем;

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

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

 $ (function () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). change (function ( ) output.html (this.value););); 

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

• Range Demo

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

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

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

• демонстрация
• Скачать исходный код

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

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

• Новые возможности формы в HTML5 - Opera Dev.
• Текущее состояние форм HTML5 - Wufoo
• Атрибуты формы HTML5 - w3school.org
• Когда я могу использовать формы HTML5? - CanIUse.com