Gestión avanzada de formularios

Controles avanzados para formularios

Con lo que has visto en la sección anterior sobre formularios podrás perfectamente incorporar estos elementos de interaccón a tu página web, pero los navegadores modernos permiten el uso de algunas características extras añadidas por el estandard HTML 4.0, características que básicamente mejoran la estética y facilitan el uso de estos elementos.

Botones

Una importante mejora en el HTML 4 es el nuevo control <button> que permite enriquecer la etiqueta de texto que hasta ahora tenían los botones de formulario. Ahora estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con un texto. Por ejemplo el siguiente código


      <button type="button">Inicio<img src="/imgs/bolamas.gif" 
width="45" height="30">
</button>

La etiqueta Inicio no forma parte de la imagen, es texto. Es un botón con imagen y texto.

Los parámetros de dicha etiqueta son type, que podrá tomar los valores submit (por defecto), reset y button, name y value.

El botón puede llevar asociado una acción programada mediante javascript.

Etiquetas

Los controles tipo label permiten asociar etiquetas a los controles de formulario. Es decir ahora el texto que suele acompañar a los campos que debe rellenar el usuario son solo eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y podemos seleccionar éste pulsando sobre la etiqueta. Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el mismo valro que este for

<input ID="Curso" type="checkbox">
<label for="Curso"> Me gusta este curso
</label>

Compara con este otro ejemplo aparentemente igual al anterior.


<input name="Curso" type="checkbox">  Me gusta este curso/a

En el primer caso el click sobre la etiqueta actua igual que sobre el control, mientras que en el segundo tienes que clickar sobre el recuadrito del control

Las etiquetas no son imprescindibles, pero mejoran la usabilidad de los controles del formulario

Agrupación de elementos

HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrándolos dentro de la etiqueta fieldset, veremos que alrededor de ellos se ve un rectángulo con el título que le demos mediante la etiqueta legend.

<fieldset>
  <legend>Tus datos</legend>
  <label>
     Nombre:
     <input type="text" name="nombre">
Edad:    
<input type="text" name="edad">
  </label>
</fieldset>

Este código dentro de un formulario se ve así:

La posición del título (legend) puede controlarse usando el parámetro align, que por defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT (derecha) .

El conjunto de campos permiten entender mejor la estructura de los datos del formulario

Desactivación de elementos

Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los sobreescriba. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar que no son editables. Para ello sólo tenemos que indicarle el parámetro disabled:


<label disabled>Origen:
<input type="text" disabled>
</label>

Verás que no puedes editar el campo de texto, está deshabilitado