Погледни в HTML5 формите входни типове Дата, Цвят и Обхват
Формулярите се намират навсякъде в уебсайтовете. Facebook, Twitter, Google - само за да назовем няколко - изискват от нас да влезем или да се регистрираме в сайта чрез формуляр, всъщност ние също използваме формуляр, за да чуруликам и актуализираме статуса в социалните сайтове. Накратко, Формата е много важна част, за да може да взаимодействате с даден уебсайт.
Уеб формата е изградена с входове, в миналото имаме само няколко опции за входните типове; като текст, парола, радио, отметка и Изпращане. Сега HTML5 идва с големи подобрения и въвежда много нови типове входни данни в спецификацията.
Така че, в този пост ще разгледаме някои от новите интересни парчета от HTML5 формуляри че смятаме, че трябва да ги опитате; нека ги проверим.
Избор на дата
Първото нещо, което бихме искали да разгледаме, е избор на дата. Изборът на дата е често срещано нещо, което можете да намерите в регистрационната форма, особено в някои сайтове или приложения, като например полети и хотелски резервации.
Има много библиотеки на JavaScript, които могат да създадат инструмент за избор на дата. Сега можем да създадем и много по-лесен начин с HTML5 вход дата, както следва;
Най- избор на дата в HTML5 по същество работи много подобно на това, което JavaScript библиотеките са направили; когато се фокусираме върху полето, ще изскочи календар, след което ще навигираме през месеците и годините, за да изберем датата.
Въпреки това, всеки браузър, който в момента поддържа дата тип на въвеждане, а именно Chrome, Opera и Safari показват този тип вход малко по различен начин, което потенциално може да доведе до проблем с несъответствията в потребителския опит, и ето как изглежда;
Някои забележителни разлики, които можете да видите с един поглед от горната снимка на екрана; Операта използва английската трибуквена абревиатура за името на дните - Sun, Mon, Thu, и така нататък, докато Chrome използва моя местен език, Safari - от друга страна - работи доста странно, не показва календар изобщо.
Има и някои нови вход типове до изберете дата или час по-конкретно; месец, седмица, път, Време за среща и дата и час-местен, което ние сме сигурни, че самата ключова дума е доста desptiptive да кажа какво прави.
Можете да ги прегледате в действие от връзката по-долу, но се уверете, че го виждате в Opera 11 и по-нова версия, тъй като в момента на писане това е единственият браузър, който поддържа всички тези типове входни данни..
- Демо за изписване на дата
Средство за избиране на цвят
Средство за избиране на цвят често е необходима в някои уеб-базирани приложения, като този CSS3 генератор на градиенти, но през цялото това време уеб разработчиците все още разчитат на JavaScript библиотека, като jsColor, за да свършат работата. Но сега можем да създадем роден браузър с HTML5 цвят тип вход;
Още веднъж, браузърите, в този случай Chrome и Opera, правят този тип вход малко по-различен;
Операта първо показва основната опция за цвят при щракване, както и шестнадесетичния формат на избрания цвят в падащото меню, докато Chrome автоматично ще изскача цветната палитра в нов прозорец, когато кликне.
Освен това, ние можем да зададем цвета по подразбиране с стойност атрибут, както следва;
По този начин, когато се гледа в неподдържаните браузъри, вход ще се влоши в текстово поле и стойността по подразбиране ще бъде видима, което може да даде вид на съвет за потребителите какво трябва да се въведе в полето.
Покажете стойността на цвета
Вместо да отваряте Photoshop само за да копирате магия цветен формат, можете да създадете прост инструмент при този тип вход, за да изпълните задачата, тъй като генерираният цвят вече е в шестнадесетичен формат, това би било много лесно;
Първо, добавяме id средство за избиране на цвят към входа и ние също добавяме празно Разделение с id hexcolor до него, за да съдържа стойността.
Нуждаем се от jQuery, свързан в глава на нашия документ. След това съхраняваме стойността на цвета и новодобавената Разделение в променлива, така;
var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); Получете първоначалната стойност от #средство за избиране на цвят;
hexcolor.html (цвят);
… И накрая да промените стойността, когато се смени и избрания цвят;
$ ('# colorpicker'). on ('change', функция () hexcolor.html (this.value);); Това е; сега нека да го разгледаме в действие.
- Демонстрация на Colorpicker
диапазон
Най- диапазон входният тип ни позволява да добавим плъзгач в браузъра за избор на номер в диапазон, който също можем да намерим в jQuery UI.
Фрагментът по-горе е основно изпълнение на диапазон входен тип. Също така можем да променим ориентацията на плъзгача към вертикала, като използваме CSS, както следва;
вход [type = range] ширина: 20px; височина: 200px; -Вебкит-външен вид: плъзгач-вертикален;
Освен това, можем да настроим мин и макс обхват на номерата, например;
В откъса по-долу задаваме мин до нула и 225 за максимума. Когато те не са изрично посочени, по подразбиране браузърът ще поеме 0 за минимум до 100 за максимума.
Покажете номера
Има едно ограничение, но броят е невидим, не можем да видим генерирания брой / стойност от плъзгача в браузъра. За да покажете номера, който трябва да добавим малко JavaScript или jQuery, и ето как го правим;
Първо добавяме празно Разделение до входа, стил Разделение достатъчно, така че изглежда като кутия.
След това поставете следния код, който ще направи същото като горния код в инструмента за силен цвят, освен сега получаваме стойността от плъзгача.
$ (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
