Un formulario es por norma general, un espacio de nuestra web que no gusta demasiado a los usuarios porque tienen que "perder su tiempo" en rellenar datos. Y generalmente, el usuario es perezoso a la hora de proporcionar información, motivo por el cual cuanto más suculento y bonito sea un formulario más probabilidades existirán de que lo cumplimenten.
Es por esto que en nuestros sitios web es muy recomendable hacer que estos formularios sean cómodos de leer, espaciosos para escribir y estéticamente adecuados al resto de la web.
En un formulario podemos dar estilo a todos los elementos que lo componen sin problema alguno como si de cualquier elemento se tratase.
Un formulario necesita tener una estructura visual sólida y esto se consigue mayoritariamente utilizando elementos que ayuden a jerarquizar como por ejemplo los elementos del tipo fieldset, legend y labels.
Lo ideal para empezar es escribir el código sin estilos, comprobar que el formulario funciona perfectamente y empezar a dar el "look" que más te guste.
Recomendaciones a tener en cuenta:
- Procura que los espacios en los que el usuario tenga que escribir sean amplios
- Intenta siempre de forma muy descriptiva dar instrucciones para rellenar el formulario, sobre todo si éste es largo o complejo. Los ejemplos ayudan bastante.
- Usa una tipografía estándar y más bien grande, de palo que no cree confusiones y que sea fácil de leer, sobre todo en aquellos campos donde el usuario tenga que escribir.
Este sería un ejemplo gráfico de jerarquización de un formulario utilizando los elementos mencionados:
Una vez vista la forma de ordenar los principales conceptos de un formulario vamos a darle vida a un formulario básico mediante HTML y CSS.
Este sería el código HTML sin estilos y su apariencia inicial:
<div id="registro">
<fieldset>
<form>
<legend>Registro de Nuevo Usuario</legend>
<label for="user">Usuario:</label>
<input name="username " type="text" size="20" />
<label for="pass">Contraseña:</label>
<input name="password" type="password" size="20" />
<label for="pass">E-mail:</label>
<input name="email " type="text" size="20" />
<label for="pass">Nombre:</label>
<input name="firstname" type="text" size="20" />
<label for="pass">Apellidos:</label>
<input name="lastname " type="text" size="20" />
<label for="pass">Dirección:</label>
<textarea name="address" cols="26" rows="3">
</textarea>
<input name=" insert" type="submit" value="Aceptar" class="enviar"/>
</form>
</fieldset>
</div>
</div>
A continuación presentamos un ejemplo de formulario con estilos y el correspondiente código de css:
<fieldset id="registrousuario">
<form>
<legend>Registro de Nuevo Usuario</legend>
<label for="user">Usuario:</label>
<input class="texto" name="username " type="text" size="20" />
<label for="pass">Contraseña:</label>
<input class="texto" name="password" type="password" size="20" />
<label for="pass">E-mail:</label>
<input class="texto" name="email " type="text" size="20" />
<label for="pass">Nombres:</label>
<input class="texto" name="firstname" type="text" size="20" />
<label for="pass">Apellidos:</label>
<input class="texto" name="lastname " type="text" size="20" />
<label for="pass">Dirección:</label>
<textarea class="areadetexto" name="address" cols="26" rows="3">
</textarea>
<br />
<input class="botonenviar" name="insert" type="submit" value="Enviar" class="enviar"/>
</form>
</fieldset>
Código para la hoja de estilos (CSS):
#registrousuario {
background:transparent url(../images/bgfieldset.jpg) no-repeat scroll left bottom;
border:medium none;
color:#333333;
height:665px;
padding:0 0 0 50px;
width:515px;
}
#registrousuario legend {
color:#333333;
font-family:arial;
font-size:21px;
letter-spacing:-1px;
padding-bottom:20px;
padding-top:8px;
text-transform:capitalize;
}
#registrousuario input.texto {
background:#FFFFFF url(../images/bginputtexto.gif) no-repeat scroll left top;
border:medium none !important;
color:#666666;
font-size:12px;
height:24px;
padding-bottom:0;
padding-left:5px;
padding-top:5px;
width:454px;
font-family:arial,sans-serif;
}
#registrousuario textarea.areadetexto {
background: #ffffff url(../images/bgtextarea.gif) no-repeat scroll top left;
width: 454px;
height: 212px;
border:none !important;
padding-bottom:0;
padding-left:5px;
padding-top:5px;
color:#666666;
font-size:12px;
font-family:arial,sans-serif;
}
#registrousuario label {
display:block;
font-family:arial,sans-serif;
font-size:14px;
padding:10px 0 3px;
}
#registrousuario input.botonenviar {
background:transparent url(../images/bgbotonenviar.gif) no-repeat scroll left top;
border:medium none !important;
color:#FFFFFF;
display:block;
float:left;
font-family:arial,sans-serif;
height:30px;
margin-left:360px;
margin-top:20px;
text-align:center;
width:99px;
}
Resultado visual final:
