MATERIAL HTML5 FORMULARIOS

FORM (autofocus)

En HTML5 disponemos una propiedad en los controles de los formularios que nos permiten indicar cual control tendrá foco (es decir que aparecerá el cursor en su interior)
Anteriormente esta actividad se la realizaba mediante Javascript, pero como vemos varios tipos de problemas ahora se los puede resolver directamente con HTML.
Para que aparezca un control con foco lo único quetenemos que hacer es disponer la propiedad autofocus sin asignarle valor.
Problema
Confeccionar un problema que solicite la carga del nombre de usuario, una clave y la edad. Hacer que cuando aparezca el formulario en pantalla automáticamente tome foco el control donde se debe ingresar la edad.
Solución

Usuario:



Clave:



Edad:

Podemos observar que lo único que hemos agregado al control donde se ingresa la edad es la propiedad autofocus:

Si a ningún control se agrega la propiedad autofocus por defecto no aparece ningún control con foco y será el usuario que tendrá que seleccionar uno.
Solo tiene sentido incluir la propiedad autofocus a un único control de una página web, sino el resultado es impredecible.
FORM (placeholder)

Normalmente cuando creamos un formulario previo a cada control disponemos un mensajeindicando que dato debe cargar el usuario en el mismo, en algunas circunstancias dicha información puede quedar no lo suficientemente clara. Mediante la propiedad placeholder podemos disponer más información directamente dentro del control generalmente con un ejemplo de dato a ingresar. El contenido del control HTML inicial se borra inmediatamente luego que el operador ingresa un caracter.
Esimportante tener en cuenta que debemos utilizar la propiedad placeholder si la información que disponemos en ella despeja de dudas al operador.
Problema
Confeccionar un formulario que solicite la carga de la patente de un automóvil, tener en cuenta que toda patente esta formada por seis caracteres: los tres primeras son alfabéticos y los tres segundos numéricos.
Solución

Patente:

Como vemos al control que deseamos agregar esta marca de agua (o mensaje inicial) inicializamos la propiedad placeholder:
Luego en el navegador podemos observar la marca de agua:


FORM (required)

Otra facilidad que nos proporciona el HTML5 es la validación de contenido obligatorio de un control. Mediante la propiedad required obligamos e informamos al operador que el control se debe cargar obligatoriamente (por ejemplo el nombre de usuario, clave, estudios etc.)
Esto se hacía únicamente con Javascript pero ahoraagregando la propiedad required al control la validación de contenido se hace automáticamente.
Nuevamente estamos en presencia de una propiedad que no requiere que le asignemos un valor, con solo hacer referencia a la misma dentro del control el navegador verificará que su contenido esté cargado previo a enviarlo al servidor.
Problema
Confeccionar una página que solicite la carga del nombre deusuario y una clave. No permitir enviar los datos al servidor si alguno de los controles está vacío, emplear para esto la propiedad required.

Usuario:



Clave: