Поглед у ХТМЛ5 обрасце улазних типова Датум, боја и опсег

Обрасци се налазе свуда на сајтовима. Фацебоок, Твиттер, Гоогле - само да наведемо неколико - од нас се захтева да се пријавимо на сајт или се региструјемо преко форме, у ствари, такође користимо форму да бисмо објавили и ажурирали статус на друштвеним сајтовима. Укратко, Образац је веома важан део за интеракцију са веб сајтом.

Веб образац је изграђен са улазима, у прошлости, имамо само неколико опција за типове уноса; као такав текст, пассворд, радио, поље за потврду и прихвати. Сада, ХТМЛ5 долази са великим побољшањима и уводи многе нове типове уноса у спецификацији.

Дакле, у овом посту ћемо ископати неке од нових занимљивих делова ХТМЛ5 Формс мислимо да би требало да их испробате; Хајде да их проверимо.

Избор датума

Прва ствар коју бисмо волели да погледамо је бирач датума. Одабир датума је уобичајена ствар коју можете наћи у обрасцу за регистрацију, посебно на неким локацијама или апликацијама као што су лет и резервација хотела.

Постоји много ЈаваСцрипт библиотека за креирање бирача датума. Сада, такође можемо да направимо један на много лакши начин са ХТМЛ5 улазом датум, као што следи;

Тхе бирач датума у ХТМЛ5 у основи ради веома слично ономе како су ЈаваСцрипт библиотеке радиле; када се фокусирамо на поље, календар ће искочити, а онда ћемо моћи да се крећемо кроз месеце и године да изаберемо датум.

Међутим, сваки претраживач који тренутно подржава датум тип улаза, наиме Цхроме, Опера и Сафари приказују овај тип уноса мало другачије што потенцијално може довести до недоследности у корисничком искуству, а ево како изгледа;

Неке значајне разлике које можете видети на први поглед са горње слике екрана; Опера је користила енглеску скраћеницу од три слова за име дана - Сун, Мон, Чет, и тако даље, док је Цхроме користио мој локални језик, Сафари - с друге стране - дјелује прилично чудно, не приказује календар уопште.

Има и неких нових улазни типес то прецизније изаберите датум или време; месец дана, Недеља, време, Датум време и датетиме-лоцал, за које смо сигурни да је сама кључна реч сасвим десиптипна да би рекла шта ради.

Све их можете погледати у акцији на доњем линку, али будите сигурни да сте га погледали у Опера 11 и новијим верзијама, пошто је, у време писања, то једини претраживач који подржава све те типове уноса.

• Датепицкер Демо

Цолор Пицкер

Бирач боја често је потребно у одређеним веб-базираним апликацијама, као што је овај ЦСС3 градијент генератора, али све ово вријеме веб програмери се још увијек ослањају на ЈаваСцрипт библиотеку, као што је јсЦолор, за обављање посла. Али сада можемо да направимо изворни претраживач боја са ХТМЛ5 цолор тип улаза;

Још једном, претраживачи, у овом случају Цхроме и Опера, чине овај тип уноса мало другачијим;

Опера прво приказује основну опцију боје на клику, као и хексадецимални формат тренутне изабране боје у падајућем менију, док ће Цхроме директно кликнути палету боја у новом прозору када се кликне.

Поред тога, можемо да поставимо подразумевану боју са вредност атрибут, као што следи;

На тај начин, када се гледа у неподржаним претраживачима, улазни деградираће се у текстуалном пољу и подразумевана вредност ће бити видљива која може дати неку врсту савета корисницима шта треба да се унесе у поље.

Прикажите вредност боје

Уместо да отворите Пхотосхоп само да бисте копирали хек у формату боје, можете креирати једноставну алатку за овај тип улаза да бисте обавили посао, јер је генерисана боја већ у хексадецималном облику, то би било стварно лако;

Прво, додамо ид цолорпицкер на улаз и додајемо празно див витх ид хекцолор поред њега да садржи вредност.

Треба нам јКуери повезан у глава нашег документа. Затим чувамо вредност боје и ново додато див у варијабли, тако;

 вар цолор = $ ('# цолорпицкер'). вал (); хекцолор = $ ('# хекцолор'); 

Набавите почетну вредност из #цолорпицкер;

 хекцолор.хтмл (боја); 

… И на крају променити вредност када се промени и изабрана боја;

 $ ('# цолорпицкер'). он ('цханге', фунцтион () хекцолор.хтмл (тхис.валуе);); 

То је то; сада ћемо је видјети у акцији.

• Цолорпицкер Демо

Домет

Тхе домет тип уноса нам омогућава да у прегледач додамо клизач за избор броја у опсегу који такође можемо наћи у јКуери УИ.

Горњи исјечак је основна имплементација домет инпут типе. Такође можемо променити оријентацију клизача на вертикалну помоћу ЦСС-а, као што следи;

 инпут [типе = ранге] видтх: 20пк; хеигхт: 200пк; -вебкит-изглед: слидер-вертицал;  

Поред тога, можемо поставити и мин и мак опсег бројева, на пример;

У наставку испод постављамо мин на нулу и 225 за максимум. Када нису изричито наведени, подразумевано ће претраживач заузети 0 за минимум до 100 за максимум.

Прикажи број

Међутим, постоји једно ограничење, број је невидљив, не можемо видети генерисани број / вредност из клизача у претраживачу. Да бисмо приказали број који треба да додамо мало ЈаваСцрипта или јКуери, и ево како то радимо;

Прво додамо празно див поред улаза, стилизујте див довољно да изгледа као кутија.

Затим ставите следећи код који ће урадити исто као и горе наведени код у стронгцолор пицкер, осим сада добијамо вредност од клизача.

 $ (фунцтион () вар вал = $ ('# слидер'). вал (); оутпут = $ ('# оутпут'); оутпут.хтмл (вал); $ ('# слидер'). ) оутпут.хтмл (тхис.валуе););); 

Сада можете видјети демо. Само подсетник, погледајте демо у овим прегледачима - Цхроме, Опера и Сафари, пошто Фирефок и ИЕ не подржавају домет тип уноса у овом тренутку.

• Ранге Демо

Финал Вордс

Јасно је да ХТМЛ5 чини наше животе много лакшим уводећи многе нове типове уноса. Али, као и све друге ХТМЛ5 функције, подршка је веома ограничена, посебно у старијим претраживачима, па би требало да користимо ове нове функције са опрезним, посебно новим типовима улаза које смо дискутовали у овом посту; Датум, боја и опсег.

Али на крају се надамо да ћете сада имати више увида ХТМЛ5 Формс. Хвала вам што сте прочитали овај пост и надамо се да сте уживали.

• Демо
• Довнлоад Соурце

Додатна литература

У наставку ћете пронаћи неколико корисних линкова за даље копирање у ХТМЛ обрасце.

• Нове функције форме у ХТМЛ5 - Опера Дев.
• Тренутно стање ХТМЛ5 образаца - Вуфоо
• Атрибути форме ХТМЛ5 - в3сцхоол.орг
• Када могу да користим ХТМЛ5 обрасце? - ЦанИУсе.цом