Los formularios son elementos dinámicos que permiten que los usuarios de las páginas web envíen emails, hagan comentarios, envíen información, se registren como usuarios, y muchas otras funciones de interacción entre el usuario y la página web.
Como cualquier otro tipo de partes de una página web, es posible conseguir los mismos efectos de la misma forma, pero en el ejemplo que veremos a continuación, habrán algunas particularidades que pueden ser aplicadas, además de al ejemplo del formulario, a cualquier otra maquetación.
Los formularios suelen colocarse en una página independiente, aunque en algunos casos pueden emplearse ventanas emergentes, formularios en columnas o pie de página. En todos los casos, los elementos que conforman un formulario llevan una maquetación que permite que los elementos aparezcan ordenados. Este orden no solo es una cuestión estética, sino que el orden y la claridad hacen que las tareas a cumplirse por parte del usuario se simplifiquen notoriamente.
Dadas las características propias de los elementos que constituyen los formularios, la alineación y posicionamiento de todos los elementos puede volverse una tarea compleja, sobre todo para principiantes. Por ello, a continuación presentamos una de las tantas formas que hay de maquetar un formulario.
Nota: Los códigos que se exponen en el presente artículo son válidos para XHTML 1.1 y CSS 2.1, lo que puede verificarse. Sin embargo, debido a problemas conocidos, es posible que en Internet Explorer 7 y versiones anteriores la maquetación de la página deba ser ligeramente modificada. El formulario es perfectamente visible en cualquier navegador, aún en versiones antiguas de los navegadores más conocidos.
Este es un ejemplo de maquetación de elementos de formulario, por lo que el mismo no cuenta con la programación que lo haga funcional. La maquetación que se presenta como ejemplo puede ser trasladada a cualquier script de formularios.
La página
En el caso del presente ejemplo, se trata de un formulario que se inserta en una página. Sin embargo, si se desea puede trasladarse a un popup. A continuación les dejamos el código correspondiente a la estructura XHTML de la página sin el formulario:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" >ejemplo de layout fijo</a>. El código CSS de la página es el siguiente:
body {
margin: 10px;
padding: 0;
background: #fff;
font-family: arial, helvetica, sans-serif;
}
/* Maquetación de la página (sin formulario) */
#contenedor {
width: 900px;
margin: 0 auto;
}
#cabecera {
background: #fff;
border: solid 1px #444;
}
#cabecera h1 {
margin: 0;
line-height: 90px;
text-align: center;
}
#principal {
background: #f4f4f4;
display: table;
}
#izquierda {
width: 200px;
padding: 10px;
display: table-cell;
background: #fff;
border: solid 1px #444;
border-top: 0;
border-right: 0;
}
#izquierda ul {
list-style: none;
margin: 0;
padding: 0;
}
#izquierda ul li {
line-height: 25px;
}
#izquierda ul li a {
display: block;
color: #000;
text-decoration: none;
text-align: center;
border: solid 1px #000;
margin: 2px 0;
}
#izquierda ul li a:hover {
color: #bbb;
border-color: #bbb;
}
#central {
padding: 10px;
background: #fff;
border: solid 1px #444;
border-top: 0;
display: table-cell;
width: 660px;
}
#pie {
background: #000;
}
#pie p {
margin: 0;
text-align: center;
line-height: 40px;
color: #fff;
}
#pie p a {
color: #99f;
}
#pie p a:hover {
color: #9f9;
}
Estructura del formulario
La estructura del formulario es bastante simple, ya que consiste en párrafos en los que colocamos una etiqueta (label) y el campo, botones, radios o checkbox correspondientes, con excepción de los botones de envío y borrado que están insertados en una capa (div). El código de la estructura XHTML es la siguiente:
<h2>Formulario</h2>
<form id="miformulario" class="formulario" action-xhr="#">
<p>
<label for="nombre">Nombre:</label>
<input type="text" id="user" value="" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" id="emailaddress" value="" />
</p>
<p>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje"></textarea>
</p>
<p>
<label for="comentarios">Sexo:</label>
Masculino: <input type="radio" name="sex" />
Femenino: <input type="radio" name="sex" /><br />
</p>
<p>
<label for="comentarios">Color preferido:</label>
<input type="checkbox" name="color" /> Rojo<br />
<input type="checkbox" name="color" class="threepxfix" /> Verde <br />
<input type="checkbox" name="color" class="threepxfix" /> Azul <br />
</p>
<p>
<label for="terms">Acepto los términos</label>
<input type="checkbox" id="terms" class="boxes" />
</p>
<div id="botones">
<input type="submit" value="Submit" />
<input type="reset" value="reset" />
</div>
</form>
Maquetación del formulario
Ahora tendremos que definir los estilos que permiten la maquetación del formulario, para lo que deberemos colocar el siguiente código CSS que posteriormente explicaremos:
/* Maquetación y otros estilos del formulario */
.formulario p{
width: 400px;
margin: 0;
padding: 8px 0;
padding-left: 255px; /*Distancia a la cual comienza la etiqueta*/border-top: 1px solid #ddd;
}
.formulario label{
font-weight: bold;
float: left;
text-align: right;
margin-left: -255px; /*Ancho de la columna*/width: 240px; /*Ancho de la etiqueta. Para que se genere un margen derecho, esta medida debe ser menor que el margen izquierdo.*/}
.formulario input[type="text"]{ /*ancho de las cajas de texto*/width: 250px;
}
.formulario textarea{
width: 250px;
height: 150px;
font: normal 14px arial, helvetica, sans-serif;
}
#botones {
margin-left: 255px;
}
En primer lugar, determinamos las propiedades de los párrafos dentro de los que se colocan los diferentes elementos de formulario. El ancho de los párrafos depende del espacio que tengamos en la columna principal. En el caso presente, se determinó un ancho de 400px, que centra los párrafos perfectamente. El primer atributo importante para la maquetación que ponemos como ejemplo, es el relleno (padding). Primero determinamos los rellenos de los cuatro laterales, dándole al relleno superior e inferior 8px para que el borde coloreado aparezca separado de los elementos y de el aspecto de renglones que se muestra.
Pero inmediatamente se determina un relleno izquierdo de 255px, que es la distancia a la que se ubicarán los elementos de formulario con excepción de las etiquetas. Las etiquetas no obedecen a este relleno porque son flotantes, como veremos más adelante. Si quitamos del código XHTML las etiquetas (label), veremos que los campos, textareas, checkbox y radios se mantienen en su posición gracias a este relleno.
Luego, determinamos la posición de las etiquetas, que presenta sus particularidades. En primer lugar, hacemos que sea flotante a la izquierda y alineamos el texto a la derecha. Luego, damos un margen izquierdo de -255px (téngase en cuenta que todas estas medidas son para el presente ejemplo, y que para otros casos quizá deban variarse) para que comience en el borde izquierdo de la capa contenedora (recordemos que le hemos dado a los párrafos un relleno izquierdo de 255px). Para que el texto aparente un margen respecto de los elementos del formulario, el ancho de las etiquetas se determina con una medida inferior (tantos pixeles menos como margen queramos dar a los elementos) al margen negativo izquierdo.
Finalmente determinamos las dimensiones de los campos y el textarea. El área de texto puede tener sus dimensiones definidas desde el propio XHTML en columnas y filas, pero en el ejemplo no hemos definido las dimensiones de esta forma, sino que lo hemos hecho en pixeles desde el archivo CSS.
modificado el 5 octubre, 2013 1:43
Ver comentarios (2)
Genial, aprenderé un poco mas.
Claro que sí Luis Miguel, ese es el objetivo :)