En el último tiempo hemos cubierto diversas temáticas sobre los siempre útiles formularios. Desde su construcción, hasta la creación de distintas funciones de validación, hemos podido apreciar las diferentes cosas que podemos hacer con ellos y los múltiples usos que podemos darles.

Sin embargo, un aspecto muy importante que no habíamos cubierto hasta hoy, era el darles un poco más de estilo, gráficamente hablando.

Pues bien, eso lo veremos a continuación, utilizando sencillas herramientas para que podamos disponer de unos formularios super “kewls” en nuestras páginas Web.

El detalle, como siempre, después del salto.

Cómo estilizar los formularios de nuestros sitios Web

Como siempre, lo primero:

Implementos necesarios:

1. Un editor Web. Recomendamos y utilizamos normalmente Adobe Dreamweaver, el cual pueden obtener, en su versión de prueba, desde este enlace.
2. Las imágenes con las que le daremos más estilo al botón de envío. Pueden descargarlas desde este enlace.

Con todo eso claro, manos a la obra:

Procedimiento:

1.- Lo primero que haremos, será crear una página HTML donde construiremos un formulario que contenga 1 campo de texto para introducir el nombre, 1 campo de texto para introducir el correo, 1 campo de texto para introducir el asunto, 1 área de texto para introducir un mensaje y 1 botón para enviar los datos. Si tienen dudas de como crear un formulario, les recomendamos revisar este tutorial donde hemos cubierto el proceso.

Al finalizar, deberíamos tener algo como esto:

Y en código, deberíamos tener algo como esto:

<form id=”form1″ name=”form1″ method=”post” action=””>
<table width=”32%” border=”0″ align=”center”>
<tr>
<td width=”25%”>Nombre:</td>
<td width=”75%”><label>
<input type=”text” name=”nombre” id=”nombre” />
</label></td>
</tr>
<tr>
<td>Correo:</td>
<td><label>
<input type=”text” name=”correo” id=”correo” />
</label></td>
</tr>
<tr>
<td>Asunto:</td>
<td><label>
<input type=”text” name=”asunto” id=”asunto” />
</label></td>
</tr>
<tr>
<td>Mensaje:</td>
<td><label>
<textarea name=”mensaje” id=”mensaje” cols=”45″ rows=”5″></textarea>
</label></td>
</tr>
<tr>
<td></td><td><label>
<input type=”submit” name=”button” id=”button” value=”Enviar” />
</label></td>
</table>

La última etiqueta, correspondiente al botón, la reemplazaremos por la siguiente:

<button value=”submit”><span>Enviar</span></button>

2.- Con nuestro formulario listo, vamos a proceder a crear los estilos que luego le aplicaremos. Para esto, crearemos en Dreamweaver un nuevo archivo, de extensión CSS, en donde definiremos el siguiente código:

/* Estilo que le daremos a los campos de texto y área de texto. Los colores pueden modificarlos según lo que quieran */
.campo {
border: 1px solid #82A541;
background: url(none) no-repeat #ffffff;
font-family: tahoma, helvetica, sans-serif;
font-style: normal;
font-size: 14px;
color: #999999;
text-align: justify;
}

/* Estilo a aplicar a los labels del formulario, pueden modificarlos según necesiten */
.etiqueta {
font-family: tahoma, helvetica, sans-serif;
font-style: bold;
font-size: 10px;
color: #999999;
text-align: justify;
font-weight: bold;
}

/* Estilo a aplicar al botón, así como las imágenes que lo reemplazarán */

button {
border:0;
cursor:pointer;
font-weight:bold;
padding:0 20px 0 0;
text-align:center;
width:auto;
overflow:visible;
}
button span {
position:relative;
display:block;
white-space:nowrap;
padding:0 0 0 20px;
}
button.submitBtn {
background:url(btn_blue_right.gif) right no-repeat;
font-size:.8em;
}
button.submitBtn span {
height:30px;
line-height:30px;
background:url(btn_blue_left.gif) left no-repeat;
color:#fff;
}
button.submitBtn:hover {
background:url(btn_blue_right_hover.gif) right no-repeat;
}
button.submitBtn:hover span {
background:url(btn_blue_left_hover.gif) left no-repeat;
}

Para entender mejor el código CSS y cómo modificarlo, les recomendamos leer esta serie de tutoriales que hemos preparado al respecto.

3.- A continuación debemos asegurarnos que las imágenes que reemplazarán al botón (las que descargamos al principio de este tutorial) se encuentran en la misma ruta que el archivo HTML que contiene el formulario y el CSS que contiene los estilos. De lo contrario, deberemos modificar el último y hacer los ajustes correspondientes.

4.- Y luego, haremos unas modificaciones sobre el código HTML presentado en el punto 1. En cada marca HTML correspondiente a un elemento del formulario, le haremos el cambio para que adapte el estilo definido en el archivo CSS, con lo que nuestro código quedaría así:

<form id=”form1″ name=”form1″ method=”post” action=””>
<table width=”32%” border=”0″ align=”center”>
<tr>
<td width=”25%” class=”etiqueta”>Nombre:</td>
<td width=”75%”><label class=”etiqueta”>
<input type=”text” class=”campo” name=”nombre” id=”nombre” />
</label></td>
</tr>
<tr>
<td class=”etiqueta”>Correo:</td>
<td><label class=”etiqueta”>
<input type=”text” class=”campo” name=”correo” id=”correo” />
</label></td>
</tr>
<tr>
<td class=”etiqueta”>Asunto:</td>
<td><label class=”etiqueta”>
<input type=”text” class=”campo” name=”asunto” id=”asunto” />
</label></td>
</tr>
<tr>
<td class=”etiqueta”>Mensaje:</td>
<td><label class=”etiqueta”>
<textarea name=”mensaje” class=”campo” id=”mensaje” cols=”45″ rows=”5″></textarea>
</label></td>
</tr>
<tr>
<td></td><td><label class=”etiqueta”>
<button value=”submit” class=”submitBtn”> <span>Enviar</span></button>
</label></td>
</table>
<br />
</form>

Como podemos apreciar, el cambio principal es que a cada etiqueta de los elementos del formulario les hemos añadido el atributo class el cual referencia a ese estilo en particular desde la hoja de estilo (el archivo CSS). Al hacer esa llamada, nuestro formulario va cambiando el estilo y deberíamos tener finalmente algo como esto:

Un poco mejor, ¿no?. Y así de simple le hemos dado un poco de estilo a nuestro formulario. Si los colores no convencen, es cosa de editar el código que creamos en el archivo CSS y hacer las modificaciones, ideales para nuestro esquema propio en la Web.

Como siempre, recuerden que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.