Vi bruger formularer næsten hver dag til login, tilmelding, køb osv., så de formularer vi laver skal være så smertefrie som muligt. Kendo UI for Angular er et bibliotek af UI-komponenter, der hjælper dig med at lave fantastiske formularer hurtigere. Vi vil oprette et par formularer her for at vise nogle muligheder for formularer, der ikke giver dine brugere lyst til at rive deres hår ud 😉. Med hvert eksempel vil vi også se på, hvorfor dette kan være en bedre mulighed end det, vi typisk ser i internettets vilde verden.
Udover hvad vi vil dække, når vi bygger disse formularer, er der tre andre store fordele ved at bruge Kendo UI til Angular-komponentbiblioteket:indbygget tilgængelighed, standarddesign og native Angular-komponenter. Vil du gøre dine formularer mere tilgængelige for flere mennesker? Hvem gør ikke?? Input- og dropdown-komponenterne i Kendo UI-biblioteket er i overensstemmelse med Section 508-kravene, tilbyder WAI-ARIA-support, følger WAI-ARIA-best practices for tastaturnavigation og er blevet testet mod populære skærmlæsere. Inputkomponenterne tilbyder også Right-to-Left (RTL)-understøttelse (evnen til at håndtere og reagere på brugere, der kommunikerer gennem højre-til-venstre-sprog såsom arabisk, hebraisk, kinesisk og japansk) samt lokalisering, som hjælper os oversætter komponenter til forskellige sprog. Grundlæggende er bedre tilgængelighed inkluderet!
Styling er svært, det vil jeg være den første til at indrømme. Jeg er en stor fan af at have Kendo UI standard styling eller Bootstrap til at gøre alt det tunge løft, især når det kommer til styling former. Når vi har tilføjet komponenterne til vores skabelon, kan vi inkludere vores standard, Bootstrap eller endda et brugerdefineret tema for at tage sig af al vores formstyling. Kendo UI Theme Builder gør det, så vi kan prøve stilarterne, se hvilken vi kan lide, og derefter nemt få det anvendt på alle vores komponenter. Sidst, men bestemt ikke mindst, er disse komponenter ikke indpakninger. Komponenterne er bygget fra bunden til at være native Angular-komponenter, så vi kan drage fordel af AoT, Tree Shaking &Universal Rendering lige ud af kassen!
Hvis du lige er begyndt med Kendo UI for Angular, kan du tjekke vores Kom godt i gang-dokumentation eller denne Gif-guide til at komme i gang.
Lad os nu grave i disse formularer!
I dette indlæg vil vi se nærmere på to hovedemner, hver med fire fokuspunkter:
Input
- Blind adgangskodeindtastning
- Kapitalisering og inputkontrol
- Fejlvalidering
- Indstillingstyper for input
Navigation
- Formularfeltfokus
- Tastaturnavigation
- Progresslinje
- Formularfelttitel
Indgange
Formularer er egentlig kun en række input, men vi har mulighed for at hjælpe brugere ved at skabe forskellige strategier for at hjælpe dem med at lægge deres information ind i disse input. Hvor mange gange har du f.eks. indtastet en adgangskode, der var skjult og derefter tænkt:🤔 "hmmm huskede jeg at sætte '?" i midten?" Hvad med det raseri, der kommer af at udfylde en hel formular, bare for at have et felt forkert og så skulle udfylde hele formularen igen!
Har vi ikke alle haft det sådan mindst én gang?
Der er også små ting, som når du skal skifte til tastaturet med store bogstaver på din telefon bare for at skrive dit fornavn med stort i ét felt, og derefter skifte igen for at skrive dit efternavn med stort i det næste felt.
Blind adgangskodeindtastning
Standardindtastningsfelterne for adgangskode er at ændre hvert tegn, en bruger indtaster, til et '*' for at skjule det for nysgerrige øjne og holde vores adgangskode hemmeligt. Jeg må indrømme tænkte, at jeg er en stor fortaler for ikke skjule adgangskoder. Det meste af tiden, når jeg udfylder en adgangskode, er jeg enten hjemme eller på min mobiltelefon, så jeg er ikke så bekymret for, om andre kan se, hvad jeg skriver. Jeg er meget mere bekymret over, at jeg ikke har indtastet adgangskoden korrekt, så jeg har en tendens til at 1. stille spørgsmål til mig selv 2. trykke kommando + A for at rydde hele feltet 3. starte forfra (4. nogle gange gentage trin 1-3 😡). Så måske er det tid til at ændre, hvordan vi opretter disse adgangskodefelter.
Lad os se, hvordan det ser ud ved at prøve en adgangskodeinput, der forbliver synlig med en mulighed for at skjule den og et skjult kodeordsfelt, der giver os mulighed for at se det. Vi bruger ordet "skjul" i det første eksempel, og i det andet bruger vi Kendo UI Icon Font til at indstille et øjeikon, så brugeren kan afsløre deres adgangskode.
Kapitalisering og inputkontrol
Jo mindre at tænke en bruger skal gøre, mens han udfylder formularen, jo bedre. Små ting som at skrive de første bogstaver i "fornavn" og "efternavn" kan også reducere stress, især for mobilbrugere. Vi kan endda lave et input kun tage de tegn, vi anmoder om. Det er her Kendo UI's Masked Text Box virkelig skinner. Denne inputkomponent lader os formatere den maskerede værdi, når brugeren interagerer med komponenten ved at indsætte eller skrive i inputfeltet. Her er et eksempel på brug af en almindelig indtastning for at sikre, at det første bogstav er stort, og brug af den maskerede tekstboks til at formatere brugerens input:
Fejlvalidering
Validering af hvert felt, når brugeren bevæger sig væk fra det, hjælper dem med det samme at indse fejlen og rette den. Når du bruger det maskerede tekstfelt, som vi gjorde ovenfor, kan vi nu prøve den indbyggede validering. Dette giver os mulighed for at kontrollere, om inputtet er gyldigt, og giver os en egenskab på templateForm.valid for at indstille andre egenskaber, som vi gør i eksemplet med disabled knappens egenskab. Nu, hvis inputtet ikke er gyldigt, vil en bruger ikke være i stand til at indsende deres fejlagtige svar 🤘.
Indstillinger for input
Teknisk set kunne vi har en almindelig tekstboks til hvert spørgsmål i vores formular. gab 😴 I stedet for at gøre vores form monoton og åh så kedelig, kan vi tilføje skydere, multi-select dropdowns og switches. Kendo UI tilbyder flere inputtyper og rullemenuer, så vi kan gøre vores formular nemmere og mere intuitiv at udfylde. Tjek et par af disse muligheder nedenfor for spørgsmål om dato, ja/nej og interval.
Navigation
Processen med at udfylde en formular, især lange formularer, kan være ret kedelig. En måde at gøre det værre på er ved ikke at dirigere en bruger gennem vores formularer. I dette afsnit vil vi se på, hvordan man hjælper brugeren med at navigere ved at bruge fokus, så de kan bruge deres tastatur til at navigere gennem formularen, opdatere brugeren om deres progression og hjælpe dem med statiske etiketter af formularens inputfelter.
Formularfeltfokus
Ved at rette fokus på vores side til det sted, hvor brugeren i øjeblikket indtaster data, lader vi dem bruge den kognitive energi på den aktuelle opgave:at indtaste deres information. Vi kan indstille vores allerførste formularinput til at have autofokus, så når brugeren åbner siden med vores formular, kan de straks begynde at skrive deres svar. Alle Kendo UI-indgangene har en focus begivenhedsudsender vedhæftet, så vi endda kan vedhæfte en interaktion, hver gang en bruger fokuserer på det pågældende inputfelt.
Tastaturnavigation
Når brugere skriver deres oplysninger, er det nogle gange nemmere for dem bare at lade hænderne på deres nøgler for at navigere til næste input. Det er her, tastaturnavigation i vores formularer ville være meget værdsat. Alle Kendo UI-inputkomponenter kommer med indbygget tastaturnavigation. For eksempel kan du på kontaktindgangen nedenfor trykke på mellemrumstasten for at skifte dit svar, og i rullemenuen med flere valg kan vi trykke på pil ned for at gå gennem listen og trykke på Enter ved hvert nyt valg.
Progresslinje
Er denne formular stadig i gang? Vil det nogensinde ende? Hvor er jeg?
Okay, måske er det ikke det dramatisk, men der er noget meget lettende ved at få at vide, at vi er 75 % færdige med en formular. Vi kan også vejlede vores brugere ved at fortælle dem, hvilket spørgsmål de er på, og hvor mange flere der er tilbage. Nedenfor er et eksempel på en type tæller, der tager højde for, hvor mange input der er i alt, og hvor mange brugeren har afsluttet.
Formularfelttitel
Som skabere af vores formularer vil vi altid kende formularen bedre end vores brugere. Så vi bør ikke antage, at når brugeren tabulerer til det næste inputfelt, kan vi fjerne indikatoren for, hvad de formodes at skrive i det inputfelt. Dette er grunden til, at vi bør holde en etiket på vores formularinput mærket, selv mens en bruger skriver deres svar. Her kan vi prøve et par forskellige etiketplaceringer for at se, hvilken der passer til stilen på vores websted eller mængden af plads, vi har til vores formular.
Din tur 😁
Nu hvor du har kodestykker og alle disse ideer, så tjek Kendo UI til Angular-komponenter for at prøve det selv. Fortæl mig, hvis du har eller skaber endnu bedre måder, hvorpå vi kan lave frustrationsfrie formularer. Kan ikke vente med at se, hvad du skaber! Glad kodning 🤙
Ressourcer
Her er nogle ekstra ressourcer for mere information om formularer, Kendo UI og Angular:- Live Demo:Building User-Friendly Forms with Angular- Whitepaper:Planning an Angular Application- Webinar:Conquer Angular UI Faster and Easier with Kendo UI for Angular