Pon al día tus formularios con validación de CSS3 y HTML5

() translation by (you can also view the original English article)

Veamos como crear formularios que validan la información del usuario en el lado del cliente. Una vez hecho, veremos como embellecerlo usando CSS. ¡Incluyendo un poco de CSS3!

Paso 1: Conceptualización y Funcionalidad

Primero debemos conceptualizar como se verá y funcionará nuestro formulario. Por ejemplo, crearemos un simple formulario de contacto que pregunte por la siguiente información del usuario:

Nombre
Correo Electrónico
Sitio Web
Mensaje

Queremos estar seguros que el usuario ingrese la información correcta. Para conseguir esto usaremos las nuevas técnicas de validación en el lado del cliente de HTML5. ¿Qué hay sobre los usuarios que no tengan capacidades de HTML5? Podemos simplemente usar validación en el lado del servidor, pero eso va mas allá del ámbito de este artículo.

Paso 2: Conceptualizacion del Formulario

Hagamos una idea de como queremos que se vea nuestro formulario creando un bosquejo rápido.

Como pueden ver, nuestro formulario esta hecho de las siguientes partes:

Encabezado del formulario Notificación de los campos requeridos
Nombres de Campos de texto
Campos de texto Texto de Referencia (Placeholder Text)
Instrucciones de campos (Form Field Hints)
Botón de envío

Ahora que hemos especificado de que elementos esta hecho nuestro formulario, podemos crear el HTML.

Paso 3: Código Inicial HTML

Crearemos nuestro básico marcado HTML del bosquejo creado.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Contact Form</title>
	<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
</body>
</html>

Hasta este punto, nuestro archivo HTML aparecerá en blanco en el buscador. Este es simplemente código para comenzar una página con HTML5.

Paso 4: Formulario HTML

Crearemos el código HTML del formulario (dejaremos el método action en blanco por ahora, ya que validación en el servidor no sera cubierta en este tutorial):

1	<form class="contact_form" action="" method="post" name="contact_form">
2	</form>

Paso 5: Elementos del formulario HTML

Para mantener el contenido de nuestro formulario organizado, mantendremos los elementos (label, input, etc) en una lista. Comenzaremos creando el encabezado del formulario y nuestro primer campo de entrada:

<ul>
    <li>
         <h2>Contact Us</h2>
         <span class="required_notification">* Denotes Required Field</span>
    </li>
    <li>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </li>
</ul>

Instrucciones de campos

Como visto en nuestro bosquejo, tendremos instrucciones de formato para los campos de "Correo" y "Sitio Web". Entonces agregaremos las instrucciones bajo el campo de entrada (input) cuando sea necesario, y le daremos una clase para poder estilizarlos después.

<li>
	<label for="email">Email:</label>
	<input type="text" name="email" />
	<span class="form_hint">Proper format "name@something.com"</span>
</li>

El resto de Elementos `Input`

Crearemos el resto de elementos, recordando envolver cada uno en un elemento de lista (li).

<li>
	<label for="website">Website:</label>
	<input type="text" name="website" />
	<span class="form_hint">Proper format "https://someaddress.com"</span>
</li>
<li>
	<label for="message">Message:</label>
	<textarea name="message" cols="40" rows="6" >
</li>
<li>
	<button class="submit" type="submit">Submit Form</button>
</li>

Paso 6: Agregando el Texto de Referencia

Una de las primeras mejoras que HTML5 nos trae a formularios (una con la cual probablemente ya se ha familiarizado) es la habilidad para crear textos de referencia (placeholder text). El texto de referencia es mostrado cuando el campo de entrada esta vacío o desenfocado.

Agreguemos el atributo placeholder a nuestros elementos input. Estos ayudaran a nuestros usuarios a entender que es lo que deben escribir en cada campo.

<input type="text" name="name" placeholder="John Doe" />

<input type="text" name="email" placeholder="john_doe@example.com" />

<input type="text" name="website" placeholder="http://johndoe.com/" required/>

Consejo Rápido: Estiliza tu texto de `placeholder`

Si deseas estilizar tu texto de referencia, hay algunos prefijos de buscadores que te ayudarán a hacerlo:

:-moz-placeholder {
	color: blue;
}

::-webkit-input-placeholder {
	color: blue;
}

El soporte para el atributo placeholder esta bien establecido en buscadores modernos (excepto por IE9, lastimosamente). Si de verdad necesitas tenerlo en todos los buscadores, hay algunas soluciones a través de javascript las cuales te pueden ayudar.

Paso 7: CSS Básico

Agreguemos un poco de CSS para darle un poco de estructura a nuestro formulario. Les mostraré las reglas:

Remover Estilo de `:focus`

Webkit automáticamente agrega algunos estilos a los campos de entrada cuando son enfocados. Ya que agregaremos los nuestros, queremos primero remover estos de defecto:

1	*:focus {outline: none;}

Estilos Tipográficos

Agreguemos algunos estilos tipográficos a los elementos:

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}

.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}

.form_hint, .required_notification {font-size: 11px;}

Estilos de lista

Agregaremos estilos a los elementos de lista para crear un poco de estructura:

.contact_form ul {
    width:750px;
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
}
.contact_form li{
	padding:12px; 
	border-bottom:1px solid #eee;
	position:relative;
}

También agregaremos un fino borde en la parte superior e inferior del formulario. Podemos lograr esto usando los selectores :first-child y :last-child. Estos seleccionan, como el nombre lo indica, el primer y ultimo elemento en la lista <ul>.

Esto agrega un muy útil seccionamiento visual a nuestro formulario. Mantenga en mente que estos selectores CSS no son soportados en buscadores antiguos. Ya que no es vital para el funcionamiento del formulario, solo estamos premiando a aquellos usuarios que usan buscadores modernos.

1	.contact_form li:first-child, .contact_form li:last-child {
2	border-bottom:1px solid #777;
3	}

Encabezado

Estilizaremos la sección de encabezado de nuestro formulario. Estos incluye la etiqueta del encabezado y la notificación que informa usuarios que el asterisco (*) indica campos requeridos.

.contact_form h2 {
	margin:0;
	display: inline;
}
.required_notification {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}

Elementos de Entrada de Texto

Estilizaremos los elementos principales de nuestro formulario, los que serán usados para colectar la información del usuario.

.contact_form label {
	width:150px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}
.contact_form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

Ahora, agregaremos algunos estilos visuales adicionales. Algunos de estos son estilos CSS3 que solo serán premios para los usuarios que usen buscadores modernos.

.contact_form input, .contact_form textarea { 
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
	background: #fff; 
	border:1px solid #555; 
	box-shadow: 0 0 3px #aaa; 
}
/* Button Style */
button.submit {
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
	opacity:.85;
	cursor: pointer; 
}
button.submit:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
	
}

Paso 8: Agreguemos un Poco de Interactividad con CSS3

Agreguemos un poco de interactividad. Haremos que los campos que están seleccionados se expandan un poco a través de un poco de relleno (padding).

1	.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
2	padding-right:70px;
3	}

Ahora, para los buscadores que lo soportan, haremos que la expansión del campo tenga una transición fluida usando CSS3.

.contact_form input, .contact_form textarea { /* add this to the already existing style */
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
}

Paso 9: El Atributo `required` en HTML5

Llego la hora que todos hemos estado esperando: herramientas para el manejo de formularios de HTML5.

Agregando el atributo required a cualquier campo de entrada de texto, le estaremos diciendo al buscador que su valor es requerido antes de que el formulario pueda ser enviado. Entonces, un formulario no podrá ser enviado si un campo marcado con required no ha sido llenado.

Entonces, agreguemos el atributo required a todos los elementos de nuestro formulario (por que queremos que todos sean completados).

1	<input type="text" name="name" required />
2	<input type="text" name="email" required />
3	<input type="text" name="website" required />
4	<textarea name="message" cols="40" rows="6" required ></textarea>

Paso 10: Estilizar los Campos Marcados con `required`

Probablemente se dará cuenta, visualmente hablando, que nada ocurre cuando agregamos el atributo required. Lo que haremos es estilizar los campos requeridos usando CSS. Para este ejemplo, agregaremos un asterisco rojo como una imagen de fondo en cada uno de los campos requeridos. Para lograr eso, primero agregaremos un poco de relleno al lado derecho de nuestro input donde estará nuestra imagen de fondo (esto prevendrá alguna superposición si el texto es muy largo):

1	.contact_form input, .contact_form textarea {
2	padding-right:30px;
3	}

