CSS

Ξ 8 comentarios

Cómo estilizar los formularios de nuestros sitios Web

por Xabadu
Cómo estilizar los formularios de nuestros sitios Web

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

8 Comentarios

  • Excelente!, este recurso es demasiado útil!.

  • […] algunos tutoriales hemos cubierto el proceso de confección de formularios para sitios Web, pero ¿qué es lo que pasa […]

  • […] detalles en cada temática, hemos hablado en varias ocasiones de los formularios Web. Ya sea estilizándolos, validándolos por Javascript, añadiendo Calendarios o incluso haciéndolos, esto se debe a lo que […]

  • El tutorial y el código están exelentes, mi pregunta es la siguiente el correo de mi página es este mismo desde el que les escribo, ¿como tengo que hacer para que los correos al darle enviar lleguen a mi e-mail?
    Desde ya muchas gracias

  • Hola muchas gracias por los tutoriales son muy claros y objetivos. Excelente sigue adelante!!!

  • Gracias por el tutorial, buena forma de ayuadar a aqueyo que como yo somos novatos en el tema

  • El tutorial y el código están exelentes, mi pregunta es la siguiente el correo de mi página es este mismo desde el que les escribo, ¿como tengo que hacer para que los correos al darle enviar lleguen a mi e-mail?
    Desde ya muchas gracias

  • gracias
    quedo perfecto
    solo falta que pueda enviar realmente un correo
    para que llegur a mi cuenta
    esa parte no me funciona
    nuevamente gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gente linda que nos quiere

Donde mas estamos