Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

7. Formularios (VI)

7.6 Formularios avanzados

Agrupación de etiquetas

Es posible mejorar el aspecto de un formulario agrupando varias etiquetas en un mismo apartado. Para ello utilizaremos la etiqueta <fieldset> ... </fieldset>. Dentro de ella incluiremos varios campos. Esta etiqueta agrupa dentro de un cuadro a los campos incluidos dentro de ella.

Además también podemos poner una cabecera o título al cuadro que forma la etiqueta fieldset mediante la etiqueta: <legend>texto</legend>, la cual debe estar también incluida en la etiqueta fieldset

Mediante un ejemplo vemos primero el aspecto en el navegador de la aplicación de estas etiquetas:

El código HTML utilizado para agrupar los elementos de este ejemplo es el siguiente:

<form ....>

<fieldset>
<legend>datos personales</legend>
<p>nombre: <input type="text" name="nombre"/></p><br/>
<p>Apellido: <input type="text" name="apellido"/></p><br/> 
<p>Correo electrónico: <input type="text" name="correo"/></p> 
</fieldset>
...

</form>

Mediante la etiqueta fieldset se crea un cuadro que agrupa varios elementos del formulario. En un formulario podemos incluir varias etiquetas fieldset con sus correspondientes etiquetas legend, creando así varios apartados dentro del formulario

La etiqueta legend debe estar incluida dentro de la etiqueta fieldset y como se ve en el ejemplo le da el título al cuadro.

En el siguiente enlace se muestra el formulario de ejemplo dado en páginas anteriores, mejorado mediante las etiquetas fieldsdet y legend.

ejemplo de formulario mejorado

texto explicación del campo de formulario

En la mayoría de los controles de formulario no hay establecida una relación entre el campo y el texto que se muestra junto al control. Hasta ahora el texto que se muestra junto al campo se incluye en forma de texto normal, sin ninguna referencia al campo que describe.

Podemos, no obstante, en el texto adjunto, hacer una referencia a su campo mediante la etiqueta <label>...</label>, la cual debe encerrar el texto que se mostrará como explicación del campo. Mediante esta referencia, para marcar los campos de texto o activar los campos de botones podemos hacerlo también haciendo click sobre el texto.

La relación entre la etiqueta label y su correspondiente etiqueta del campo de formulario se hace mediante los siguientes atributos:

• En la etiqueta label incluiremos el atributo for="referencia"
• En la etiqueta del control (input, select, textarea, ...) incluiremos el atributo id="referencia".
• El valor del atributo for y del atributo id debe ser el mismo en los dos atributos, ya que es lo que relaciona el texto explicativo con su etiqueta. Por tanto debe ser el mismo para una mismo control y distinto del de los demás controles con los que no esté relacionado.

Veamos el código HTML de un ejemplo:

<p><label for="apellido">apellido</label>: <input type="text" name="apellido" id="apellido"/></p>

El aspecto de este control de formulario será el siguiente:

apellido:

Aunque aparentemente tiene el mismo aspecto que sin la etiqueta label la diferencia en la pantalla es que al pulsar con el ratón encima del texto explicativo (apellido) queda seleccionado el campo al que hace referencia; esto puede ser útil en los controles de botones de radio y checkbox.

Los botones de enviar, borrar, y "boton normal" no necesitan la etiqueta "label", ya que su texto va incluido dentro del botón.

En el siguiente enlace se muestra el formulario del enlace anterior, al que se le han añadido las etiquetas label correspondientes, con los atributos necesarios para poner título a todos los campos.

ejemplo de formulario con etiquetas de título

Estilo en formularios

El estilo o aspecto que queremos darle a un formulario, es decir, tipo y tamaño de letra, márgenes, bordes, colores e imágenes de fondo, etc., puede y debe hacerse mediante el código CSS, para ello basta con aplicar las mismas propiedades que para los textos, párrafos, etc. El tratamiento de cualquier elemento del formulario, incluso los botones, por medio de estilo CSS es similar a cualquier otro elemento de la página, pudiendo usar las mismas propiedades. Las propiedades más usadas suelen ser las de texto, margenes, etc.

Si seguimos sólo el manual de HTML continuaremos con el siguiente tema de este manual:

Metainformación

Si seguimos el manual de HTML junto con el de CSS, iremos ahora al siguiente tema de CSS:

Posicionamiento

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com