FormulariosFormulariosEn esta página se tratan los siguientes temas:
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.
La etiqueta que delimita un formulario es la etiqueta <form> ... </form>. Los atributos más importantes de la etiqueta <form> son:
Si el atributo method no está establecido, Internet Explorer y Firefox se comportan como si el valor fuera get.
La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento típico de una página web (párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean los controles.
Los etiquetas que crean los controles en los formularios son <input />, <button>, <select>, <optgroup>, <option> y <textarea>. Además, se pueden estructurar los controles con las etiquetas <fieldset> y <legend>. Por útlimo, la etiqueta <label> permite mejorar la accesibilidad de los controles.
El anvegador envía únicamente los datos de los controles contenidos en el formulario. En una misma página puede haber varios formularios que envíen datos al mismo o a diferentes agentes.
La etiqueta <fieldset> permite agrupar un conjunto de controles. Los navegadores muestran una caja alrededor de cada grupo de controles.
La etiqueta <legend> permite añadir una leyenda al <fieldset>. Los navegadores muestran la leyenda sobre el borde que rodea el grupo de controles.
  |
<fieldset> |
Puede haber varias etiquetas <legend>, pero sólo la primera se ve sobre el borde, el resto se ven dentro del <fieldset>.
| |
<fieldset> |
La etiqueta <label> permite asociar un control con un texto, de manera que mejore la accesibilidad de los formularios.
La asociación entre el control y la etiqueta <label> puede ser implícita o explícita. Se dice que la relación es implícita cuando el control se encuentra en el interior de la etiqueta. Se dice que la relación es explícita cuando la etiqueta <label> contiene el atributo for, que indica el control afectado (el control tiene entonces que tener establecido el atributo id).
Por ejemplo, en el caso de una casilla de verificación, la etiqueta <label> permite que la casilla se marque o desmarque haciendo clic en el texto, como se muestra en los ejemplos siguientes:
| |
<input type="checkbox" />Casilla 1 |
Casilla 1 |
| |
<label><input type="checkbox" />Casilla 1</label> |
|
| |
<input type="checkbox" id="casilla1" /> |
Nota: El segundo ejemplo (asociación implícita) no funcionaba en Internet Explorer 6.
En el caso de la cajas de texto <input type="text" />, la etiqueta <label> permite que el cursor se sitúe en la caja de texto haciendo clic en el texto, como se muestra en los ejemplos siguientes:
| |
Nombre: <input type="text" /> |
Nombre: |
| |
<label>Nombre: <input type="text" /></label> |
|
| |
<label for="text1">Nombre:</label><input type="text" id="text1" /> |
Nota: El segundo ejemplo (asociación implícita) no funcionaba en Internet Explorer 6.
El atributo name identifica al control. El formulario únicamente envía al servidor los datos de los controles que tienen establecido el atributo name, por tanto si un control no tiene establecido su atributo name, el control simplemente se ignora. Si hubiera varios controles con el mismo atributo name, el formulario envía todos los datos.
El atributo value permite establecer el valor inicial de un control, aunque cada control lo utiliza de una forma ligeramente distinta. El único control sin atributo value es el área de texto (<textarea>).
En algunos casos (botones) el valor se muestra al usuario y el usuario no puede modificarlo. En otros casos (cajas de texto, contraseña) el valor se muestra en la página y el usuario puede modificarlo. En otros casos (casillas de verificación, botones radio, opciones de menú, oculto, imagen) el valor no se muestra en la página y el usuario no puede modificarlo.
En algunos casos (botones, oculto, botones radio) el atributo value es necesario. En otros casos (casilla de verificación, opciones de menú) es conveniente. En otros casos (cajas de texto, contraseña, imagen) puede omitirse. En el caso del selector de archivo, ni Internet Explorer ni Firefox parecen utilizarlo.
El atributo disabled permite deshabilitar el control. Una vez deshabilitado, el control ni siquiera puede coger el foco.
| |
<input type="submit" value="Enviar" disabled="disabled" /> |
||
| |
<input type="text" disabled="disabled" /> |
El atributo readonly permite que el control no sea modificable, aunque el control puede coger el foco.
| |
<input type="submit" value="Enviar" readonly="readonly" /> |
||
| |
<input type="text" value="¡A que no me cambias!" readonly="readonly" /> |
El atributo tabindex permite controlar el orden en que el foco pasa de un elemento a otro mediante el tabulador (Tab para avanzar y Shift+Tab para retroceder). Los valores de tabindex pueden ser números naturales (incluido el cero), no necesariamente consecutivos. Si no está presente, los controles se visitan en el orden en que aparecen en el texto. Si está presente, los controles se visitan de menor a mayor.
| |
<input type="text" value="Texto 1" /> |
||
| |
<input type="text" value="Texto 1" tabindex="8" /> |
El atributo accesskey permite definir teclas de acceso. El problema con las teclas de acceso es que a veces entran en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo.
Para acceder a las teclas de acceso, Internet Explorer utiliza tanto la combinación Alt+tecla como la combinación Alt+Shift+tecla, mientras que Firefox (a partir de la versión 2.0) utiliza únicamente la combinación Alt+Shift+tecla.
| |
<input type="text" value="Acceso con a" accesskey="a" /> |
Internet Explorer no puede acceder a un elemento con la letra d como letra de acceso, ya que reserva las combinaciones Alt+(Shift)+d para acceder a la barra de dirección. Firefox sí que puede acceder mediante Alt+Shift+d (la combinación Alt+d accede a la barra de dirección).
 |
<input type="text" value="Acceso con d" accesskey="d" /> |
Nota: Internet Explorer 6 no utilizaba las combinaciones Alt+(Shift)+d para acceder a la barra de dirección.
Cualquier carácter, menos los acentos, puede ser tecla de acceso:
| |
<input type="text" value="Acceso con 1" accesskey="1" /> |
|
| |
<input type="text" value="Acceso con !" accesskey="," /> |
Si hay varios elementos con la misma tecla de acceso, o si hay varios elementos con la misma tecla de acceso en mayúsculas y minúsculas, Firefox e Internet Explorer avanzan de uno a otro (FF con Alt+Shift+tecla, IE con Alt+tecla). Internet Explorer además retrocede de uno a otro con Alt+Shift+tecla.
| |
<input type="text" value="Acceso con z" accesskey="z" /> |
|
| |
<input type="text" value="Acceso con w" accesskey="w" /> |
Los botones se crean mediante la etiqueta <button>, aunque los botones más usuales en un formulario (los botones Submit y Reset) se pueden crear también con la etiqueta <input />.
El botón Submit es el que permite al usuario remitir los datos al servidor. Se crea mediante una etiqueta <input /> cuyo atributo type tiene el valor submit.
| |
<input type="submit" value="Submit" /> |
El botón Reset restablece los valores iniciales del formulario. Se crea mediante una etiqueta <input /> cuyo atributo type tiene el valor reset.
| |
<input type="reset" value="Reset" /> |
En ambos casos, el texto que se muestra en el botón se define mediante el atributo value.
| |
<input type="submit" value="Enviar" /> |
||
| |
<input type="reset" value="Borrar todo" /> |
El atributo value sólo puede contener texto, no imágenes.
La etiqueta <button> permite crear botones de tipo submit o reset o botones de tipo general que deben asociarse a scripts para hacer algo. Los botones submit o reset se crean mediante el atributo type con el valor submit o reset. El botón de uso general se crea mediante el atributo type con el valor button.
| |
<button type="submit">Enviar</button> |
|
| |
<button type="reset">Reiniciar</button> |
|
| |
<button type="button">Botón</button> |
Si en un botón no lleva el atributo type, Firefox se comporta como si fuera un botón de tipo submit, pero Internet Explorer se comporta como si fuera un botón de tipo button.
| |
<button>Botón</button> |
Los botones <button> pueden contener texto e imágenes (o estructuras más complejas, pero no mapas de imágenes).
| |
<button> <img alt="cdlibre.org" title="cdlibre.org" src="../img/cdlibre.png" width="16" height="16" /> Botón </button> |
Existen dos tipos de cajas de texto: de una sola línea y de varias líneas
Las cajas de texto de una sola línea se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor text.
| |
<input type="text" /> |
El atributo value (optativo) contiene el valor inicial de la caja de texto. El atributo size indica el tamaño en caracteres de la caja en la pantalla (por omisión, las cajas suelen tener 20 carácteres de tamaño). El atributo maxlength indica el número máximo de carácteres que puede escribir el usuario.
| |
<input type="text" value="Escribe algo" /> |
|
| |
<input type="text" size="10" /> |
|
| |
<input type="text" maxlength="5" /> |
Existe una caja de texto de una sola línea especial para escribir contraseñas que se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor password.
| |
<input type="password" /> |
Al escribir en una caja de contraseña, en vez de letras aparecen estrellas. Es importante señalar que estas cajas no proporcionan ninguna seguridad en la transmisión, simplemente ocultan al usuario lo que este escribe.
Las cajas de texto de varias líneas se crean mediante la etiqueta <textarea>. Los atributos obligatorios rows y cols establecen el número de filas y columnas de la caja. El atributo value (optativo) contiene el valor inicial de la caja de texto de varías líneas.
| |
<textarea rows="4" cols="20"></textarea> |
|
| |
<textarea rows="3" cols="30"></textarea> |
|
| |
<textarea rows="4" cols="20">Escribe algo</textarea> |
Las casillas de verificación se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor checkbox.
| |
<input type="checkbox" />Casilla 1 |
Casilla 1 |
Si el atributo checked tiene el valor checked, la casilla aparece marcada.
| |
<input type="checkbox" checked="checked" />Casilla 1 |
Casilla 1 |
Las casillas de verificación sólo se envían si se han marcado. El atributo value contiene el valor que envia el formulario si la casilla de verificación está marcada. Si el atributo value no está establecido, el formulario envía el valor on.
Los botones radio se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor radio.
| |
<input type="radio" name="radio" />Opción 1 |
Opción 1 |
Lo botones radio que tienen el mismo atributo name forman un grupo, es decir, que si se marca uno de ellos se desmarca automáticamente el resto.
| |
<input type="radio" name="radio" />Opción 1<br /> |
Opción 1 Opción 2 |
Los dos ejemplos anteriores, aunque estén separados, forman el mismo botón radio ya que su atributo name tiene el mismo valor (en este caso "radio"). Se puede comprobar pulsando en uno de los ejemplos y observando como se desmarca el otro ejemplo. Para que fueran independientes, bastaría con que sus atributos name fueran distintos, como en el ejemplo siguiente:
| |
<input type="radio" name="radio1" />Opción 1<br /> |
Opción 1 Opción 2 |
Si uno de los botones tiene el atributo checked con el valor checked, el botón aparece marcado.
| |
<input type="radio" name="radio3" />Opción 1<br /> |
Opción 1 Opción 2 |
Los botones radio sólo se envían si se han marcado. El atributo value contiene el valor que envia el formulario si el botón radio está marcado.Si el atributo value no está establecido, el formulario envía el valor on, así que para poder saber cuál ha sido la opción elegida por el usuario es necesario establecer con valores distintos los atributos value de todos los elementos de un botón radio .
Los menús se crean mediante la etiqueta <select>. Cada opción del menú se define mediante la etiqueta <option>.
| |
<select> |
|
| |
<select> |
El atributo selected indica la opción por omisión.
| |
<select> |
Si ningún elemento posee el atributo selected, tanto Firefox como Internet Explorer muestran la primera opción del menú.
| |
<select> |
Para evitar malentendidos y forzar al usuario a elegir un valor, se suele incluir una opción en blanco al principio de los menús
| |
<select> |
El atributo size permite definir la altura del control
| |
<select size="3"> |
El atributo multiple permite elegir varias opciones simultáneamente (con ayuda de la tecla Control o Mayúsculas)
| |
<select size="4" multiple="multiple"> |
Se pueden agrupar opciones utilizando la etiqueta <optgroup>.
| |
<select name="Menu"> |
El atributo value de cada opción contiene el valor que envia el formulario si la opción está elegida. Si no se define el atributo value, el formulario envía como valor el texto que aparece en el menú.
Al crear menús y submenús, Amaya 9.3 abre la vista Estructura, para poder crear el elemento con más facilidad.
El selector de archivo se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor file.
| |
<input type="file" /> |
Aunque la recomendación indica que el atributo value puede interpretarse como el archivo elegido por omisión, ni Internet Explorer ni Firefox utilizan este atributo.
El control de tipo imagen inserta una imagen que funciona como un botón (aunque ni Firefox ni Internet Explorer le dan relieve como a los botones). Al hacer clic en un punto de la imagen se envía el formulario (como si se hubiera pulsado un botón submit) y se envían las coordenadas del punto en el que se ha hecho clic (junto con los valores de los otros controles del formulario).
| |
<input type="image" name="GNU" alt="GNU" src="gnu.jpg" /> |
Si se define el atributo value, el formulario envía también el nombre del control con el valor del atributo.
El control oculto se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor hidden. Lógicamente, los navegadores no muestran estos controles en la pantalla (aunque pueden verse en el código fuente). Se utilizan para almacenar información que de otro modo se perdería (por ejemplo, cuando hay varios formularios encadenados).
| |
<input type="hidden" name="nombre" value="pepito" /> |