Formularios Web 2

Voy a mostrar algunas de las nuevas funcionalidades que han llegado con el W3C HTML5: los Formularios Web 2.

Autofocus y omisión de atributos

Los nuevos formularios Web permiten hacer la validación, y un amplio número de otras características, de una forma más declarativa, lo que es mucho más fácil para el autor. Por ejemplo, este código:

Con la nueva funcionalidad se pueden escribir de la siguiente manera:

Algunas partes de código se han quitado del ejemplo y un nuevo atributo, el autofocus, se ha añadido. El atributo autofocus ha eliminado la necesidad de usar el elemento de secuencia de comandos y el atributo id que era utilizado por el script. El atributo de método en el elemento de formulario se puede omitir porque se hace una solicitud GET de forma predeterminada. Del mismo modo que los controles de entrada de texto por defecto. Por los Formularios Web 2 también se puede omitir el atributo de acción cuando se establece en la cadena vacía. De hecho, le dará el mismo resultado.

Formulario de validación

Hoy en día los desarrolladores web utilizan scripts ingeniosos para llevar a cabo la validación de formularios en el cliente. Muy pronto tu podrás simplemente escribir lo siguiente:

Cuando el usuario intenta enviar el formulario de los controles del usuario, si todas las condiciones se están cumpliendo y si ese es el caso, envía el formulario y en caso contrario se muestra un mensaje de error al usuario.  Mejor para la facilidad de uso y su ancho de banda.

Lo que hemos introducido en el ejemplo anterior son algunos de los nuevos controles: correo electrónico y URL. Y también un nuevo atributo a disposición de todos los controles de formulario: required. Además de esto, los formularios Web Forms 2 también incluyen controles para las fechas, hora y números.

Controles de estilo

Si quieres añadir estilos a un control de formulario requerido (<input required>)  es bastante trivial, con algunas de los nuevas pseudo-clases:

Similar para los controles deshabilitados, casillas de verificación (checkboxes), el botón de envío por defecto, los controles de sólo lectura, etc:

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *