Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 358

Visitas el mes pasado: 405

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

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




7. Formularios (VI)

7.6 Formularios avanzados

html

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:

datos personales

nombre:


Apellido:


Correo electrónico:


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:

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:

:

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







manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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