Ahora usaremos el pseudo selector :required para elegir todos los elementos del formulario con el atributo required. Hice un simple icono de un asterisco rojo de 16 x 16 pixeles en Photoshop que servirá como indicador visual de los campos requeridos.

1	input:required, textarea:required {
2	background: #fff url(images/red_asterisk.png) no-repeat 98% center;
3	}

¿Qué pasará cuando sea enviada?

En este momento, diferentes buscadores harán diferentes cosas cuando un formulario que use elementos de HTML5 es enviado. Cuando el formulario sea enviado, la mayoría prevendrá de que el formulario sea enviado y mostrara una "pista" al usuario, marcando el primer campo que sea requerido y que no tenga contenido. Estilos visuales y soporte para estos "campos burbuja" son muy amplios. Esperemos que estas conductas se vuelvan mas estándares en el futuro.

Puede ver el estado actual de soporte por buscadores para el atributo required en quirksmode.

Consejo Rápido:

Puede estilizar la burbuja un poco en webkit usando lo siguiente:

1	::-webkit-validation-bubble-message {
2	padding: 1em;
3	}

Paso 11: Entendiendo los Nuevos Atributos `type` de HTML5 y Validación en el Lado del Cliente

La validación de HTML5 trabaja de acuerdo con el tipo de atributo type que es definido en los campos del formulario. Por años HTML solo ha soportado unos pocos tipos de atributos, como type="text" pero con HTML5 hay mas de una docena de nuevos tipos de entrada incluyendo email y url los cuales serán usados en nuestro formulario.

Combinando los atributos type y required, el buscador ahora puede validar los formularios en el lado del cliente. Si el buscador de un usuario no soporta los nuevos tipos de campos, como el de type="email", simplemente cambiara por defecto a type="text". De hecho esto es asombroso. Esencialmente tienes compatibilidad con versiones anteriores en todos los buscadores de la tierra. ¡Hurra!

Entonces ¿Qué pasa si el buscador si soporta el nuevo atributo type? Para buscadores en computadoras de escritorio no habrá diferencia visual (a menos que la especifiques a través de CSS). Un campo con type="text" se ve igual que uno con type="email". Pero para buscadores en dispositivos móvil hay una diferencia en termino de la interfaz.

Un Ejemplo: El iPhone

El iPhone de Apple detecta el tipo de campo y dinamicamente cambia el teclado de pantalla dando caracteres consciente del contexto. Por ejemplo, toda dirección de correo electrónico requiere los siguientes símbolos: "@" y "."; así que el iPhone da estos caracteres cuando el campo es especificado como uno de correo electrónico.

Paso 12: Cambiando los atributos `type`

Ya tenemos los campos establecidos por defecto a type="text". Pero ahora queremos cambiar el tipo de atributo a correo electrónico y sitio web a sus respectivos tipos de HTML5.

1	<input type="email" name="email" placeholder="john_doe@example.com" required />
2	<input type="url" name="website" placeholder="http://johndoe.com" required/>

Paso 13: Validación con HTML5

Como fue mencionado antes, la validación con HTML5 esta basada en el atributo type y esta habilitado por defecto. No hay código requerido para activar la validación. Si deseas deshabilitar la validación, puedes usar el atributo novalidate de esta manera:

1	<form novalidate>
2	<-- do not validate this form -->
3	<input type="text" />
4	</form>

Campo de Nombre

Veamos con mas detalle al primer campo, el cual pide el nombre del usuario. Como fue descrito antes, hemos agregado los atributos type="text" y required. Esto le informa al buscador que este campo es mandatario y que debe ser validado simplemente como texto. De esta manera, mientras que el usuario ponga al menos un carácter en el campo, será validado.

Ahora crearemos nuestro propio CSS para estilizar los campos que el buscador considera validos o inválidos. Si usted recuerda, hemos usado :required en CSS para estilizar los elementos que usan el atributo required. Ahora podemos estilizar los campos validos o inválidos usando :valid o :invalid.

Primero, estilizamos los campos para que sean inválidos. Para este ejemplo solo queremos que los estilos inválidos se muestren cuando el campo sea enfocado. Usaremos un borde rojo, sombra roja, y un icono creado en Photoshop para indicar que el campo es invalido.

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
	background: #fff url(images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}

Ahora, vamos a crear una regla que indique que este campo es valido. Agregaremos un borde verde, sombra verde y una marca de verificación creada en Photoshop. Esto sera aplicado a todos los campos aunque no estén enfocados.

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
	background: #fff url(images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}

