HTML 5 maakt browsers slimmer
Dated dinsdag 24 januari 2012
Tags: webdesign
Browsers zijn van nature vrij domme programma's. Het belangrijkste doel van de browser is het lezen van HTML en CSS en de pagina op de juiste manier weergeven. Het "slimme" van een website word meestal toegevoegd door middel van javacript of server side code zoals php of asp.
Browsers neemt taken over
Met HTML 5 wordt een deel van deze taken overgenomen door de browser. Het belangrijkste onderdeel is validatie: is een formulier correct ingevuld. Klopt het e-mail adres? Is de opgegeven waarde inderdaad een telefoonnummer?
Met nieuwe formulier velden, zoals tel, email, color en datetime, kan de controle op de syntax door de browser over worden genomen. Vanuit veiligheidsredenen is het natuurlijk altijd goed om alsnog een controle op de server uit te voeren.
Meer dan alleen valideren
Naast het niet meer zelf hoeven te schrijven van de javascript, hebben deze velden ook nog andere voordelen:
Omschrijvend
de velden geven een omschrijving van wat ze moeten doen, geen exacte definitie. Dit betekend dat ze aangepast kunnen worden. Mocht de syntax van een e-mail veld ooit veranderen wordt de validatie automatisch in de browser aangepast.
Standaard
Deze velden zullen op steeds meer website worden gebruikt. Als een gevolg hiervan raken ook steeds meer gebruikers gewend aan de manier waarop deze velden werken. Dit maakt formulieren voorspelbaarder en dus makkelijker in te vullen.
Context
Door deze velden te gebruiken weet de browser wat je van de bezoeker verwacht. Hier kan de brower zich op aanpassen. Zo wordt op een mobiel bijvoorbeeld het toetsenbord aangepast aan het e-mail veld, zodat het makkelijker wordt een e-mail adres op te geven.
{"jsfiles":["\/cms\/BB\/JSDivers\/jquery.flippy.js","\/cms\/BB\/JSDivers\/switchtomobile.js","\/cms\/BB\/JSDivers\/iScroll\/iscroll-lite.js","\/cms\/BB\/Form\/Fields\/CpFormDate.js","\/cms\/BB\/JSDivers\/touch2.js","\/cms\/BB\/Ajax\/simpleajax.js","\/cms\/BB\/JSDivers\/webcoding.js","\/cms\/BB\/JSDivers\/check.js","\/cms\/BB\/JSDivers\/loadparts.js","\/cms\/BB\/JSDivers\/cms-actions.js"],"cssfiles":["\/cms\/BB\/CSS\/touch\/website.css","\/cms\/BB\/CSS\/touch\/mobile.css","\/css\/mobile.css","\/cms\/BB\/CSS\/buttons.css","\/cms\/BB\/CSS\/touch\/general.css","\/cms\/BB\/CSS\/touch\/cms.css","\/cms\/BB\/Form\/Fields\/CpFormDate.css","\/cms\/CBB\/Modules\/CRM\/CmsModuleImportMail.css","\/cms\/CBB\/Modules\/Standard\/CmsModuleManuals.css"],"javascriptlines":["\nvar created_keepSessionAlive = false;\nif (typeof keepSessionAlive !== \u0022function\u0022) {\ncreated_keepSessionAlive = true;\nkeepSessionAlive = function() {\njQuery.post(\u0022\/keep-session-alive\u0022);\nwindow.setTimeout(\u0022keepSessionAlive()\u0022, 300000);\n}\n}\nif(created_keepSessionAlive){\nwindow.setTimeout(\u0022keepSessionAlive()\u0022, 300000);\n}","CPJS.vLoadPluginOn(\u0027cpform\u0027, {})","CPJS.bWhenReady([\u0022touch\u0022], function() { Touch.sBrowserType = \u0027Android\u0027; } )","CPJS.bWhenReady([\u0022touch\u0022], function() { Touch.fBrowserVersion = \u00277.0\u0027; } )","CPJS.bWhenReady([\u0022logdisplay\u0022,\u0022rpc\u0022,\u0022touchsite\u0022,\u0022stacking\u0022,\u0022showwaiting\u0022,\u0022storage\u0022,\u0022googleAnalytics\u0022,\u0022popups\u0022], function() { CPJS.touchsite.vInit(false) } )","var CmsStatic_iNewItemPage = 33426;","var sTabletMenuColor1 = \u0027#5990B3\u0027;","var sTabletMenuColor2 = \u0027#2786C2\u0027;","var aDictionary = new Array();","aDictionary[\u0027postponeTo\u0027] = \u0027verplaats naar\u0027;","aDictionary[\u0027tomorrow\u0027] = \u0027morgen\u0027;","aDictionary[\u0027dayAfterTomorrow\u0027] = \u0027overmorgen\u0027;","aDictionary[\u0027nextWeek\u0027] = \u0027volgende week\u0027;","CPJS.bWhenReady([\u0022stacking\u0022], function() {\nCPJS.stacking.iToolbarWidth = \u0022100%\u0022;\nCPJS.stacking.iSlideLefMargin = 0;\n} )",""]}
