Share
Formularele web sunt în mod constant un subiect fierbinte atunci când vine vorba de designul web și interacțiunea cu utilizatorul. Motivele pentru acest lucru sunt vaste, dar unul dintre motivele cele mai evidente este că formele sunt modul cel mai de bază pentru ca un utilizator să introducă informații în aplicația dvs. În acest articol, vom discuta câteva tehnici care permit formularelor dvs. să răspundă la intrarea utilizatorului, ajutând în același timp la obturarea elementelor inutile confuze sau copleșitoare.
Să începem!
Imaginați-vă un formular ca o conversație pe care o aveți cu utilizatorul dvs. Într-o conversație, există un sentiment de Înainte și înapoi care are loc, în cazul în care fiecare parte solicită celeilalte părți să răspundă. De exemplu, să presupunem că utilizatorul dvs. vine fie să vă înscrieți, fie să vă conectați. În ambele cazuri, aveți nevoie de e-mailul lor, deci conversational, de ce să nu începeți cu asta?
Dați-mi adresa dvs. de e-mail și voi verifica și veți vedea dacă aveți un cont. Dacă da, vă voi cere parola, altfel vă voi da o parolă nouă și apoi veți confirma parola cu mine.
Deci, când utilizatorul ajunge la pagina cu formularul, are un prompt foarte clar: "Care este adresa dvs. de e-mail?"
Știm cu toții tipul ăla. Este tipul pe care îl eviți pentru că vorbește neîncetat și nu pare să ascultă ce ai de spus. Sincer, tipul ăsta e cu adevărat coplesitor și nu sunt sigur că cineva se bucură de asta. Nu fi tipul ăla.
În formele voastre, învățați o lecție de la el. În loc să vă confruntați utilizatorul cu un număr mare de intrări, luați în considerare reducerea volumului de lucru al utilizatorului prin crearea de intrări reactive.
Să aruncăm o privire la un exemplu simplu.
Procesul de autentificare arată astfel: Am introdus adresa de e-mail, apoi introdu parola, apoi apăs pe Enter. În acest exemplu, veți învăța cum să afișați fiecare dintre aceste câmpuri numai după finalizarea câmpului anterior, folosind doar codurile HTML și CSS. Vom construi acest lucru, apoi o versiune modificată.
Să începem cu o primă lovitură la marcaj.
Dacă asta ar părea un pic cam descurajant, nu-ți face griji, o să explic fiecare piesă. Să începem cu intrarea de e-mail. Vedem câteva atribute adăugate la etichetă dincolo de numele. Mai întâi de toate, tipul de intrare este setat la "e-mail"; acesta este un tip relativ nou de intrare care ne dă un comportament special în sprijinirea browserelor. De exemplu, pe iPhone, simbolul "@" se va afișa pe tastatura primară.
O altă caracteristică a tipurilor de intrări este că formele HTML5 au abilități de validare la nivel de browser. Aceasta înseamnă că nu trebuie să scrieți JavaScript pentru a efectua validarea elementelor de bază de formular! Observați că avem atributul "necesar" atât pentru elementele de e-mail, cât și pentru cele de parolă. Odată ce aceste două elemente sunt completate și valorile lor sunt considerate valide de browser, puteți chiar să le vizați cu :valabil pseudo selector.
Acest lucru este minunat, dar am putea face mai bine. De exemplu, browserul acceptă "a @ b" ca un e-mail acceptabil. Motivul pentru aceasta este că o adresă de e-mail ar putea fi configurată pentru a merge la ceva de genul "ceva @ localhost". Parola noastră poate fi orice intrăm, astfel că o parolă de un singur caracter ca "a" ar fi considerată validă. Să adăugăm câteva expresii regulate pentru a rezolva aceste probleme.
Notă: dacă nu sunteți familiarizați cu regexul, este bine! Acoperim o sumă mică pentru a arăta cum ați putea aborda utilizarea acesteia pentru sarcini obișnuite în validarea formularului HTML5, dar puteți rămâne la implementările browserului și continuați să urmați tutorialul. Doar sări peste această secțiune și continuați!
O altă notă: de asemenea, puteți verifica Expresiile regulate pentru Dummies: Seria Screencast de Jeffrey Way.
Să trecem prin fiecare parte a acestor tipare. Expresiile regulate sunt o modalitate de a descrie și comparaţie formatul unui șir.
Vom începe cu modelul de e-mail.
[a-zA-Z] 2, "[2]
Accentsconagua
[^ @] * - potrivi orice număr de caractere care este nu un semn sau un spațiu.@ - un semn @ literal\. - un literal .[A-zA-Z] - orice literă, atât în majuscule cât și în litere mici[A-zA-Z] 2 - orice combinație de două sau mai multe litereCu toate acestea, putem observa că această expresie spune că un e-mail este orice set de caractere, cu excepția unui semn @, urmat de un semn @, urmat de orice set de caractere, cu excepția unui semn @, urmat de o perioadă, urmată de cel puțin două litere.
Putem aplica o regex mult mai simplă dacă vrem să validăm doar pe baza lungimii valorii:
model = "5"
. înseamnă "orice caracter" și 5 spune că trebuie să existe cel puțin 5 dintre ei.
Cu aceste modele în loc, elementul nu va fi considerat valabil până când nu este introdusă o valoare care să satisfacă modelul.
Vom scoate marcajul cu câteva lustruire suplimentară și alte câteva elemente neformate.
Logare
:valabil CSS MagicAcum, când avem un marcaj pentru formularul de conectare, să vedem ce putem face cu CSS pentru a răspunde la intrarea utilizatorului.
Vrem să afișăm următorul element de formular atunci când cel curent este valabil. Să începem prin a ascunde elementele de formă în sine, într-un mod accesibil, astfel încât cititorii de ecran să vadă încă forma completă și astfel ca autocompletarea să poată umple valorile. (Chris Coyier vorbește de ce să nu folosească display: none pe astfel de lucruri aici.) Vom folosi visuallyhidden metoda descrisă în postul lui Chris.
.visuallyhidden position: absolute; overflow: ascuns; clip: rect (0 0 0 0); înălțime: 1px; lățime: 1px; margine: -1px; umplutura: 0; frontieră: 0;
Vom începe cu câteva stiluri de bază.
corp fundal-culoare: # 245245; font-familie: 'Varela Round', sans-serif; h3 culoare: # 555; font-size: 2m; text-transform: majuscule; întrerupere litere: .3em; .login width: 300px; margine: 50 pixeli automat; fundal: # f5f9fa; padding: 50px; raza de graniță: 8px; text-align: centru; introduceți [type = parolă], introduceți [type = email] width: 100%; frontieră: 1px solid #ccc; padding: 8px; box-size: caseta de margine; introducere [type = password]: focalizare, introducere [type = email]: focus border: 1px solid # 888; contur: nici unul; input [type = submit] culoarea fundalului: # F29E1E; lățime: 50%; frontieră: nici una; padding: 8px; box-size: caseta de margine; culoare: #fff; font-familie: "Varela Runda"; dimensiune font: 1em; text-transform: majuscule; intrare [tip = trimite]: hover background-color: # DB8F2A; cursor: pointer; intrare margine: 6px 0;
Acest lucru ne oferă un simplu formular de conectare centrat. Să luăm conceptul ascuns vizual și să îl aplicăm elementelor pe care vrem să le ascundem.
introduceți [type = parola], introduceți [type = submit] overflow: hidden; clip: rect (0 0 0 0); înălțime: 1px; lățime: 1px; margine: -1px; umplutura: 0; frontieră: 0; opacitate: 0; tranziție: opacitate 0.4s, înălțime .4s, căptușeală-.4s, umplutură-fund .4s;
Vom realiza o animație, așa că am extins clasa un pic pentru a include și opacitatea, a eliminat poziționarea absolută și am adăugat definiția tranziției.
Notă: nu includem prefixele furnizorilor pentru tranziție, dar ar trebui!
Acum, să le arătăm atunci când ar trebui să fie afișate, folosind :valabil pseudo selector și + sibling selector.
intrare [tip = email]: valabil + intrare [tip = parolă] opacitate: 1; poziție: relativă; înălțime: 30px; lățime: 100%; clip: nici unul; margine: 12 pixeli auto; frontieră: 1px solid #ccc; padding: 8px; intrare [type = parolă]: valid + intrare [type = submit] opacitate: 1; poziție: relativă; înălțime: 40px; lățime: 50%; clip: nici unul; margine: 12 pixeli auto; padding: 8px;
Este important să țineți cont de scopurile și așteptările utilizatorului într-un formular web. Uneori, este o soluție suficientă pentru a ascunde complet intrările de la utilizator. Cu toate acestea, în unele cazuri, acest lucru poate avea un efect negativ, determinând utilizatorul să simtă că nu este o foaie de parcurs clară pentru procesul de completare a formularului și că poate dura mai mult timp decât sunt pregătiți să renunțe.
O soluție la această problemă ar fi să folosim un fel de obscuritate fără a ascunde complet intrările care ajută la crearea abordării feedback-ului narativ la formele care au un scop clar și așteptări relativ previzibile. Iată o versiune modificată care utilizează scalarea, filtrul de estompare a webkit-ului, opacitatea și pointer-evenimente: nici unul pentru a "prezenta" intrările către utilizator, deoarece acestea sunt disponibile. De asemenea, trebuie să ne asigurăm că evenimentele pointerului sunt restabilite atunci când intrările sunt disponibile, astfel încât utilizatorul să poată face clic pe ele.
corp fundal-culoare: # 245245; font-familie: 'Varela Round', sans-serif; h3 culoare: # 555; font-size: 2m; text-transform: majuscule; întrerupere litere: .3em; .login width: 300px; margine: 50 pixeli automat; fundal: # f5f9fa; padding: 50px; raza de graniță: 8px; text-align: centru; introduceți [type = parolă], introduceți [type = email] width: 100%; frontieră: 1px solid #ccc; padding: 8px; box-size: caseta de margine; introducere [type = password]: focalizare, introducere [type = email]: focus border: 1px solid # 888; contur: nici unul; input [type = submit] culoarea fundalului: # F29E1E; lățime: 50%; frontieră: nici una; padding: 8px; box-size: caseta de margine; culoare: #fff; font-familie: "Varela Runda"; dimensiune font: 1em; text-transform: majuscule; intrare [tip = trimite]: hover background-color: # DB8F2A; cursor: pointer; intrare margine: 6px 0; introduceți [type = parolă], introduceți [type = submit] -webkit-filter: blur (1px); transformare: scară (0,9); opacitate: .4; tranziție: toate .4s; pointer-events: nici unul; introducere [tip = parolă]: valid + intrare [tip = trimite], intrare [tip = email]: valabil + intrare [tip = parolă] pointer-events: auto; -webkit-filter: niciunul; transformare: scară (1); opacitate: 1;
Un bug rapid pentru a sublinia: atunci când un utilizator apasă tab-ul, acestea vor intra în următorul element de formă. Împiedicăm accesarea elementului de formular următor cu pointer-evenimente: nici unul, dar nu există un atribut "focusable" în CSS. În schimb, ar trebui să controlam acest comportament cu o simplă atingere a JavaScript (jQuery flavored).
var inputs = $ ("intrare"); $ (document) .on ("apăsați tasta", "intrare", funcția () inputs.each (funcția (i, el) var $ el = $ (el) )) $ el.next ("intrare") [0] .disabled = false; altceva $ el.next ("intrare") [0] .disabled = true;); Acest JavaScript urmărește intrările formularelor noastre și dezactivează / permite intrările bazate pe starea "validă" a fratelui lor anterior. Acest lucru ne va interzice să focalizăm elementul. pointer-events: nici unul încă funcționează pentru a păstra intrarea de trimitere de la primirea stării de hover.
Imaginați-vă o formă care are mai multe "piste", ca în exemplul nostru "log in sau sign up". Un utilizator poate să selecteze mai multe opțiuni care ar necesita o nouă selecție a elementelor de formular, cum ar fi selectarea unei stări pentru expediere sau un interval de timp pentru rezervarea unei mese. În aceste cazuri, este posibil ca validarea simplă să nu fie suficientă și, în schimb, am folosi o soluție bazată pe JavaScript.
Să luăm, de exemplu, exemplul "log in" sau "sign up". Pentru a rezolva acest lucru, trebuie să întrebăm serverul dacă există un utilizator care se potrivește cu datele de conectare pentru e-mail furnizate.
var timeout; $ (document) .on ("keyup", "input [type = email]" funcția () clearTimeout (timeout); var input = $ (this); timeout = setTimeout "if (data.user_exists) input.parents (" form ")) ) .attr ("action", "/ login") input.addClass ("user_exists"); $ ("input [type = () "input_addClass" ("user_not_exists"); $ ("action", " introduceți [type = parolă] "), filtra (" [nume * = 'înregistrare'] "). În JavaScript-ul de mai sus, trimitem adresa de e-mail la server de la url "/ check_for_user". Serverul va returna un răspuns JSON simplu, similar cu cele de mai jos.
apel invers (user_exists: true);
Pe baza acestei valori, adăugăm o clasă la intrare și schimbăm punctul final pentru formular. De asemenea, setăm parolele relevante necesare. Apoi am putea folosi CSS într-o varietate de moduri pentru a defini ce se întâmplă în continuare. De exemplu, am putea folosi o abordare similară celei anterioare pentru a arăta sau a ascunde intrările.
Dacă vă înscrieți pentru un cont nou, este posibil să fie necesar să afișați câmpul pentru parola de înscriere (mai degrabă decât câmpul pentru parola de conectare). Pentru a face acest lucru, vom folosi ~ selectorul, care este selectorul general pentru frați și ne permite să "sărim" asupra elementelor frățești irelevante.
introduceți [nume = "signup_password"] / * stilurile vizibile ascunse aici * / introduceți [type = email] .user_not_exists: [type = email] .user_exists: valid ~ input [name = "login_password"] stilurile / * "vizibile" merg aici * /
Când împingem noi tehnici în dezvoltarea front-end, ei nu vor lucra tot timpul, în toate browserele. Din fericire, este foarte ușor să faci o schimbare bună în această situație. Suntem acoperiți de majoritatea browserelor importante, dar această selecție, din păcate, nu include iOS 7 sau Android. Pentru browserele care nu sunt compatibile, vom reveni la comportamentul implicit al formularului.
Pentru a face acest lucru, am putea folosi Modernizr pentru a detecta dacă browserul acceptă validarea elementelor de formă sau nu. Este cea mai bună practică de a utiliza Modernizr pentru acest tip de detectare a funcțiilor, dar putem, de asemenea, să scriem o funcție rapidă pentru moment. "Non-Core Detects" de la Modernizr include o opțiune pentru "validarea formularelor", deci va trebui să construiți o descărcare personalizată. Odată ce ați stabilit acest lucru, de sprijin browserele vor primi clasa formularul de validare pe html element. Puteți viza acest lucru formvalidation clasa pentru a îmbunătăți formularul de suport pentru browsere.
.Introducerea formularului [type = password], .formalidation entry [type = submit] / * Ascundeți sau observați intrările și dezactivați evenimentele pointer aici * /
Din moment ce :valabil și :invalid elementele pseudo vor funcționa doar în susținerea browserelor, CSS care ascunde intrările este singurul CSS pe care trebuie să-l folosim cu ajutorul îmbunătățirii progresive. Intrările vor acționa cu funcția lor implicită în browserele non-suport.
Acum aveți câteva moduri interesante de a vă lua formele la un nou nivel de modelare a conversațiilor interactive cu utilizatorii dvs. Ce alte lucruri puternice ți-ai imaginat folosind :valabil și :invalid pseudo-clase? Vorbește despre asta în comentariile!
