Formulierelementen stijlen, bijna alle designers willen het. Meestal is er dan niet meer te zien dan iets een select is, of een checkbox, maar er bestaan ook goede designers die er iets bruikbaars van weten te maken. In die gevallen is het fijn om te weten dat dit in webkit browsers kan. Het is een g

Een aardige enhancement van selects. Vooral handig als je gebruik wilt maken van multiple selects of als je hele lange lijsten in je select hebt staan. Nadeel is dat er geen gebruik meer wordt gemaakt van native form-elementen, een select klapt bijvoorbeeld niet meer uit over het chrome van je venste

Er zijn verschillende manieren om een gebruiker van een site een nieuw item aan te laten maken. Je kan bijvoorbeeld de klassieke wizard gebruiken waarbij je in een paar stappen alle nodige gegevens invult, je kan ook een itempagina in z'n geheel aanpasbaar maken. Luke Wroblewski somt te voor en nadel

Soms kan je bij een online dienst inloggen met je facebook of twitter account. Handig, tenzij je vergeet met welk van die twee accounts je ook al weer was ingelogd. Luke Wroblewski heeft eens onderzocht hoe je deze manier van inloggen zo prettig mogelijk kunt maken. Ik vond de uitkomst verrassend!

In de volgende versie van Firefox (die wellicht niet meer zo lang op zich laat wachten) zit het

HTML5 forms hebben naast de bekende nieuwe input types (zoals email, url, date) ook het enorm handige pattern-attribuut waarin je met behulp van regular expressions een validatiepatroon kunt aangeven. Mensen die niet zo goed zijn in regular expressions kunnen natuurlijk telkens de hulp inroepen van S

Handige pagina waarme je even snel kunt checken of een formulierfeature al werkt in je browser.

Roy Tomeij wilde weer eens in de Daily Nerd staan en schreef dus een uitgebreid artikel over het placeholder attribuut: hoe je het moet gebruiken én vooral ook hoe je het niet moet gebruiken en waarom. Erg goede uitleg en een must read voor iedereen die wel eens een formulier ontwerpt of bouwt

Een aardige kijk op de usability van een inschrijfformulier. Dingen als e-mail verificatie en wachtwoordherhaling, zijn die nu echt wel nodig?

Een aantal alleraardigste tips voor prettiger formulieren.

Het oninput event is handig en met wat extra javascript werkt het ook in oude browsers. Must read voor frontend developers.

Het superhandige oninput event kan je zeer eenvoudig emuleren in oude browsers. Hoe? Mathias Bynens legt het uit.

Placeholders kunnen handig zijn maar er kleven ook wel wat nadelen aan; een van die nadelen is dat de placeholder verdwijnt zodra een form-element focus krijgt: met een beetje pech weet je niet meer wat je ook al weer moest invullen. Robert Nyman heeft een script geschreven wat het placeholder-gedrag

Als je te maken hebt met designers die het internet niet begrijpen, klanten die het internet niet begrijpen en als ze ook nog eens niet naar je willen luisteren en er absoluut op staan dat formulierelementen speciaal gestyled moeten worden omdat de designer echt wel even beter weet wat de gebruiker p

Hoe bouw je een formulier? Met de juiste elementen natuurlijk. Maar wat zijn de juiste elementen en wanneer moet je ze wel (of juist niet) gebruiken. Must read voor iedereen die wel eens een formulier maakt.

De beta-versie van Chrome biedt tegenwoordig experimentele ondersteuning voor spraak-input: praten tegen HTML. Experimenteel in de nogal brede zin van het woord, als ik mijn naam inspreek maakt ie er "mercedes for sale" van. Nee, die is niet te koop.

HTML5 forms zijn te gek alleen is de ondersteuning er van nog niet optimaal. Op deze pagina staat wat de huidige browsers zoal ondersteunen. Het zou mooi zijn als deze pagina up to date blijft.

Mozilla maakt gebruik van HTML5 formulier elementen en van de bijbehorende validatie. Aardig artikeltje met duidelijke voorbeelden.

Formulieren op mobieltjes zijn nog vervelender en lastiger in te vullen dan op de desktop. In dit artikel wordt er gekeken naar de verschillen. Interessant!

