Share
Webformulieren zijn voortdurend een hot topic als het gaat om webdesign en gebruikersinteractie. De redenen hiervoor zijn enorm, maar een van de meer voor de hand liggende redenen is dat formulieren de meest elementaire manier zijn waarop een gebruiker informatie in uw toepassing invoert. In dit artikel bespreken we enkele technieken waarmee uw formulieren kunnen reageren op de invoer van de gebruiker, terwijl ze helpen om onnodig verwarrende of overweldigende elementen te verbergen..
Laten we beginnen!
Stel je een formulier voor als een gesprek dat je hebt met je gebruiker. In een gesprek is er een gevoel van heen en weer die zich voordoet, waarbij elke partij de andere partij vraagt om te reageren. Stel bijvoorbeeld dat uw gebruiker zich aanmeldt of zich aanmeldt. In beide gevallen heeft u hun e-mail nodig, dus een gesprek, waarom niet beginnen met alleen dat?
Geef me je e-mailadres en ik zal controleren of je een account hebt. Als dit het geval is, zal ik je om je wachtwoord vragen, anders laat ik je een nieuw wachtwoord geven en bevestig je dat wachtwoord bij mij.
Dus wanneer de gebruiker met het formulier naar de pagina komt, hebben ze een zeer duidelijke melding: "Wat is uw e-mailadres?"
We kennen die vent allemaal. Hij is de man die je vermijdt omdat hij onophoudelijk praat, en niet echt lijkt te luisteren naar wat je te zeggen hebt. Eerlijk gezegd, die vent is echt overweldigend, en ik weet niet zeker of iemand daarvan geniet. Wees niet die vent.
Leer in uw formulieren een les van hem. In plaats van uw gebruiker te confronteren met een enorm aantal ingangen, overweeg dan om de inputbelasting van de gebruiker te verminderen door reactieve inputs te maken.
Laten we een eenvoudig voorbeeld bekijken.
Het inlogproces ziet er ongeveer zo uit: ik voer mijn e-mailadres in, daarna voer ik mijn wachtwoord in, daarna druk ik op enter. In dit voorbeeld leert u hoe u elk van deze velden alleen kunt weergeven nadat het vorige veld is voltooid, met alleen HTML en CSS. We gaan dit bouwen en vervolgens een aangepaste versie.
Laten we beginnen met een eerste opname van de markup.
Als dat een beetje beangstigend lijkt, maak je geen zorgen, ik zal elk stuk uitleggen. Laten we beginnen met de e-mailinvoer. We zien een paar kenmerken die aan de tag zijn toegevoegd, verder dan alleen de naam. Allereerst is het invoertype ingesteld op "e-mail"; dit is een relatief nieuw type invoer dat ons een speciaal gedrag geeft bij het ondersteunen van browsers. Op de iPhone verschijnt bijvoorbeeld het "@" -symbool op het primaire toetsenbord.
Een ander kenmerk van invoertypen is dat HTML5-formulieren validatiekenmerken op browserniveau hebben. Dit betekent dat u geen JavaScript hoeft te schrijven om validatie uit te voeren op basisformulierelementen! Merk op dat we een "vereist" attribuut hebben op zowel de e-mail- als de wachtwoordelementen. Zodra deze twee elementen zijn ingevuld en hun waarden als geldig worden beschouwd door de browser, kunt u ze zelfs targeten met de :Geldig pseudo-selector.
Dit is geweldig, maar we kunnen het verbeteren. De browser accepteert bijvoorbeeld "a @ b" als een acceptabele e-mail. De reden hiervoor is dat een e-mailadres kan worden ingesteld om naar iets als "something @ localhost" te gaan. Ons wachtwoord kan alles zijn wat we invoeren, dus een wachtwoord met één teken zoals 'a' wordt als geldig beschouwd. Laten we enkele reguliere expressies toevoegen om deze problemen op te lossen.
Notitie: als u niet bekend bent met regex, is dat goed! We behandelen hier een klein bedrag om te laten zien hoe u het kunt gebruiken voor algemene taken in HTML5-formuliervalidatie, maar u kunt de browserimplementaties volgen en toch de zelfstudie volgen. Sla dit gedeelte gewoon over en blijf doorgaan!
Nog een opmerking: je kunt ook de Reguliere Uitdrukkingen voor Dummies: Screencast-serie van Jeffrey Way bekijken.
Laten we door elk deel van deze patronen lopen. Reguliere expressies zijn een manier om dit te doen beschrijven en vergelijken het formaat van een string.
We beginnen met het e-mailpatroon.
pattern = "[^ @] * @ [^ @] * \. [a-zA-Z] 2,"
Accentsconagua
[^ @] * - overeenkomen met een willekeurig aantal tekens niet een @ -teken of een spatie.@ - een letterlijk @ -teken\. - een letterlijke .[A-zA-Z] - elke letter, zowel hoofdletters als kleine letters[A-zA-Z] 2 - elke combinatie van twee of meer lettersAls we dit alles samenvoegen, kunnen we zien dat deze uitdrukking zegt dat een e-mail elke set tekens is, behalve een @ -teken, gevolgd door een @ -teken, gevolgd door een reeks tekens behalve een @ -teken, gevolgd door een punt gevolgd door minstens twee letters.
We kunnen een veel eenvoudigere regex toepassen als we alleen willen valideren op basis van de lengte van de waarde:
pattern = "5,"
De . betekent "elk karakter", en de 5 zegt dat er minstens 5 van hen moeten zijn.
Met deze patronen op hun plaats, zal het element niet als geldig worden beschouwd totdat een waarde die voldoet aan het patroon wordt ingevoerd.
We vullen de opmaak aan met wat extra glans en nog een paar niet-formulierelementen.
Log in
:Geldig CSS MagicNu we wat opmaak hebben voor ons inlogformulier, laten we zien wat we kunnen doen met CSS om te reageren op de invoer van de gebruiker.
We willen het volgende formulierelement laten zien wanneer de huidige geldig is. Laten we beginnen met het verbergen van de formulierelementen zelf, op een toegankelijke manier, zodat schermlezers nog steeds de volledige vorm te zien krijgen en zodat autocomplete de waarden erin kan invullen. (Chris Coyier praat over waarom niet gebruiken Geen weergeven over dit soort dingen hier.) We zullen de visuallyhidden methode beschreven in de post van Chris.
.visuallyhidden position: absolute; overloop verborgen; clip: rect (0 0 0 0); hoogte: 1px; breedte: 1px; marge: -1px; opvulling: 0; rand: 0;
We beginnen met enkele basisstijlen.
body achtergrondkleur: # 245245; font-family: 'Varela Round', sans-serif; h3 color: # 555; font-size: 2em; text-transform: hoofdletters; letter-spacing: .3em; .login width: 300px; marge: 50px auto; achtergrond: # f5f9fa; opvulling: 50px; grensradius: 8px; text-align: center; invoer [type = wachtwoord], invoer [type = e-mail] breedte: 100%; border: 1px solid #ccc; opvulling: 8px; box-sizing: border-box; invoer [type = wachtwoord]: focus, invoer [type = email]: focus border: 1px solid # 888; overzicht: geen; invoer [type = verzenden] achtergrondkleur: # F29E1E; breedte: 50%; rand: geen; opvulling: 8px; box-sizing: border-box; kleur: #fff; font-family: "Varela Round"; lettergrootte: 1em; text-transform: hoofdletters; input [type = submit]: hover background-color: # DB8F2A; cursor: pointer; input margin: 6px 0;
Dit geeft ons een eenvoudig gecentreerd inlogformulier. Laten we het visueel verborgen concept nemen en toepassen op de elementen die we willen verbergen.
invoer [type = wachtwoord], invoer [type = submit] overloop: verborgen; clip: rect (0 0 0 0); hoogte: 1px; breedte: 1px; marge: -1px; opvulling: 0; rand: 0; dekking: 0; overgang: dekking 0.4s, hoogte .4s, padding-top .4s, padding-bottom .4s;
We gaan wat animatie uitvoeren, dus we hebben de klasse een beetje uitgebreid om de dekking op te nemen, de absolute positionering te verwijderen en de overgangsdefinitie toe te voegen.
Notitie: we voegen de leveranciersprefixen voor de overgang niet toe, maar dat zou u wel moeten doen!
Laten we ze nu tonen wanneer ze getoond moeten worden, gebruikmakend van de :Geldig pseudo selector en de + broer of zus selector.
invoer [type = e-mail]: geldige + invoer [type = wachtwoord] dekking: 1; positie: relatief; hoogte: 30 px; breedte: 100%; clip: geen; marge: 12px auto; border: 1px solid #ccc; opvulling: 8px; invoer [type = wachtwoord]: geldig + invoer [type = verzend] dekking: 1; positie: relatief; hoogte: 40px; breedte: 50%; clip: geen; marge: 12px auto; opvulling: 8px;
Het is belangrijk om de doelen en verwachtingen van de gebruiker in een webformulier te beschouwen. Soms is het een voldoende oplossing om de invoer van de gebruiker volledig te verbergen. In sommige gevallen kan dit echter een averechts effect hebben, waardoor de gebruiker het gevoel heeft dat het geen duidelijk stappenplan is voor het invullen van het formulier, en dat het meer tijd kan kosten dan ze bereid zijn op te geven..
Een oplossing voor dit probleem zou zijn om een soort obscuratie te gebruiken zonder de inputs volledig te verbergen die helpen bij het creëren van de narratieve feedbackbenadering van vormen met een duidelijk doel en relatief voorspelbare verwachtingen. Hier is een aangepaste versie die gebruik maakt van schalen, filter voor onscherpte van webkit, dekking en pointer-events: none om de invoer naar de gebruiker te "presenteren" zoals deze beschikbaar is. We moeten ook zorgen dat de pointergebeurtenissen worden hersteld wanneer de ingangen beschikbaar zijn, zodat de gebruiker erin kan klikken.
body achtergrondkleur: # 245245; font-family: 'Varela Round', sans-serif; h3 color: # 555; font-size: 2em; text-transform: hoofdletters; letter-spacing: .3em; .login width: 300px; marge: 50px auto; achtergrond: # f5f9fa; opvulling: 50px; grensradius: 8px; text-align: center; invoer [type = wachtwoord], invoer [type = e-mail] breedte: 100%; border: 1px solid #ccc; opvulling: 8px; box-sizing: border-box; invoer [type = wachtwoord]: focus, invoer [type = email]: focus border: 1px solid # 888; overzicht: geen; invoer [type = verzenden] achtergrondkleur: # F29E1E; breedte: 50%; rand: geen; opvulling: 8px; box-sizing: border-box; kleur: #fff; font-family: "Varela Round"; lettergrootte: 1em; text-transform: hoofdletters; input [type = submit]: hover background-color: # DB8F2A; cursor: pointer; input margin: 6px 0; invoer [type = wachtwoord], invoer [type = submit] -webkit-filter: vervagen (1px); transformatie: schaal (0,9); dekking: .4; overgang: alle .4s; pointer-events: geen; invoer [type = wachtwoord]: geldig + invoer [type = verzenden], invoer [type = e-mail]: geldig + invoer [type = wachtwoord] pointer-events: auto; -webkit-filter: geen; transformeren: schaal (1); dekking: 1;
Eén snelle bug om op te wijzen: wanneer een gebruiker op het tabblad drukt, gaan ze naar het volgende formulierelement. We voorkomen dat met het volgende formulierelement wordt geklikt pointer-events: none, maar er is geen "focusseerbaar" attribuut in CSS. In plaats daarvan zouden we dit gedrag moeten beheersen met een beetje JavaScript (jQuery gearomatiseerd).
var inputs = $ ("input"); $ (document) .on ("toetsaanslag", "invoer", functie () inputs.each (functie (i, el) var $ el = $ (el); if ($ el.is (": valid") )) $ el.next ("input") [0] .disabled = false; else $ el.next ("input") [0] .disabled = true;);); Dit JavaScript bekijkt onze formulierinvoer en schakelt ingangen in / uit op basis van de ": geldige" status van hun vorige broer / zuster. Hierdoor kunnen we het element niet scherpstellen. De pointer-events: geen nog steeds functies om ervoor te zorgen dat onze invoergegevens niet de hover-status krijgen.
Stel je een formulier voor dat meerdere 'sporen' heeft, zoals in ons voorbeeld 'aanmelden of aanmelden'. Een gebruiker kan meerdere opties selecteren waarvoor een nieuwe selectie van formulierelementen nodig is, zoals het selecteren van een verzendstatus of een tijdsbestek voor een reservering voor het diner. In deze gevallen is eenvoudige validatie misschien niet genoeg, en in plaats daarvan zouden we een op JavaScript gebaseerde oplossing gebruiken.
Laten we bijvoorbeeld het voorbeeld van "inloggen" versus "aanmelden" nemen. Om dit op te lossen, moeten we de server vragen of er een gebruiker is die overeenkomt met de opgegeven e-mailaanmelding.
var timeout; $ (document) .on ("keyup", "input [type = email]" functie () clearTimeout (timeout); var input = $ (this); timeout = setTimeout (function () if (input.is ( ": valid")) var email = input.val (); $ .getJSON ("/ check_for_user", email: email, function (data) if (data.user_exists) input.parents ("form") ) .attr ("action", "/ login") input.addClass ("user_exists"); $ ("input [type = wachtwoord]"). filter ("[name * = 'login']"). each ( functie (i, el) el.required = true;) else input.parents ("form"). attr ("action", "/ sign_up") input.addClass ("user_not_exists"); $ (" invoer [type = wachtwoord] "). filter (" [naam * = 'aanmelding'] "). elk (functie (i, el) el.required = true;));)); In het bovenstaande JavaScript sturen we het e-mailadres naar de server via de URL "/ check_for_user". De server retourneert een eenvoudige JSON-reactie, vergelijkbaar met het volgende.
callback (user_exists: true);
Op basis van deze waarde voegen we een klasse toe aan de invoer en wijzigen we het eindpunt voor het formulier. We hebben ook de relevante wachtwoorden ingesteld die vereist zijn. We kunnen CSS op verschillende manieren gebruiken om te definiëren wat er vervolgens gebeurt. We kunnen bijvoorbeeld een vergelijkbare aanpak van vroeger gebruiken om invoer te tonen of verbergen.
Als u zich aanmeldt voor een nieuw account, moeten we mogelijk het wachtwoord voor het aanmeldingswachtwoord weergeven (in plaats van het veld voor het wachtwoord voor inloggen). Om dit te doen, zouden we de ~ selector, de algemene selector voor broers en zussen, en stelt ons in staat om over de irrelevante elementen van de broer of zus te 'springen'..
invoer [naam = "signup_password"] / * visueel verborgen stijlen hier * / invoer [type = email] .user_not_exists: geldig ~ invoer [naam = "signup_password"] / * "zichtbare" stijlen ga hier * / invoer [type = email] .user_exists: valid ~ input [name = "login_password"] / * "zichtbare" stijlen ga hier naartoe * /
Wanneer we nieuwe technieken in de front-end ontwikkeling pushen, zullen ze niet altijd werken, in alle browsers. Gelukkig is het heel gemakkelijk om te gaan met een goede terugval in deze situatie. We zijn opgenomen in de meeste grote browsers, maar deze selectie bevat helaas geen iOS 7 of Android. Voor niet-ondersteunde browsers gaan we gewoon terug naar het standaard formuliergedrag.
Om dit te doen, kunnen we Modernizr gebruiken om te detecteren of de browser de validatie van formulierelementen ondersteunt. Het is het beste om Modernizr te gebruiken voor dit soort functiedetectie, maar we kunnen nu ook een snelle functie schrijven. De "Niet-kerndetecten" van Modernizr bevatten een optie voor "formulierenvalidatie", dus u moet een aangepaste download maken. Zodra je dit hebt ingesteld, ondersteunen browsers krijgen de klasse van formuliervalidatie op de html element. Je kunt dit richten formvalidation klasse om het formulier voor het ondersteunen van browsers te verbeteren.
.formvalidation input [type = password], .formvalidation input [type = submit] / * Verberg of versluier uw invoer en schakel pointer-events hier uit * /
Sinds de :Geldig en :ongeldig pseudo-elementen werken alleen in het ondersteunen van browsers, de CSS die de invoer verbergt, is de enige CSS die we nodig hebben om progressieve verbetering te gebruiken. De ingangen werken met hun standaardfunctie in niet-ondersteunende browsers.
U hebt nu een aantal coole manieren om uw formulieren naar een nieuw niveau van interactieve gespreksmodellering met uw gebruikers te brengen. Welke andere krachtige dingen heb je je voorgesteld met behulp van de :Geldig en :ongeldig pseudo klassen? Praat erover in de comments!
