Maand: oktober 2011

Vereenvoudig toch die input in HTML4

Met de komst van HTML5 komen een groot aantal nieuwe mogelijkheden beschikbaar om te gebruiken bij nieuwe  websites.

Eén van die nieuwe features is het toekennen van specifiekere input control types. Voorheen waren er maar een paar standaard inputvelden (textbox, checkbox, radiobutton, etc.). Nu zijn er een aantal nieuwe varianten beschikbaar ter ondersteuning van de invoer van bv. URL’s en e-mailadressen.

Hier volgt een rijtje overgenomen uit w3schools:

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 5.1
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 5.1
search No 4.0 11.0 10.0 No
color No No 11.0 12 No

Voorheen moest hiervoor een textbox omgezet worden tot een maatwerk control mbv. JavaScript (bv. via jQueryUI) Het is de bedoeling dat huidige en toekomstige browsers dus speciale controls gaan verzinnen om de gebruiker te ondersteunen (eenheid in invoer) en de ontwikkelaar te ontlasten (geen extra werk).

Zoals hierboven te zien, zijn er al een aantal browsers druk bezig met die integratie. De laatste tijd wordt ook druk gewezen dat het al toegepast kan gaan worden bij de bouw van websites. Dit is leuk voor de gebruiker van nieuwe (mobiele) browsers want deze hebben een virtueel toetsenbord die reageert op het invoertype. Bij de invoer van een e-mailadres wordt al direct een @ beschikbaar gesteld.

Handig dus.

En deze nieuwe input types worden naar het ‘text’ type vertaald door oudere browsers. Maar waarom zien we dan niet dat bedrijven dit massaal gaan toepassen?

Ik maak zelf ook gebruik , net als vele anderen, van Gmail. Maar het viel me op dat ook Google nog niet echt warm loopt:

Zoals je ziet, wordt het standaard toetsenbord aangeboden op de iPad op deze pagina. Ik moet er wel bij zeggen dat, hoewel de invoer van een e-mailadres wordt gesuggereerd, ook niet-e-mailadressen ingevoerd mogen worden. Maar dan nog heeft, wat mij betreft, het e-mailadres-toetsenbord de voorkeur. Google laat na om de suggestie voor de invoer van een e-mailadres te versterken met het juiste toetsenbord:

<span>Gebruikersnaam:</span>
<br />
  <input type="text" name="Email" id="Email" size="18" value=""  />
<br />

Ik heb mezelf de vraag gesteld, is het dan wellicht alleen in HTML5 website mogelijk om die nieuwe types te gebruiken. Dus ik heb een pagina samengesteld, afgeleid van de standaard Visual Studio 2010 aspx template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
Home Page
</title>
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
</div>
</div>
<div class="main">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit
<a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find
<a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
</form>
</body>
</html>

Deze heb ik laten valideren. En deze pagina is XHTML 1.0 strict:

Vervolgens heb ik enkele HTML5 elementen aan toegevoegd zoals een URL, een email-adres en een numeriek veld:

<p>
  <label>Enter a url:</label>
  <input type="url" name="fname" />
  <br />
  <label>Enter an email address:</label>
  <input type="email" name="lname" />
  <br />
  <label>Enter a number:</label>
  <input type="number" name="lname" />
  <br />
  <input type="submit" value="Submit" />
</p>

Zie dat de types URL, EMAIL en NUMBER zijn. Natuurlijk is mijn pagina nu niet meer honderd procent gevalideerd:

De drie velden zijn van een ‘onbekend’ type:

Dus we hebben hier een niet-HTML5 scherm en er staan drie HTML5 elementen op. En het werkt! Zoals hieronder zichtbaar is, wordt netjes het gewenste URL toetsenbord getoond:

en het email-toetsenbord:

En het numeriek toetsenbord:

Conclusie

Niets houdt ons tegen om in bestaande webpagina’s al de nieuwe input typen toe te passen. Dit verhoogt heel simpel het gebruiksgemak voor gebruikers met moderne (mobiele) browsers.

English: Liked the examples but could not understand the Dutch gibberish? Want to know more? Please contact me!