Unidad 11. Avanzado: HTML. Controles de formulario (I)

El formulario

Todos los controles, o por lo menos los que queramos enviar juntos en una página, deben de estar recogidos dentro de un formulario <form></form>.

El formulario, puede tener los atributos comunes, como class, style o id. Además, tiene como mínimo dos atributos propios.

• method: es la manera en la que se enviarán los datos. Sus valores pueden ser get, que muestra los datos en la barra de direcciones, o post, que los envía de forma separada.
• action: como valor, contiene a dónde se enviarán los datos. Por ejemplo, una página PHP que los procesará.

Por ejemplo, podríamos encontrar un formulario como:

 <form method="post" action="recoger_datos.php">
   ... controles ...
 </form>

Dentro del formulario, podemos tener cualquier elemento HTML. Pero los más importantes son los controles, que permiten al usuario introducir datos, marcar o seleccionar opciones, o incluso subir archivos.

Estos controles, pueden estar agrupados dentro de <fieldset></fieldset>. Esta etiqueta sirve para que agrupemos controles relacionados en formularios extensos. Además, nos permite mostrar una leyenda, si incluimos la etiqueta <legend>.

 <form method="post" action="recoger_datos.php">
  <fieldset>
   <legend>Datos personales</legend>
   ... Controles para recoger 
       los datos personales ...
  </fieldset>
  <fieldset>
   <legend>Preferencias</legend>
   ... Controles para recoger 
       las preferencias ...
  </fieldset>
 </form>

También podríamos utilizar <fieldset> fuera de un formulario.

Controles. Atributos comunes

La etiqueta y atributos dependen del tipo de control Pero muchos comparten una serie de atributos. Veámoslos:

El atributo type.

Varios controles comparten la etiqueta input. En estos casos, el valor atributo type distingue si se trata de un formulario de texto, de opción, etc.

<input type="text" /> Un control de texto <br />
<input type="radio" /> Un control de opción <br />
<input type ="checkbox" /> Una casilla de 
                                verificación

El atributo name.

Con este atributo asignamos un nombre al control. Es importante, porque al recoger los datos, podremos hacerlo a través del nombre. Además, los controles sin nombre no envían sus datos.

El atributo value.

En controles como líneas de texto, establece el valor inicial, por lo que el usuario lo puede cambiar. En otros, como botones, establece el texto que se muestra. En controles de opción, el atributo determina el valor de cada opción.

El atributo disabled.

Permite deshabilitar un control, impidiendo que el usuario interactúe con él. Se utiliza con el valor disabled (disabled="disabled").

<input type="text" disabled="disabled" value="Texto inicial" />
<input type ="checkbox" disabled="disabled" />
<input type="submit" disabled="disabled" value="Botón" />

El atributo readonly.

Hace que al control sea de sólo lectura, es decir, que no se pueda cambiar su valor. Se utiliza con el valor readonly (readonly="readonly").

<input type="text" readonly="readonly" value="Texto inicial" />
<input type ="checkbox" readonly="readonly" />
<input type="submit" readonly="readonly" value="Botón" />

Como podemos ver, no afecta a todos los controles, como a la casilla de verificación, ya que al pulsarla no cambiamos su valor. Para simular el efecto en controles de este tipo, podemos utilizar este sencillo JavaScript onclick="return false;".

Los atributos tabindex y accesskey.

Estos atributos dan accesibilidad a nuestro formulario. Tabindex determina el orden de tabulación, es decir, qué control será el siguiente en tomar el foco si pulsamos la tecla Tab. Por defecto, el orden de tabulación será el orden de aparición de los controles. El valor debe de ser un número.

El atributo accesskey, toma como valor una tecla (una letra), hace que podamos dar el foco al control con una combinación de teclas. En Internet Explorer, con la combinación Alt + tecla, y en Firefox, con Alt + Shift + tecla.

Continúa en la página siguiente...

 Cursos Informática Gratuitos