FormulariosFormulariosUn 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.
Para crear un nuevo formulario en Amaya, se puede utilizar el menú . Al crear el formulario, Amaya solicita el valor del atributo action.
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>. La etiqueta <label> permite mejorar la accesibilidad de los controles.
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> <legend>Formulario</legend> <input type="text" /><br/> <select name="Menu"> <option>Uno</option> <option>Dos</option> <option selected="selected">Tres</option> </select> </fieldset> |
Puede haber varias etiquetas <legend>, pero sólo la primera se ve sobre el borde, el resto se ven dentro del fieldset.
| |
<fieldset> <legend>Formulario</legend> <legend>Segunda leyenda</legend> <input type="text" /><br/> <select name="Menu"> <option>Uno</option> <option>Dos</option> <option selected="selected">Tres</option> </select> </fieldset> |
Nota: Amaya 9.52 no maneja correctamente los <fieldset>. Para crear un <fieldset>, es conveniente crear primero los elementos que vayan a incluirse en el <fieldset>, insertar el <fieldset> antes de los elementos, abrir la vista de código fuente y en ella mover la etiqueta de cierre </fieldset> detrás de los elementos que se quieran incluir en el <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" /> <label for="casilla1">Casilla 1</label> |
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. El control sigue pudiendo coger el foco, pero no es modificable.
| |
<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 2" /> <input type="text" value="Texto 3" /> <input type="text" value="Texto 4" /> |
||
| |
<input type="text" value="Texto 1" tabindex="8"
/> <input type="text" value="Texto 2" tabindex="7" /> <input type="text" value="Texto 3" tabindex="6" /> <input type="text" value="Texto 4" tabindex="5" /> |
El atributo accesskey permite definir teclas de acceso. El problema con las teclas de acceso es que a menudo entran en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo y sobre, que los navegadores no las interpreten de la misma manera.
Para acceder a las teclas de acceso, Internet Explorer utiliza la combinación Alt+tecla, mientras que Firefox (a partir de la versión 2.0) utiliza la combinación Alt+May+tecla.
| |
<input type="text" value="Acceso con a"
accesskey="a" /> <input type="text" value="Acceso con e" accesskey="e" /> <input type="text" value="Acceso con i" accesskey="i" /> <input type="text" value="Acceso con o" accesskey="o" /> |
Internet Explorer reserva la combinación Alt+d para acceder a la barra de dirección:
 |
<input type="text" value="Acceso con d"
accesskey="d" /> |
Nota: Internet Explorer 6 no utilizaba la combinación Alt+d para acceder a la barra de dirección.
Firefox no entiende las teclas de acceso numéricas ni, en general, las teclas que no son caracteres:
 |
<input type="text" value="Acceso con 1"
accesskey="1" /> <input type="text" value="Acceso con 2" accesskey="2" /> <input type="text" value="Acceso con 3" accesskey="3" /> <input type="text" value="Acceso con 4" accesskey="4" /> |
|
| |
<input type="text" value="Acceso con !"
accesskey="!" /> <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, Internet Explorer cambia de uno a otro (en un sentido con Alt+tecla y en sentido contrario con Alt+May+tecla), mientras que Firefox únicamente accede al último.
| |
<input type="text" value="Acceso con z"
accesskey="z" /> <input type="text" value="Acceso con z" accesskey="z" /> <input type="text" value="Acceso con z" accesskey="z" /> |
|
| |
<input type="text" value="Acceso con w"
accesskey="w" /> <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. En Amaya se puede editar directamente haciendo clic en el interior del botón.
| |
<input type="submit" value="Envíar" /> | ||
| |
<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" /> 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.
| |
<textarea rows="4" cols="20"></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 /> <input type="radio" name="radio" />Opción 2 |
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", que Amaya asigna por omisión). 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 /> <input type="radio" name="radio2" />Opción 2 |
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 /> <input type="radio" name="radio3" checked="checked" />Opción 2 |
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 es necesario establecer con valores distintos los atributos value de todos los elementos de un botón radio para poder saber cuál ha sido la opción elegida por el usuario.
Los menús se crean mediante la etiqueta <select>. Cada opción del menú se define mediante la etiqueta <option>.
| |
<select> <option selected="selected">Uno</option> </select> |
|
| |
<select> <option selected="selected">Uno</option> <option>Dos</option> </select> |
El atributo selected indica la opción por omisión.
| |
<select> <option>Uno</option> <option>Dos</option> <option selected="selected">Tres</option> </select> |
Si ningún elemento posee el atributo selected, tanto Firefox como Internet Explorer muestran la primera opción del menú.
Nota: Amaya 8.7.1 añade automáticamente el atributo selected al primer elemento del menú.
| |
<select> <option>Uno</option> <option>Dos</option> <option>Tres</option> </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> <option selected="selected"></option> <option>Uno</option> <option>Dos</option> <option>Tres</option> </select> |
El atributo size permite definir la altura del control
| |
<select size="3"> <option selected="selected">Uno</option> <option>Dos</option> <option>Tres</option> <option>Cuatro</option> </select> |
El atributo multiple permite elegir varias opciones simultáneamente (con ayuda de la tecla Control o Mayúsculas)
| |
<select size="4" multiple="multiple"> <option selected="selected">Uno</option> <option>Dos</option> <option>Tres</option> <option>Cuatro</option> </select> |
Se pueden agrupar opciones utilizando la etiqueta <optgroup>.
| |
<select name="Menu"> <option selected="selected"></option> <optgroup label="Grupo1"> <option>Opción uno</option> <option>Opción dos</option> <option>Opción tres</option> </optgroup> <optgroup label="Grupo2"> <option>Opción cuatro</option> <option>Opción cinco</option> <option>Opción seis</option> </optgroup> </select> |
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 da relieve como a los botones). Al hacer clic en un punto de la imagen es como si se hubiera pulsado a 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.
Yo diría que en este caso el atributo value no sirve para nada.
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" /> |