Agrupar campos con CSS

Comentarios 0 COMENTARIOS
Tags 12/09/2005 -  Tags

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.

Datos Personales

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:

También te puede interesar: