Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML & CSS
Webdesign

Стварэнне больш дружалюбных, зразумелых вэб-формаў

by
Length:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Вэб-формы заўсёды заставалася гарачай тэмай, калі справа тычылася вэб-дызайну і ўзаемадзеяння з карыстальнікам. Чыннікаў таму шмат, але адна з найбольш відавочных гэта тое, што вэб-формы - гэта самы просты спосаб для карыстальніка ўводзіць інфармацыю ў дадатак. У гэтым артыкуле мы абмяркуем некалькі метадаў, якія дазволяць вашым формам адказваць на ўвод дадзеных карыстача, а таксама дапамогуць схаваць лішнія незразумелыя або душаць элементы.

Давайце пачнем!

Формы падобныя на размовы

Уявіце форму ў выглядзе гутаркі, які вы вядзеце з вашым карыстальнікам. З размовы становіцца зразумела, што калі кожны бок прапануе другім баку адказаць на пытанне. Напрыклад, выкажам здагадку, што ваш карыстальнік прыходзіць або зарэгістравацца, або падпісацца. У абодвух выпадках вам патрэбна яго электронная пошта, дык чаму б не пачаць дыялог?

Дайце мне свой адрас электроннай пошты, і я праверу, ці ёсць у вас уліковы запіс. Калі яна існуе, я папрашу вас ўвесці ваш пароль, альбо вы створыце новы і пацвердзіце яго.

Таму, калі карыстальнік прыходзіць на старонку з формай, ён бачыць дакладнае пытанне: «Які ў вас адрас электроннай пошты?»

Приставучий хлопец на вечарыне

Мы ўсе ведаем гэтага хлопца. Ён той хлопец, якога вы пазбягаеце, таму што ён без канца кажа нейкую лухту, а сам нават не слухае, што вы скажаце. Шчыра кажучы, гэты хлопец сапраўды нервуе навакольных, і я не ўпэўнены, што ён камусьці падабаецца. Не хацелася б быць гэтым хлопцам.

Аднак, у яго ёсць чаму павучыцца. Замест таго, каб супрацьстаяць вашаму карыстачу з вялікай колькасцю уваходаў, падумайце аб памяншэнні рабочай нагрузкі карыстальніка шляхам стварэння рэактыўных уваходаў.

Давайце разгледзім просты прыклад.

Форма ўваходу

Працэс ўваходу ў сістэму выглядае прыкладна так: я ўводжу свой адрас электроннай пошты, затым ўводжу пароль, і націскаю клавішу ўводу. У гэтым прыкладзе вы даведаецеся, як паказваць кожнае з гэтых палёў толькі пасля завяршэння папярэдняга, выкарыстоўваючы толькі HTML і CSS. Мы створым спачатку яе, а затым мадыфікуючы версію.

Зробім першы запіс у нашай разметцы.

Калі гэта выглядае трохі складаным, не хвалюйцеся, я растлумачу кожную частку. Давайце пачнем з ўводу электроннай пошты. Мы бачым некалькі атрыбутаў, дададзеных ў тэг за межамі імя.  Перш за ўсё, тып ўводу усталяваны на «email»; гэта адносна новы тып ўводу, які дае нам пэўныя паводзіны ў падтрымцы браўзэраў. Напрыклад, на iPhone сімвал "@" будзе адлюстроўвацца на асноўнай клавіятуры.

Іншая асаблівасць тыпаў ўводу заключаецца ў тым, што формы HTML5 валодаюць здольнасцю праверкі дадзеных на ўзроўні браўзэра. Гэта азначае, што вам не трэба пісаць JavaScript для выканання праверкі для элементаў базавай формы! Звярніце ўвагу, што ў нас ёсць атрыбут «абавязкова» як для элемента электроннай пошты, так і для пароля. Як толькі гэтыя два элемента будуць запоўненыя, а іх значэння будуць лічыцца карэктнымі ў браўзэры, вы можаце нават наладзіць іх з дапамогай псевдоселектора :valid.

Вобласць рэгулярных выразау

Гэта вядома выдатна, але мы маглі б зрабіць усё яшчэ лепш. Напрыклад, браўзэр прымае «a@b» ў якасці падыходнага адрасы электроннай пошты. Прычына гэтага ў тым, што адрас электроннай пошты можна наладзіць, каб атрымаць нешта накшталт «something@localhost».  Наш пароль можа быць любым, таму пароль, які складаецца з аднаго знака, такі як «a», таксама лічыцца карэктным. Давайце дадамо рэгулярныя выразы, каб выправіць гэтыя праблемы.

