Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios.
En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manejo en si para verse más atractivos.
En este capítulo, vamos a ver una pequeña muestra a las nuevas características de los formularios en HTML5. Y entenderemos que sus nuevas características son muy importantes para la web de hoy.
Ahora, ten en cuenta que no todos los navegadores soportan estas novedades y quienes lo hacen muestran los resultados a su manera, pero Empecemos:
Todos sabemos que La etiqueta <input> especifica un campo de entrada donde el usuario puede introducir datos. Bueno, en HTML5 vemos que tiene varios tipos de entrada o <input>. Estas nuevas características permiten un mejor control de entrada y validación.
Tipos de datos
<input type=text>: especifica que el usuario debe de llenar el campo con texto
<input type=email>: especifica que el usuario debe de llenar el campo con un email valido
<input type=url>: especifica que el usuario debe de llenar el campo con url
<input type=color>: especifica que el usuario debe de llenar el campo con un color
<input type=date>: especifica que el usuario debe de llenar el campo con una fecha
<input type=month>: especifica que el usuario debe de llenar el campo con unos de los meses
Algunos ejemplos de elementos HTML5
Atributos de validacion
Los atributos de validacion permiten hacer que una casilla de texto o textbox acepten un solo tipo de datos como los mencianados anteriormente y HTML5 validara que el dato sea correcto, antes debia hacerse con javascript o jquery.
Un ejemplo de la validacion de un email
<form action="form.php"> E-mail: <input type="email" name="email" /><br /> <input type="submit" /> </form>
El Atributo Keygen
Siempre que utilizamos clave nos gustaría poder encriptarla para mayor seguridad
El propósito del elemento de <keygen> es proporcionar una forma segura para autenticar usuarios.
La etiqueta <keygen> especifica un campo generador de dos de claves en un formulario.
Cuando se envía el formulario, dos claves se generan, una privada y una pública.
La clave privada se almacena localmente, y la clave pública se envía al servidor. La clave pública se podría utilizar para generar un certificado de cliente para autenticar el usuario en el futuro o bien para guardar como contraseña en una base de datos o validar sesiones.
<form action="demo.php" method="get"> Usuario: <input type="text" name="usuario"> Clave: <keygen name="seguridad"> <input type="submit"> </form>
El atributo Autofocus
El autofocus o enfoque automático proporciona una forma declarativa para enfocar un control de formulario durante la carga de la página. Anteriormente, un desarrollador necesita para escribir Javascript utilizando control.focus (). La nueva forma permite al navegador hacer cosas inteligentes como no centrar el control si el usuario ya está escribiendo en otro.
<form action="form.php"> Nombre:<input type="text" name="fname" autofocus="autofocus"/><br /> Apellido: <input type="text" name="lname" autofocus="autofocus"/><br /> E-mail: <input type="email" name="email" autofocus="autofocus" /><br /> <input type="submit" /> </form>
