Admin
 
 
Logo DIPLOX
Agrupar campos con css
Volver Por jorge
  
Sábado, 19/09/2009
Agrupar campos con css
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>


Volver Por jorge