Заўвага: калі вы не знаёмыя з рэгулярнымі выразамі, гэта нармальна! Мы іх разгледзім, каб паказаць, як вы можаце выкарыстоўваць іх для агульных задач праверкі формы на HTML5, але вы можаце прытрымлівацца рэалізацый праверкі з дапамогай браўзэра і прытрымлівацца кіраўніцтву.  Тады проста прапусціце гэты падзел і працягвайце працу!

Яшчэ адна заўвага: вы таксама можаце выкарыстоўваць Regular Expressions for Dummies: Screencast Series кіраўніцтва для чайнікаў: серыю урокаў Джэфры Шляху.

Давайце разгледзім кожную частку гэтай мадэлі. Рэгулярныя выразы - гэта спосаб апісання і параўнання фармату радка.

Мы пачнем з шаблону электроннай пошты.

  • [^ @]* - любыя лічбы і знакі, якія не ўтрымліваюць знак @ або пустое прастору.
  • @ - літарнае пазначэнне знака @
  • \. - абазначэнне пункту
  • [A-zA-Z] - любыя сімвалы верхняга або ніжняга рэгістра
  • [A-zA-Z] {2,} - камбінацыя двух або больш літар.

Злучыўшы усё гэта разам, выраз інфармуе нас, што email ўяўляе сабой любы набор сімвалаў, за выключэннем знака @, за першай часткай якога варта знак @ і любы набор сімвалаў, акрамя знака @, далей за якім варта дыяпазон, у якім утрымліваецца па меншай меры две буквы.

Мы можам выкарыстоўваць больш простае рэгулярны выраз, калі жадаем правесці праверку, грунтуючыся на даўжыні значэння:

.  азначае «любы знак», а {5} кажа, што гэтых сімвалаў павінна быць не менш за 5.

Выкарыстоўваючы гэтыя прыклады, элемент не будзе лічыцца карэктным да таго часу, пакуль не будзе ўведзена значэнне, якое задавальняе умовам.

Мы завяршаем разметку дадатковымі карэкціроўкамі і элементамі.

Трохі магіі пры дапамозе :valid CSS

Цяпер, калі ў нас ёсць разметка для нашай формы ўваходу, давайце паглядзім, што мы можам яшчэ зрабіць, выкарыстоўваючы CSS, каб адказаць на ўвод дадзеных карыстача.

Мы хочам адлюстраваць наступны элемент формы, калі папярэднія дадзеныя ўведзеныя карэктна. Пачнем з таго, што схаваем некаторыя элементы, такім чынам, каб карыстальнікі маглі бачыць усю форму, і каб аўтазапаўненне дапамагло карыстачу ўвесці дадзеныя. (Крыс Койер распавядае пра тое, чаму не варта выкарыстоўваць display:none тут.)  Мы будзем выкарыстоўваць метад visuallyhidden, апісаны ў артыкуле Крыса.

Мы пачнем з некаторых асноўных стыляў.

conversational-form-base-all

Прапаную выкарыстоўваць канцэпцыю Крыса. Выкарыстоўваецца і ў дачыненні яе да элементаў, якія хочам схаваць.

conversational-form-base

Мы створым анімацыю і трохі пашырым клас, каб уключыць непразрыстасць, выдаліць абсалютная пазіцыянаванне, а таксама дадаць вызначэнне кропак плыўнага пераходу.

Заўвага.Тут мы не дадалі прэфіксы, неабходныя для розных браўзэраў.

Зараз давайце адлюстраваць іх там дзе яны павінны быць выкарыстоўваючы псевдоселектор :valid і селектар +

conversational-form-animation-all

Заўвага аб лепшых прыкладах выкарыстання

Важна ўлічваць мэты і чаканні карыстальніка, які запаўняе вэб-форму. Часам добрым рашэннем будзе цалкам схаваць ўваход ад карыстальніка. Аднак у некаторых выпадках запаўненне формы можа даць адмоўны эфект, і карыстальнік можа адчуць, што запаўненне формы не мае дакладнай паслядоўнасці і патрабуе шмат часу, і гэта прымусіць яго сысці са старонкі рэгістрацыі.

Добрым рашэннем гэтай праблемы было б выкарыстанне нейкага прамежкавага стану, без неабходнасці схаваць поле ўводу, якое дапаможа стварыць тлумачэнні і зваротную сувязь для формы, у якой ёсць выразная мэта і чаканая рэакцыі. Вось мадыфікаваная версія, якая выкарыстоўвае маштабаванне, фільтр размыцця webkit, непразрыстасць і параметр pointer-events:none каб паказаць поля ўводу карыстачу, па меры іх неабходнасці.  Нам таксама неабходна пераканацца, што pointer-events перазагрузіцца, калі палі ўводу даступныя для запаўнення і карыстальнік мог бы націснуць на іх.

