HTML5: Inputs

26jul/101

Vamos a jugar con ustedes, lean este pequeño archivo HTML ¿les resulta familiar?

<html>
<head>
<title>HTML 5 Inputs</title>
</head>
<body>
<form>
<input type="text" name="nombre" placeholder="Nombre" /><br>
<input type="text" name="apellido" autofocus /><br>
<input type="url" name="url" value="http://" /><br>
<input type="email" name="email" placeholder="Aquí ingresa tu Email" /><br>
<input type="submit" name="Enviar" value="Enviar" /><br>
</form>
</body>
</html>

A más de uno sí, porque el que nunca usó la etiqueta <input> nunca desarrollo una aplicación 2.0 Pero, en el código hay algo raro ¿lo pueden ver? Y son atributos nuevos y atributos de atributos nuevos también Veamos qué onda con esto, línea por línea (del form unicamente )

<input type="text" name="nombre" placeholder="Nombre" />

Acá vemos una vulgar etiqueta <input type="text">, pero con algo raro, un atributo que nadie conocía (bah, capáz), que es placeholder. Pero... ¿exáctamente que hace ese atributo? Bueno, ahí te comento, lo que hace es escribir el valor que vos le pusiste en el mismo <input>, pero que al hacer click en el mismo desaparece. ¿No entendiste un pito? No te preocupes, acá tenes una linda demo.

Pasemos a la siguiente línea:

<input type="text" name="apellido" autofocus />

También, otro "input text", pero con un atributo sin valor (y más vale que nunca lo tenga) que se llama autofocus. ¿Qué hace? Le dá un efecto focus al borde del input. De todas maneras, si no entediste, te repito, hay una demo:

<input type="url" name="url" value="http://" />

¿type="url"? Crazy, me parece que te equivocaste... no, para nada, así es, lo que hace este valor del atributo type es OBLIGAR al usuario a tener que ingresar una URL, si no, no deja enviar el formulario. No puedo dejar demo acá, porque no hay formulario que enviar, y el efecto no puede ser visto, pero más debajo dejo un archivo para que vean.

<input type="email" name="email" placeholder="Aquí ingresa tu Email" />

¿type="text"? También, obliga al usuario a dejar su email, pero de forma válida, es decir, ya no tendremos que usar esas molestas validaciones con Javascript. Tampoco puedo dejar demo acá porque tampoco hay un form

DESDE ACÁ podés ver el demo de todos los nuevos atributos de HTML5. Espero que los hayan disfrutado y usen en sus proyectos!

Suerte!
Es posible que no vean ninguno de los efectos, consecuencia que no tienen un navegador que soporte HTML5; y puede ser que no vean el efecto autofocus pero está, lo pueden ver en el archivo demo