Ahora cuando se enfoque en un campo, los estilos rojos de invalidación son mostrados. Tan pronto como un carácter sea ingresado, este sera validado y los estilos verdes serán activados para mostrar ese hecho.

Campos de Correo y URL

Nuestro código CSS de validación ya afecta el campo de correo electrónico ya que ya se le agrego los atributos type y required antes.

Paso 14: Introduciendo el atributo `pattern` de HTML5

Usando el atributo type="email" como un ejemplo, aparentemente la mayoría de buscadores validan ese campo como *@*, (cualquier carácter + el símbolo de arroba (@) + cualquier carácter). Esto obviamente no limita lo suficiente pero previene que un usuario ingrese espacios o valores que sean completamente incorrectos.

En el ejemplo del atributo type="url", parece que el mínimo requisito para la mayoría de buscadores es que halla un carácter seguido por dos puntos (:). Así que si se ingresa "h:" entonces el campo sera validado. Esto no es muy útil pero previene que los usuarios ingresen algo irrelevante a la información como su correo electrónico o dirección de casa. Ahora, uno podría ser mas especifico con la validación en el lado del servidor; pero aquí vamos a hablar sobre como hacerlo con HTML5.

El Atributo `pattern`

El atributo de patrón (pattern) acepta expresiones regulares de javascript (regular expressions). Esta expresión es usada en vez de la de defecto del buscador para validar el campo. Entonces nuestro HTML ahora se verá así:

1	<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http\|https)://.+" />

Ahora nuestro campo solo aceptará valores que comienzan con "http://" o "https://" y que contengan caracteres adicionales. Estos patrones pueden ser confusos al principio, pero una vez que se tome el tiempo de aprenderlos, tendrás muchas mas opciones para tus formularios.

Paso 15: Instrucciones para Campos (CSS)

Ahora estilizaremos las instrucciones que le dicen al usuario como debe ingresar su información.

.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}

Establecemos display:none porque solo mostraremos las instrucciones cuando el usuario se enfoque en el campo. También establecemos las instrucciones al rojo que usamos para campos inválidos, porque siempre serán inválidos hasta que la información correcta sea ingresada.

Usando el Selector `::before`

Ahora queremos agregar un pequeño triangulo a nuestras cajas de instrucciones para que le de dirección a nuestros ojos. Esto puede ser hecho usando una imagen, pero en este caso lo haremos usando puro CSS.

Ya que solo tiene propósito estético que no es vital para la funcionalidad de la pagina, agregaremos un pequeño triangulo que apunta a la izquierda usando el pseudo selector ::before. Podemos hacer esto usando una de las figuras geométricas de unicode.

Normalmente tendríamos que usar el formato Unicode de HTML para mostrar estos en nuestro código (como mostrado en la imagen superior). Sin embargo, ya que usaremos el selector CSS ::before, tenemos que usar el correspondiente codigo escapado del triangulo cuando lo ingresemos a la regla content:"". Luego solo tendremos que posicionarlo donde queramos.

.form_hint::before {
	content: "\25C0"; /* left point triangle in escaped unicode */
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}

Usando el Selector Adjunto `+`

Finalmente vamos a usar el selector adjunto de CSS para mostrar y esconder las instrucciones para el formulario. El selector adjunto (x + y) selecciona el elemento que es precedido por el elemento anterior (x). Ya que las instrucciones están justo después de los campos de texto, podemos usar este selector para mostrar y esconder las instrucciones.

.contact_form input:focus + .form_hint {display: inline;}

.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */

.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

Como puede ver en el CSS, también hemos establecido las instrucciones para que cambien de color junto con el campo cuando es valido o invalido.

Paso 16: Descansa y Admira tu Bello Formulario HTML5

Ve y échale un vistazo al producto final!

Conclusión

Como pueden ver, las nuevas propiedades para formularios de HTML5 están geniales! Todo es compatible con versiones anteriores así que incorporar estas nuevas características en tu sitio no malogrará nada.

Validación con HTML5 esta acerca de remplazar validación del lado del cliente ayudando a usuarios llenar sus formularios correctamente. Sin embargo, validación con HTML aún no ha remplazado validación en el lado del servidor. Por mientras, es mejor usar ambos métodos cuando se administre información enviada por un usuario. ¡Gracias por leer!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!