Er kleven wat nadelen aan het geven van focus aan een formulierveld zodra een pagina geladen wordt, de meest voordehandliggende is wel dat Backspace niet meer werkt als Back-button. Tibo Beijen somt alle verdere nadelen op en gaat buitengewoon diep in op autofocus. Mocht je ooit argumenten nodig hebb

Ppk heeft de nieuwe HTML5 forms onderzocht in de huidige generatie browsers, zowel desktop als mobiel. De conclusie is kort samengevat: ruk. Maarrrr, mensen met een developer-build van Chrome weten bijvoorbeeld dat sommige van deze issues inmiddels zijn verholpen.

Het placeholder attribuut is een van die fijne kleine juweeltjes die HTML5 ons biedt. Maar hoe zit het met de toegankelijkheid er van? Lees dit artikeltje, onthoud wat er in staat, pas het immer toe en dan zit het er wel goed mee.

Een lijstje met tips om sign up formulieren eenvoudiger, prettiger in gebruik en dus wellicht succesvoller te maken.

Een van de lastigste dingen om te stylen is de combinatie <fieldset> en <legend>, de standaard styling is een heel bijzondere die niet te overschrijven is met CSS. Dat is denk ik een van de redenen dat <legend>s zo weinig gebruikt worden. Maar nu kan je ze gewoon weer gaan gebruiken want Martin Sutherland geeft een eenvoudige maar goed werkende oplossing voor dit probleem: een extra <span>netje.

RT @dboudreau: Three rules for creating accessible forms » #a11y #forms #bestPractices

Documenting a handy progressive enhancement pattern for the HTML5 datalist element:

New #html5 support in Opera 11: <progress>, <meter>, placeholder, type=color, tel, search, wobbly bubbles

Allemaal deze bug even upvoten.

HTML5 Forms Validation in Firefox 4

Interessante resultaten bij een onderzoek naar het beschrijvender en leesbaarder maken van formulieren. Zou misschien wel eens leuk kunnen worden. En gaat natuurlijk ook vaak verkeerd gebruikt worden maar dat hoort er bij.

Briljante opmaak van formulieren met OL's, CSS step increment en ander prachtigs

Ben het wel eens met het idee dat stipjes ipv letters bij het invullen van een wachtwoord niet echt handig of veilig is. Vooral vertragend en soms zelfs frustrerend.

Mooie inlogschermen. Belangrijke note voor frontenders: laat inlogformulieren nooit submitten met ingewikkelde scripts, gebruik gewoon een POST of een GET: wachtwoordmanagers kunnen hier vaak niet mee omgaan. IPV functionaliteit toevoegen voor de gebruiken haal je dus functionaliteit weg. Maak dit ook duidelijk aan IO en VD.

Zeer uitgebreid visueel onderzoek naar het gedrag van from-elements op verschillende browsers.

Erg vriendelijk aanmeldformulier.

Je kan met CSS3 form elementen nog beter en slimmer stijlen dan met CSS2, alleen wordt dit nogal slecht ondersteund: alleen Opera en Firefox ondersteunen dit voldoende. Onthouden voor over een paar jaar.

Net dat extra stukje functionele stijling van form elementen voor browsers die het ondersteunen (geen IE6 dus). Oude browsers kunnen de boel gebruiken, moderne browsers zien het net even gelikter.

Eindelijk een interessant artikel op Ddux: hoe ontwerp je goede formulieren?

Scriptje om inputs zonder label toch toegankelijk te houden

Hoe formulieren/contactmogelijkheden dus niet moeten werken. Orange fuckt up

Formulieren vormgeven. Een paar verschillende manieren worden hier vergeleken:

Hierbij een zeer uitgebreid overzicht van alle formelementen op verschillende browsers op verschillende besturingsstystemen. Het is een onderzoek naar hoe stijlbaar deze elementen zijn via CSS. Een conclusie die ik er uit trek is dat form elementen niet e

Een stel studenten heeft een onderzoek gedaan naar formulieren. Op Marketingfacts staat een aantal praktische tips

Aardige standaard HTML voor formulieren