Типи вхідних даних формату HTML5 Дата, колір і діапазон

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

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

Отже, на цій посаді ми поглибимо деякі нові цікаві фрагменти з Форми HTML5 ми вважаємо, що ви повинні спробувати їх; давайте перевіримо їх.

Вибір дати

Перше, що ми хотіли б подивитися на це вибір дати. Вибір дати - звичайна річ, яку ви можете знайти в реєстраційній формі, зокрема, на деяких сайтах або програмах, наприклад, на рейс та бронювання готелів.

Є багато бібліотек JavaScript для створення вибору дати. Тепер ми також можемо створити його набагато простіше за допомогою вводу HTML5 дата, наступним чином;

The вибір дати в HTML5 в основному працює дуже схоже на те, як робили бібліотеки JavaScript; коли ми фокусуємося на полі, календар вискочить, і тоді ми зможемо переміщатися по місяцях і роках, щоб вибрати дату.

Проте кожен браузер, який підтримує поточний дата тип введення - Chrome, Opera і Safari - відображає цей тип введення трохи по-іншому, що потенційно може призвести до непослідовності в користувальницькому досвіді, і ось як він виглядає;

Деякі помітні відмінності можна побачити з першого погляду з наведеного вище знімка екрана; Опера використовувала англійську трибуквенну абревіатуру для назв днів - Сонце, Пн, Чт і так далі, в той час як Chrome використовував мою місцеву мову, Safari - з іншого боку - працює досить дивно, він не показує календар зовсім.

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

Ви можете переглядати всі їх у дії за посиланням нижче, але переконайтеся, що ви переглядаєте їх у Opera 11 і вище, оскільки, на момент написання, це єдиний браузер, який підтримує всі ці типи вводу.

• Демонстрація Datepicker

Вибір кольору

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

Знову ж таки, браузери, в даному випадку Chrome і Opera, роблять цей тип введення трохи іншим;

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

Крім того, ми можемо також встановити колір за замовчуванням з значення атрибут, наступним чином;

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

Відображення значення кольору

Замість того, щоб відкривати Photoshop просто для копіювання гекса кольоровий формат, ви можете створити простий інструмент для цього типу вводу, щоб виконати завдання, оскільки генерований колір вже знаходиться в шістнадцятковому форматі, це було б дуже просто;

По-перше, додаємо id colorpicker на вхід і ми також додаємо порожній div з ідентифікатором hexcolor поруч з ним містити значення.

Нам потрібен jQuery, пов'язаний в керівник нашого документа. Потім ми зберігаємо значення кольору і знову доданого div у змінній, так;

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

Отримати початкове значення з #colorpicker;

 hexcolor.html (колір); 

… І, нарешті, змінити значення, коли змінений колір також змінився;

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

Це воно; тепер давайте розглянемо його в дії.

• Демонстрація Colorpicker

Діапазон

The діапазон тип введення дозволяє додати повзунок у браузері для вибору номера в діапазоні, який також можна знайти в інтерфейсі jQuery UI.

Вищезгаданий фрагмент є основною реалізацією діапазон тип введення. Ми також можемо змінити орієнтацію слайдера на вертикальну, використовуючи CSS, наступним чином;

 input [type = range] ширина: 20px; висота: 200px; -вебкіт-зовнішній вигляд: повзунок-вертикальний;  

Крім того, ми можемо встановити хв і макс діапазон номерів, наприклад;

У фрагменті нижче ми встановлюємо хв до нуля і 225 для максимуму. Коли вони явно не вказані, за умовчанням браузер займе 0 для мінімуму до 100 для максимуму.

Відображення номера

Хоча існує одне обмеження, число невидиме, ми не можемо побачити генерований номер / значення з повзунка в браузері. Щоб відобразити число, нам потрібно додати трохи JavaScript або jQuery, і ось як ми це робимо;

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

Потім покладіть наступний код, який буде виконувати те ж саме, що і код вище у виборі strongcolor, окрім тепер ми отримуємо значення від повзунка.

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

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

• Демонстрація діапазону

Заключні слова

Зрозуміло, що HTML5 робить наше життя набагато простішим шляхом введення багатьох нових типів вводу. Але, як і будь-яка інша функція HTML5, підтримка дуже обмежена, особливо в старих браузерах, тому ми повинні використовувати ці нові функції з обережними, особливо новими типами вхідних даних, які ми обговорювали на цій посаді; Дата, колір і діапазон.

Але в кінцевому рахунку, ми сподіваємося, що тепер у вас є більше розуміння Форми HTML5. Дякуємо, що прочитали цю публікацію, і ми сподіваємося, що вам сподобалося.

• Демо
• Завантажити джерело

Подальше читання

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

• Нові функції форми в HTML5 - Opera Dev.
• Сучасний стан HTML5 форм - Wufoo
• Атрибути форми HTML5 - w3school.org
• Коли можна використовувати форми HTML5? - CanIUse.com