comparte el articulo 

Validar formularios con HTML5 y CSS3

Actualizado el 27/11/2011 < > 8 Cometarios

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.

Para muchos desarrolladores, la creación y validación de formularios son un par de las tareas más frustrantes y menos entretenidas al momento de realizar páginas web para nuestro dominio. Su proceso de marcado y de estilo pueden resultar monótonos y hasta tediosos, ya que consisten en repetir muchas líneas de código y reciclar operaciones,

Al momento de llevar acabo su validación, nos debemos asegurar de distintas maneras que no se pueda inyectar datos y no se puedan filtrar errores, por lo que generalmente verificamos los datos tanto del lado cliente y como del lado del servidor, teniendo que idear e implementar una larga serie de expresiones regulares que al final del día nos van a desesperar, pero que van a lograr la tarea de lograr un mejor formulario.

Como desarrollador, sabes que los formularios tienen que estar bien estructurados, que deben ser lo más seguro posibles y a la vez debes darles una muy buena presentación, el simple hecho de pensar en ello puede causar desánimo en varios, pero con HTML5 combinado con CSS3 podemos crear maravillas en pocos minutos.

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:

<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:

<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á.

<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:

<input id ="nombre" name="nombre" type="text" required autofocus/>

Lo que anteriormente se hacía así:

 <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:

 <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.

 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.

 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.

 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.

 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:

 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.

>>> Podemos ver aquí el ejemplo en funcionamiento <<<

Vale aclarar que esto es sólo aplicable para la validación del lado cliente, hay que recordar que siempre debemos realizar una validación del lado del servidor, aunque en muchas ocasiones solo sea por precaución, debemos asegurar la veracidad de los datos.

HTML5 nos ofrece esta nueva alternativa para realizar un filtrado a un nivel aún más bajo, si deseas combinarlo con Javascript y algún framework esta más que permitido, la seguridad nunca sobrará para un sitio.

Publicado el 31/08/2010, última actualización 27/11/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: ISC Daniel Ernesto Navarro Herrera de OK Hosting Mexico

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

8 Cometarios

  1. Salvador Galindo

    Hola que tal se me hizo muy interesante la publicacion que realizas con el valor required que se utiliza en html5, yo me estoy iniciando apenas, y mi pregunta seria la siguiente, como se validaria un combo usando html5, y sin usar javascrip como validacion de segunda forma, de antemano saludos y gracias

    Jueves, 8 de marzo 2012

  2. Mariana Sann

    Hola!, muchas gracias por tu explicación, me fue de mucha ayuda, solo tengo una pregunta, al validar el campo del teléfono, se garantiza que solo sean ingresados números?, uso Chrome y al parecer no hay problema con que le meta caracteres que no sean numéricos . GRACIAS

    Martes, 20 de marzo 2012

  3. Leonardo

    si en el campo Telefono es de tipo tel … no me deberia dejar escribir letras.. y si lo hace, probare con la propiedad pattern a ver que sale!

    Sábado, 21 de abril 2012

  4. Didier Stanley

    Esta Muy bueno el ejemplo, Me gustaria que publicaran un pequeño archivo donde esten a disposicion las posibles validaciones que se hacen con simple codigo html5

    Viernes, 18 de mayo 2012

  5. Marcos

    La validación del correo electrónico tampoco la valida correctamente ya que solo comprueba si contiene el carácter @ pero si no pones el dominio te lo da por bueno. Por ejemplo, si introduces asdfg@asd te lo valida como correcto.
    ¡Saludos!

    Jueves, 31 de mayo 2012

  6. Carlos

    ya yo he probado el required y si funciona

    Lunes, 10 de diciembre 2012

  7. daniel

    Tengo firefox 16 pero al colocat , solo me aparece el tooltiptext “por favor lene este campo”, pero se me ve hidden, que debo colocar?

    Viernes, 4 de enero 2013

  8. CMARTINEZ

    Excelente que publiques este material.. muchas gracias.

    Saludos.

    Miércoles, 15 de mayo 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras