Blogging Tips: Usando la etiqueta Fieldset y Legend

La etiqueta FIELDSET originalmente est? dise?ada para agrupar elementos dentro de un formulario, de esta forma varios INPUT se pueden organizar dentro de un campo de un formulario. Por ejemplo este c?digo:

<form>
<fieldset>
<legend>Datos personales:</legend>
Nombre: <input type="text" size="30" /><br />
Direcci?n: <input type="text" size="30" /><br />
Tel�fono: <input type="text" size="30" />
</fieldset>
</form>

Se convierte en esto:

Pero no, no haremos formularios pues para ello necesitar?amos un servidor y algo de PHP para enviar y almacenar los datos. Pero s? podemos darle otro uso a la etiqueta FIELDSET, por ejemplo, para destacar un texto, mostrar una descripci?n, o incluso para poner los ingredientes de una receta. Por ejemplo:

Ingredientes
- 1 cebolla grande (unos 300g)
- chiles serranos u otro al gusto, o guindillas
- 750 g de tomates rojos sin piel en cubitos
- 12 tiras de tocino ahumado (panceta, beicon)
- 1 kg de filete de res (lomo bovino), cortado en trozos de 5 cm x 1 cm)
- sal y pimienta
- aceite
* Ingredientes tomados de la receta Puntas de filete a la norte?a [Gabriela, clavo y canela 2011]

El c?digo que hemos usado es este:

<fieldset>
<legend>T?tulo</legend>
... Aqu? va el texto ...
</fieldset>

Organizado pero muy simple ?verdad? No hay problema, se puede personalizar un poco.

S?ntesisLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat, nisl sed aliquet pretium, justo velit pellentesque arcu, non eleifend magna sem quis odio. Nulla sapien lacus, rutrum vitae vehicula eget, interdum sed dolor. Quisque condimentum fermentum lorem eget commodo. Vestibulum in sem pellentesque mi auctor posuere non id elit. Curabitur lacus arcu, cursus at lobortis a, adipiscing sed ligula.

Ah?, el c?digo que usamos es este:

<fieldset style="border:6px groove #ccc; background:#F8ECE0;">
<legend style="font-weight:bold; color:#61380B;">T?tulo</legend>
... Aqu? va el texto ...
</fieldset>

Los primeros estilos en negrita son para el contenedor general, ah? le hemos puesto un borde de 6px y un color de fondo. Los segundos estilos en negrita corresponden al t?tulo del campo.

Pero ser?a muy tedioso tener que escribir los estilos siempre que lo vayamos a usar, as? que podemos definir esos estilos directo en la plantilla.

Para ello entramos en Dise?o | Edici?n de HTML y antes de ]]></b:skin> pegamos lo siguiente:

fieldset {
border:6px groove #ccc; /* Borde */
background:#F8ECE0; /* Color de fondo */
color:#000; /* Color del texto de todo el contenido */
}
legend {
text-align:left; /* Puedes cambiarlo por center o right */
font-weight:bold; /* Estilo de la fuente del t?tulo */
color:#61380B; /* Color del t?tulo */
}

Eso har? que todos los fieldset que uses tengan ese dise?o que has elegido.
Son estilos muy b?sicos, pero se pueden agregar otros tantos. Recuerda que fieldset es el contenedor, y legend el t?tulo de ese contenedor.

Jugando un poco con los estilos y aplicando CSS3 podemos obtener resultados aun m?s llamativos:

AVISO
Si usas un navegador moderno podr?s ver este aviso con efectos de sombra y bordes redondeados.
Recuerda que si te suscribes a nuestro feed podr?s enterarte de este y otros temas para que apliques en tu blog.
Tambi�n puedes seguirnos en Twitter y Facebook para tener informaci?n extra que tal vez no ver?s por ac?.

[+/-] Ver c?digo

Blogging Tips

Sunday, July 10, 2011

Usando la etiqueta Fieldset y Legend

No comments:

Post a Comment