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.

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:

Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.

picture2life

Picture2Life

Cool Math Games

Cool Math Games

Crear un colorido icono de cocktail con Illustrator

Crear un colorido icono de cocktail con Illustrator

Chrome Frame

Chrome Frame

Disk Investigator: analiza todo el contenido de tu disco duro

Disk Investigator: analiza todo el contenido de tu disco duro