9 HTML-codes voor gebruiksvriendelijke formulieren

Webhosting, Wordpress - 14 november 2017 - door Aksana Mikhalap

Codes voor formulieren

Mocht je invoervelden op je website of app hebben zoals een contact-, bestel- of een zoekformulier, dan is het handig om dit artikel aandachtig te lezen. Er bestaat namelijk een handigheidje om jouw klanten wat stappen en daarmee tijd te besparen bij het invullen van deze velden op een telefoon of tablet. 

Wanneer je bijvoorbeeld jouw telefoonnummer in moet vullen in een veld, dan is het vaak vanzelfsprekend dat de toetsenbord van jouw telefoon meteen verspringt naar cijfers. Of wanneer je jouw e-mailadres in moet vullen, dan zie je ook direct een @ op je toetsenbord verschijnen. Hoe weet jouw telefoon dit eigenlijk? Simpel, doordat er een regel code toegevoegd is aan het veld door de webmaster. Jammer genoeg maakt nog lang niet iedereen hier gebruik van, terwijl deze simpele stappen de mobiele gebruikservaring ontzettend kunnen verbeteren. Zorg er daarom voor dat jij deze kans wel benut! 😉

Hier een lijstje met 9 handige code’s die je kunt gebruiken om je formulier(en) gebruiksvriendelijker te maken voor smartphones:

Tekst

Het invoerveld waar tekst ingevuld moet worden is het meest gebruikte veld. Je ziet het bijna op elke website die formulieren bevat. Voor het tekstuele invoerveld kun je de volgende code gebruiken om de telefoon te laten weten dat hier enkel tekst ingevoerd hoeft te worden.

<input type=”text”>

Tekst code formulier

Je ziet dat het toetsenbord op de telefoon alleen maar letters bevat bij een invoerveld voor tekst.

E-mail

Vraag je jouw bezoekers om een e-mailadres achter te laten, bijvoorbeeld om leads te verzamelen? Dan is het wel zo slim om de telefoon door middel van deze code te laten weten dat de gebruikers een toetsenbord met een @-teken, .com en nog andere handige tekens voor e-mail te zien moeten krijgen, zodat ze deze niet eerst hoeven te zoeken en direct hun e-mailadres in kunnen vullen.

<input type=”email”>

Je ziet dat op het toetsenbord nu een @ en . bijgekomen zijn. Deze tekens helpen je bezoekers om sneller hun e-mailadres in te kunnen vullen zonder de benodigde tekens eerst op te moeten zoeken.

Telefoonnummer

Wil je het telefoonnummer van je bezoeker weten? Zorg er dan voor dat je de bezoeker een numeriek toetsenbord voorschotelt bij het invoerveld van het telefoonnummer. Op deze manier hoeven je potentiële klanten niet te switchen van hun toetsenbord en draagt dit bij aan een verbeterde mobiele ervaring op jouw website. Gebruik alleen tel in de code wanneer je alleen een nummer wilt. Anders krijg je er nog een hoop andere tekens bij, die helemaal niet relevant zijn.

<input type=”tel”>

Telefoon code formulier

Met deze code wordt het numerieke toetsenbord direct opgeroepen op een smartphone, wanneer je bezoekers het veld aanklikken waar ze hun telefoonnummer moeten invullen.

Wachtwoord

Kunnen mensen inloggen op jouw website of app met een wachtwoord? Denk er dan goed over na of je hier wel een wachtwoordveld van wilt maken. Deze code zorgt er namelijk voor dat je websitebezoekers niet zien wat ze intypen. Er komen dan zwarte balletjes in beeld in plaats van tekens. Soms kunnen bezoekers dit als irritant ervaren, maar soms is het ook wel handig. Zeker als het om gevoelige informatie gaat, zoals wachtwoorden. Je weet nooit of er iemand over je schouder mee aan het kijken is.

<input type=”password”>

Wachtwoord code formulier

Deze code maakt het invoeren van een wachtwoord een stuk veiliger.

Geboortedatum

Wil je de geboortedatum van iemand weten? Dan moet je dit ook communiceren door middel van een code. Je ziet nog te vaak dat er gewone tekstvelden worden gebruikt met verschillende beperkingen, wat weer zorgt voor een hoop gepriegel en irritatie. Je doet er dus goed aan om de volgende code te gebruiken bij invoervelden waar een datum ingevuld moet worden.

<input type=”date”>

Datum & tijd

Ook zie je nog steeds vaak dat wanneer je een datum en tijd moet kiezen, er een enorm lang menu uitrolt waar je veel te lang doorheen moet scrollen om de juiste datum en tijd te selecteren. Gelukkig wordt het met deze code een stuk eenvoudiger en minder tijdrovend.

<input type=”datetime”>

Maand

Met deze code krijg je een lijst met maanden te zien waarbij de huidige maand als eerste wordt weergegeven.

<input type=”month”>

Zoekveld

Een handig stukje code wanneer je een zoekveld gebruikt, waarbij de button ‘Go’ op het toetsenbord veranderd naar ‘Search’.

<input type=”search”>

URL

Wil je een invoerveld gebruiken waarbij je om een URL vraagt? Deze code zorgt voor een kleine aanpassing op het toetsenbord zoals het weglaten van de spatie. Domeinnamen bevatten geen spatie dus is deze ook niet relevant. In plaatst daarvan staat er een punt, / en .com (wanneer je .com ingedrukt houdt dan krijg je ook andere extensies te zien).

<input type=“url”>

URL code formulier

Wil je jouw mobiele website of app gebruiksvriendelijker maken? Match dan je invoervelden met het toetsenbord op de mobiele telefoon door middel van de codes in dit artikel.

 





Reacties zijn gesloten.