conversational-form-animation-modified
Зірніце на прыклад

Адзіная памылка, якую мы павінны хутка выправіць: гэта тое, калі карыстальнік націскае на ўкладку, ён збіраецца ўвесці наступны элементы формы.  У нашай форме мы забаронім гэта дадатковае дзеянне з дапамогай pointer-events:none, але ў CSS няма атрыбуту «focusable». Замест гэтага нам трэба будзе кіраваць гэтым паводзінамі з дапамогай JavaScript (з элементамі jQuery).

Гэты код на JavaScript будзе кантраляваць нашы палі ўводу і адключаць / ўключаць іх на аснове папярэдняга стану элемента ":valid" Гэта не дазволіць нам вылучыць элемент. pointer-events:none ўсё яшчэ працуе, і не дазваляе націснуць на нашу кнопку адпраўкі.

Іншыя выпадкі выкарыстання 

Уявіце сабе форму з некалькімі «шляхамі», як у нашым прыкладзе «ўваход у сістэму або рэгістрацыя». Карыстальнік можа выбіраць некалькі параметраў, якія запатрабуюць ўводу дадатковай інфармацыі, напрыклад выбар спосабу дастаўкі або час браніравання століка.  У гэтых выпадках просты праверкі можа быць недастатковай, і замест гэтага мы будзем выкарыстоўваць JavaScript рашэння.

Возьмем, да прыкладу, выбар ўваходу ў сістэму або рэгістрацыі. Для гэтага мы павінны адправіць запыт на сервер, ці існуе карыстальнік з названым адрасам электроннай пошты.

У прыведзеным вышэй прыкладзе на JavaScript мы адпраўляем адрас электроннай пошты на сервер па URL-адрасе / check_for_user. Сервер верне просты адказ у фармаце JSON, падобны на наступны.

Грунтуючыся на гэтым значэнні, мы прысвоім клас да поля ўводу і зменім пункт накіравання для дадзеных формы. Мы таксама ўсталёўваны паролі, якія будуць правераны на адпаведнасць. Затым мы маглі б выкарыстоўваць CSS рознымі спосабамі, каб вызначыць, што будзе далей. Напрыклад, мы маглі б выкарыстоўваць аналагічны падыход, названы раней, каб паказаць ці схаваць поля ўводу.

Калі вы рэгіструеце новы ўліковы запісу, нам трэба поле для ўводу пароля (гэта не поле пароля, якое мы выкарыстоўвалі для ўваходу). Для гэтага мы будзем выкарыстоўваць селектар ~, які з'яўляецца агульным селектарам для даччыных элементаў і дазволіць нам «абыйсці» неподходящие.

Ответы

Калі мы публікуем новыя прыёмы распрацоўкі інтэрфейсу, яны могуць не працаваць ва ўсіх браўзэрах. На шчасце, з гэтай праблемай лёгка справіцца. Большасць браўзэраў справяцца з гэтым, але на жаль, сюды нельга аднесці iOS 7 або Android. Для іх мы проста ўсталюем паводзіны формы па змаўчанні.

Для гэтага мы будзем выкарыстоўваць скрыпт Modernizr, каб вызначыць ці падтрымлівае браўзэр праверку элементаў формы. Лепш за ўсё выкарыстоўваць Modernizr для выяўлення гэтых магчымасцяў, але мы можам і самастойна напісаць дадзеную функцыю.  У «Non-Core Detect» ад Modernizr уключаны параметр «forms-validation», таму вам трэба будзе стварыць свае налады бібліятэкі. Пасля таго, як вы ўсталюеце яе, ва ўсіх браўзэрах, які іх падтрымлівае, да элемента html будзе прысвоены клас form validation. Вы можаце наладзіць форму, якая будзе палепшана з дапамогай класа formvalidation для падтрымоўваных браўзэраў.

Бо мы ведаем, што элементы:valid і :invalid будуць працаваць у падтрымоўваных браўзэрах, CSS, які хавае поля ўводу адзіны CSS, які нам трэба, для таго каб выкарыстоўваць з сучаснымі пашырэннямі. Палі ўводу будуць выконваць функцыю па змаўчанні ў тых браўзэрах, якія не падтрымліваюць гэтыя прыёмы.

Вось так вось!

Зараз у вас ёсць выдатныя спосабы, каб вывесьці вашыя формы на новы ўзровень інтэрактыўнага ўзаемадзеяння з вашымі карыстальнікамі. Якія яшчэ моцныя бакі вы можаце ўявіць, выкарыстоўваючы псеўда класы :valid і :invalid? Пагаворым аб гэтым у каментарах!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.