Resumen: En este artículo explicamos como validar de forma sencilla formularios usando HTML5 y CSS3, de forma que ahorramos tiempo con la simplicidad de códigos que supone el nuevo HTML5.
Validar formularios con HTML5 y CSS3
Imagina que te encuentras en un Viernes a las 5 de la tarde, estás a punto de salir del trabajo y en el último momento llega una petición urgente para realizar un formulario para el sitio de ventas de la empresa. Necesitas validarlo muy bien porque de ello depende que los datos del cliente lleguen al servidor de manera correcta y además necesitas darle al formulario un estilo adecuado porque es la imagen de la empresa la que está en juego.
Por tu parte ya no quieres saber nada del trabajo, es Viernes, falta 1 hora para irte a disfrutar de tu fin de semana y lo que menos deseas hacer es crear y validar un formulario, pero debes entregar algo para que sea probado en QA. Es entonces que HTML5 entra al rescate y te ayuda a validar tus campos con una serie de atributos sencillos de aprender y aplicar, los cuales simplemente debes incrustar en el código del formulario.
Al momento de crear los elementos del formulario de la siguiente manera:
1
2
3
| <input id ="nombre" name="nombre" type="text" /><input id ="email" name="email" type="text" /><input id ="telefono" name="telefono" type="text" /> |
Indicamos que los tres serán de tipo texto, se les asigna un id y un nombre respectivo para posteriores funciones de validación, las cuales cotidianamente llevábamos acabo en el lado cliente con Javascript.
Con esta declaración clásica tendríamos que validar que el texto introducido en el campo email realmente lleve la estructura deseada, con un nombre de usuario seguido de una “@” y finalmente el dominio, para ello podemos usar una expresión regular o simplemente podemos cambiar el atributo “type” del elemento “input” con HTML5, declarándolo como email de la siguiente manera:
1
| <input id ="email" name="email" type="email" /> |
Ahora al momento de introducir un texto nos pedirá que sea con esa estructura, en caso de no ser así enviará una advertencia generada y dependiente del propio navegador. Hay que recordar que hasta el momento HTML5 sólo es interpretado por los navegadores estandarizados como Chrome, Safari, Opera y Firefox.
El atributo “type” puede tener otro valores como “url” (dirección de internet), “tel” (teléfono) o “password” (contraseña) que ayudarán a hacer una validación más sencilla, además de agregar especificación al formulario y permitir que se pueda aplicar estilos por tipo a los distintos campos.
Podemos agregar atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo, por lo que si no se introduce un valor en él, el formulario no se enviará.
1
| <input id ="email" name="email" type="email" placeholder="ejemplo@dominio.com" required /> |
El atributo “autofocus” se emplea para designar el campo seleccionado por defecto al momento de cargar la página, esto elimina la necesidad de recurrir a scripts para lograr esta función. Ahora se puede representar de la siguiente manera:
1
| <input id ="nombre" name="nombre" type="text" required autofocus/> |
Lo que anteriormente se hacía así:
1
2
| <input id ="nombre" name="nombre" type="text" /><script>document.getElementById('nombre').focus();</script> |
Con esto podemos construir un formulario rápido y sencillo en nuestro hosting. Siguiendo los estándares y recomendaciones queda estructurado de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <form id="pago"><fieldset><legend>Datos personales</legend><ol><li><label for="nombre">Nombre</label><input id="nombre" name="nombre" type=text placeholder="Escribe tu nombre completo" required autofocus></li><li><label for="email">Email</label><input id="email" name="email" type="email" placeholder="ejemplo@dominio.com" required></li><li><label for="telefono">Teléfono</label><input id="telefono" name="telefono" type="tel" placeholder="Ej. +4466212112154" required></li><li><label for="pais">País</label><input id="pais" name="pais" type="text" required></li></ol></fieldset><fieldset><legend>Datos de tarjeta de crédito</legend><ol><li><label for="numtarjeta">Número</label><input id="numtarjeta" name="numtarjeta" type="number" placeholder="Ej. 555-444-333-222" required></li><li><label for="nomtarjeta">Nombre</label><input id="nomtarjeta" name="nomtarjeta" type="text" placeholder="Nombre exacto del propietario" required></li></ol></fieldset>-------------------------------------------------<fieldset><button type="submit">Realizar compra</button></fieldset></form> |
Y para concluir agregamos estilo a nuestro formulario, primero nos enfocamos en la parte general, le damos un fondo de color “SteelBlue”, modificamos su tamaño de letra a 12 píxeles, agregamos un borde de color “LightSteelBlue” y le damos un toque extra con las puntas del borde redondeadas.
1
2
3
4
5
6
7
8
9
10
11
12
| form#pago {margin:auto;background: SteelBlue;color: white;font-size: 12px;padding: 30px;width: 350px;border:solid 10px LightSteelBlue;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;} |
Quitamos las lineas de los fieldset para que no contrasten con el diseño.
1
2
3
| form#pago fieldset {border: none;} |
Le agregamos color al borde de los campos, redondeamos su borde y los alineamos a la derecha dándoles un tamaño de 200 píxeles, lo que los alinea sin la necesidad de recurrir a tablas.
1
2
3
4
5
6
7
8
9
10
11
| form#pago input{font-size:12px;background: white;border:solid 1px LightSteelBlue;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;float: right;margin-right: 15px;width: 200px;} |
Finalmente arreglamos los elementos de la lista para que no se muestren los números y agregar un poco de espacio entre líneas.
1
2
3
4
| form#pago ol li {line-height: 25px;list-style: none;} |
Y si queremos agregar un estilo o color particular para que los campos obligatorios sean distinguidos, podemos recurrir a alguna de los siguientes códigos:
1
2
3
4
5
6
7
| form#pago [required]{border:solid 1px red;}input:required {outline: 1px solid red;} |
Con esto obtenemos un formulario bastante decente para nuestra web o blog, que se puede construir en menos de 10 minutos, dejándonos respirar y permitiéndonos salir a tiempo del trabajo para disfrutar nuestro fin de semana.
No hay comentarios:
Publicar un comentario