HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 103
Visitas el mes pasado: 285
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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
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:
label
incluiremos el atributo for="referencia"
input, select, textarea, ...
) incluiremos el
atributo id="referencia"
.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 un 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:
:
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
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:
Si seguimos el manual de HTML junto con el de CSS, iremos ahora al siguiente tema de CSS:
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