Desarrollo Web

HTML5 nos trae varias novedades para nuestros formularios que podemos implementar actualmente, porque a pesar de que HTML5 no estará completamente listo hasta el 2012, muchos navegadores empiezan a implementar algunas de sus características.
En el caso de que utilicemos estas características y el navegador no sea compatible con las misma, simplemente las ignorará sin causarnos mayores problemas.  Incluso podremos condicionar nuestros scripts para que funcionen solo en navegadores sin soporte para las nuevas características de manejo de formularios, por ej si tenemos un script de selección de fechas podremos hacer que funcione solo en Internet Explorer pero que en Opera sea el mismo navegador el que se encargué de mostrarnos su selector de fechas.

Placeholder:

Con este atributo podremos agregar un texto que se verá en el input cuando este esté vacío y no tenga el foco.

<input type="text" placeholder="Search Bookmarks and History">

Actualmente solo es compatible con Chromium/Chrome y Safari 4, para verlo en funcionamiento entrá acá.

Autofocus:

Como su nombre lo indica, con autofocus establecemos que un input tendrá el foco. No tiene mucha ciencia, simplemente agregamos “autofocus” en el elemento:

<input id="q" type="text" autofocus>

Si tenés un molesto script de autofoco en tu web, no te preocupes ya que seguirá funcionando sin importar que el navegador sea compatible o no con el atributo autofocus, pero si queres que el script se ejecute solo si no lo es podes agregar un if de esta forma:

<script>
  window.onload = function() {
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  }
</script>

Nuevos tipos de INPUT

HTML5 nos trae varios nuevos tipos de INPUT, en los navegadores que no los soporten, serán tomados simplemente como type=”text”.

Uno de los nuevos tipos de input es el tipo “email” que nos servirá, justamente, para campos en los que se requiera ingresar una dirección de mail.  Si tenés Opera y ves este demo vas a ver un pequeño icono junto a los campos de este tipo y en iPhone,  el teclado virtual se transformará de esta forma:

Tambien tenemos el tipo URL que nos sirve para direcciones web

 <input type="url">

Para numeros tenemos 2 nuevos tipos, el primero es “number”:

Que como vemos nos deja asignar restricciones de la misma manera que lo hace el tipo “range”:

<input type=”range”  min=”0″  max=”10″  step=”2″  value="6">

Otro punto al que se le prestó mucha atención es al tema fechas, para su manejo contamos con diferentes tipos de campo. Acá dejo algunas capturas de como se ven los diferentes campos para fechas en Opera (Único navegador que actualmente los soporta):

type=”date”

type=”mounth“

type=”week“

type”time“

type=”datetime“

Si queres implementar tu script de selección de fechas solo en los exploradores que no son compatibles con estos tipos de campos, podes implementar una comprobación de esta forma:

<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {
    // No soportado
  }
</script>

Pero esto no termina aća, además tenemos un nuevo tipo de campo especialmente pensado para cajas de búsqueda llamado “search”.

Si usas este tipo de campo en cualquier explorador actual no vas a notar ninguna diferencia, a no ser que uses Safari sobre MacOS X en donde vas a ver el campo type=”search” con las esquinas redondeadas y al empezar a escribir aparecerá una pequeña cruz a la derecha que nos permite borrar el contenido del campo.

Por ultimo tenemos el tipo “color”, que actualmente no es soportado por ningún explorador, pero que en teoría serviría para colores en hexadecimal. Y seguramente será complementado con un selector de color.

Conclusión:

Estas nuevas implementaciones nos simplificaran mucho el trabajo ya que contaremos con soporte nativo para los tipos de datos que mas se manejan en los formularios (bueno, tal vez algunos sean mas inútiles que otros), lo que no hará mas fácil por ej la validación desde el lado del cliente, por cierto, me olvidaba del nuevo atributo  required.

<form>
 <p><label>Nombre: <input name="name" required></label></p>
 <p><label>E-mail: <input name="email" type="email" required></label></p>
 <p><label>URL: <input name="url" type="url"></label></p>
 <p><label>Comentario: <textarea name="comment" required></textarea></label></p>
 <p><input type="submit" value="Enviar"></p>
</form>

Tendremos que esperar unos años hasta que estas características sean totalmente compatibles con los diferentes navegadores, Opera es uno de los que mayor compatibilidad tiene, seguido por Chrome y Safari, pero Internet Explorer y Firefox todavia no soportan ninguna de estas características. Seguramente en los próximos meses empezaremos a ver novedades al respecto en Firefox, pero Microsoft creo que como siempre va a tardar algun tiempo mas.

Pueden leer el articulo original (en ingles) en diveintohtml5.org.