Agrupar campos con CSS
0 COMENTARIOS - Publicado hace 54 meses - Clasificado en:El uso de CSS nos puede ayudar a hacer más usables los formularios. Sobre todo si éstos son muy extensos agrupando las entradas por regiones. El uso de CSS y XHTML genera formularios que además de ser más agradables visualmente, son más usables y accesibles.
XHTML:
<form method="post" action="#">
<fieldset>
<legend>Datos Personales</legend>
<p>
<label for="Nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" class="texto"/>
</p><p>
<label for="email">Correo electrónico:</label>
<input type="text" name="email" id="email" class="texto" />
</p><p>
<label for="contrasenya">Contraseña:</label>
<input type="password" name="contrasenya1" id="contrasenya1" class="texto" />
</p><p>
<label for="contrasenya2">Confirma la Contraseña:</label>
<input type="password" name="contrasenya2" id="contrasenya1"class="texto" />
</p>
</fieldset>
<p>
<input type="submit" name="Enviar" id="Enviar" value="Enviar" class="boton" />
</p>
</form>
CSS:
<style type="text/css">
.texto {
color: #666;
background-color: #FFF;
border: 1px solid #CCC;
width: 150px;
}
.boton {
color: #666;
background-color: #FFF;
border: 1px solid #CCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 3px;
}
form p {
clear: left;
margin: 0;
padding: 0;
padding-top: 5px;
}
form p label {
float: left;
width: 20%;
font: 11px Arial, Helvetica, sans-serif;
color:#990000;
}
fieldset {
border: 1px dotted #999;
margin-top: 16px;
padding: 10px;
}
legend {
font: 0.8em Arial, Helvetica, sans-serif;
color: #339933;
background-color: #FFFFFF;
}
</style>
Algunas entradas relacionadas:
- Aya Kato
- ReloadEvery
- Cómo limpiar la memoria de Windows sin reiniciar
- Cita 20-02-2009
- Moverse por el documento de Photoshop mediante el teclado
- Brad Harris
- Prevenir la navegación por directorios con .htaccess
También te puede interesar:





















diseño web valencia en 500 iconos gratuitos para tus aplicaciones web




