Un formulario es un elemento en HTML por que es lo que nos permite introducir datos y por ello también interactuar con la web y su base de datos, por lo que requiere controles desde el punto de vista de la seguridad, ya que desde un formulario podremos enviar archivos a un servidor, para procesar un pedido o un pago, seleccionando diferentes elementos y controles de un formulario, que luego sera procesados por un evento javascript o por algún otro lenguaje de programación web.
Muchas veces los desarrolladores debemos utilizar diferentes librerías para poder realizar tareas en formularios para poder controlar los eventos y en algunos casos debemos que recurrir a algunos métodos indeseables de código para enviar datos, controlar lo que se ingresa, evitar inyecciones de código o ataques XSS.
Si queremos realizar todos estos controles y eventos podemos encontrarnos con una gran cantidad de archivos javascript que aumentan considerablemente el peso de la web en kb y ralentizan la pagina. Además es inseguro porque si alguien deshabilita el uso de Javascript todos los controles dejaran de funcionar.
Los elementos de formularios y atributos en HTML5 proporcionan un mayor grado de control y marcado semántico que su versión anterior, se han añadido atributos y propiedades que permiten eliminar la necesidad de realizar controles en forma externa mediante scripts. Las características formularios en HTML5 proporcionan un mejor control y no depende de que este habilitado o deshabilitado Javascript en su navegador.
Mediante la propiedad placeholder podemos indicar un ejemplo del tipo de dato a dar de alta, esto permite brindar información al usuario para que le sirve de guía. Este texto que indicamos dentro del control desaparecerá luego de que el usuario ingrese un carácter.
El atributo placeholder solo puede utilizarse en cajas de texto o en textareas.
El atributo patrón nos permite definir nuestra reglas para validar el dato que ingresa el usuario usando expresiones regulares. Una expresión regular, es una secuencia de caracteres que define un patrón de datos, por ejemplo, el patrón [a-z] indica que el usuario solo puede ingresar letras en minúscula o el patrón [0-9] indica que solo se podrán ingresar números.
HTML5 permite utilizar patrones, así si los caracteres ingresados no coinciden con el patrón definido automáticamente generará un error.
Vamos a definir algunas reglas con patrones y hojas de estilo para cambiar de color el borde si se producen el evento invalid, es decir que lo ingresado por el usuario no cumpla con lo definido en un patrón determinado.
Creamos un archivo Ejemplo01.html y escribimos el siguiente código:
<html>
<body>
<style>
input:invalid {
border: 1px solid red;
}
input:valid {
border: 1px solid green;
}
span {
width:100px;
margin:5px;
display:inline-block;
}
</style>
<h3>Patrones con Expresiones Regulares</h3>
<form action="">
<!-- El usuario solo podrá ingresar letras en minuscula o mayuscula
y con un minimo de 8 caracteres y un maximo de 16 -->
<span>Usuario</span><input type="text" name="usuario" pattern="[A-Za-z]{5-16}" title="Debe ingresar 5 caracteres como mínimo">
<br>
<!-- Definimos una clave donde se deberan ingresar como minimo 8 caracteres -->
<span>Clave: </span><input type="password" name="clave" pattern="{8,}" title="Debe ingresar 8 caracteres como mínimo" >
<br>
<!-- Definimos el patron para validar email usuario@dominio.extension -->
<span>E-mail: </span><input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="El email no es válido">
<br>
<!-- Definimos el patron para fecha con formato dd/mm/yyyy o dia/mes/año -->
<span>Fecha </span><input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}" title="La fecha no es válida">
<br>
<!-- Definimos el patron para ingresar precio con dos decimales -->
<span>Precio </span><input type="text" pattern="\d+(\.\d{2})?" title="El precio no es válido">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Si enviamos el formulario, validará cada campo respecto al patrón definido y en caso de que no se cumpla mostrará el mensaje que definimos en la etiqueta title, ademas utilizara los estilos definidos en la regla y propiedades CSS de la clase invalid que utiliza HTML5.
Por ejemplo ingresamos un email incorrecto:
También ingresamos una fecha incorrecta y vemos que no permite enviar el formulario. Si queremos mejor o añadir un efecto visual, podemos utilizar CSS para añadir un icono de fondo en el control donde se produce el fallo. Por ejemplo añadimos los siguientes estilos css a los que ya teníamos, cambiamos los input a input[type='text'] para que las hojas de estilo solo afecten a las cajas de texto y no al botón.
<style>
input:invalid {
border: 1px solid red;
}
input:valid {
border: 1px solid green;
}
span {
width:100px;
margin:5px;
display:inline-block;
}
input:invalid {
background-image: url(novalido.png);
background-position: right top;
background-repeat: no-repeat;
}
input:valid {
background-image: url(valido.png);
background-position: right top;
background-repeat: no-repeat;
}
input[type='submit']
{
background-image:none;
border:solid 1px #000000;
}
</style>Utilizamos los siguientes iconos:
A continuación a cada control añadimos la propiedad required, por ejemplo:
<input type="text" name="usuario" required pattern="[A-Za-z]{5,}" title="Debe ingresar 5 caracteres como mínimo">Al ejecutar el ejemplo podremos ver que si enviamos el formulario con campos vacíos nos mostraran los campos requeridos y los válidos.
La ventaja de los patrones es que no utilizamos JQuery ni otro tipo de validación y si se desactiva esta opción en el navegador seguirán funcionando las restricciones y reglas que definamos. Esto no implica que al enviar el formulario evitemos controles al procesar los datos ya sea para guardar en una base de datos o enviarlos por mail o ejecutar cualquier operación.
Algo que era complejo de hacer es enviar un mismo formulario a dos paginas diferentes, supongamos un único formulario de login que según se pulas un botón ira a paginas distintas donde las consultas y el proceso de información cambia. Esto se hace definiendo la propiedad formaction, donde indicamos otra opción de proceso al action por defecto.
<html>
<body>
<style>
span {
width:100px;
margin:5px;
display:inline-block;
}
</style>
<h3>Formulario con multiples envios</h3>
<form action="productos.php">
<span>Usuario:</span><input type="text" name="usuario"><br>
<span>Clave:</span><input type="text" name="clave"><br>
<input type="submit" value="Acceso Productos"> <input type="submit" formaction="ventas.php" value="Acceso Ventas">
</form>
</body>
</html>
No hay duda de que interactuar con este tipo de propiedades y atributos facilitan mucho el desarrollo de sitios web, sin tener que utilizar librerías externas y complejos códigos javascript.
Como diseñadores y desarrolladores, normalmente nos encontramos con una escritura tiene una cierta monotonía estructurar html y validar, sobre todo a escribir reglas de validación y luego mostrar al usuario cuando hay un fallo. HTML 5 introduce estos nuevos atributos, tipos de entrada y otros elementos para que debamos escribir menos código y nos centremos mas en la semántica que en la sintaxis.
Estas reglas funcionan en todos los navegadores, independiente del sistema operativo y no necesitamos utilizar otras librerías o hacks para adaptar a los diferentes sistemas o dispositivos. Hemos visto varios atributos de formulario que ayudan a mejorar la experiencia del usuario y ahorrar tiempo de desarrollo. Hay algunos atributos que aun no funcionan en todos los navegadores.
