Formularios FormulariosUn 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:
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.
Para crear un nuevo formulario en Amaya, debes utilizar el menú . Al crear el formulario, Amaya solicita el valor del atributo action.
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. 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> <input type="text" /><br/> <select name="Menu"> <option>Uno</option> <option>Dos</option> <option selected="selected">Tres</option> </select> </fieldset> |
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 label, fieldset y legend.
El atributo name identifica al control. Cuando los formularios son enviados al servidor, lo que se envía son parejas name=value, por tanto si este atributo no se define, el control simplemente se ignora. Si hubiera varios controles con el mismo atributo name, el formulario envía todas las parejas name=value.
El atributo disabled permite deshabilitar el control. Una vez deshabilitado, el control ni siquiera puede coger el foco.
| <input type="submit" value="Submit" 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="Submit" 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" size="8" value="Texto 1"
/> <input type="text" size="8" value="Texto 2" /> <input type="text" size="8" value="Texto 3" /> <input type="text" size="8" value="Texto 4" /> |
|
| <input type="text" size="8" value="Texto 1"
tabindex="8" /> <input type="text" size="8" value="Texto 2" tabindex="7" /> <input type="text" size="8" value="Texto 3" tabindex="6" /> <input type="text" size="8" value="Texto 4" tabindex="5" /> |
El atributo accesskey permite definir teclas de acceso (en Windows Alt+tecla).
| <input type="text" size="8" value="Texto 1"
accesskey="a" /> <input type="text" size="8" value="Texto 2" accesskey="b"/> <input type="text" size="8" value="Texto 3" accesskey="c"/> <input type="text" size="8" value="Texto 4" accesskey="d"/> |
Los botones se crean mediante la etiqueta <button>, aunque los botones más usuales en un formulario (los botones Envíar y Reset) se pueden crear también con la etiqueta <input />.
El botón Envíar 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" name="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" name="Reset" /> |
El atributo value sólo puede contener texto, no imágenes.
La etiqueta <button> permite crear botones de cualquier tipo (Envíar, reset), con la ventaja de que pueden contener texto e imágenes (o estructuras más complejas, pero no mapas de imágenes).
| <button>Botón</button> | |
| <button><img alt="cdlibre.org" title="cdlibre.org" src="../img/cdlibre.png" /> Botón</button> |
Los botones Enviar 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">Botón</button> | |
| <button type="reset">Botón</button> | |
| <button type="button">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 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 lo que se escribe.
Las cajas de texto de una sola línea se crean mediante la etiqueta input cuyo atributo type tiene el valor text. Los atributos rows y cols establecen el tamaño de la caja en la pantalla.
| <textarea rows="4" cols="20"></textarea> |
Las casilla 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 |
El atributo value contiene el valor que envia el formulario si la casilla de verificación está marcada.
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.
Si uno de los botones tiene el atributo checked con el valor checked, el botón aparece marcado.
| <input type="radio" name="radio2" />Opción
1<br /> <input type="radio" name="radio2" checked="checked" />Opción 2 |
Opción 1 Opción 2 |
El atributo value contiene el valor que envia el formulario si el botón radio está marcado.
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 Mozilla 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, pero ni Internet Explorer ni Mozilla utilizan este atributo.
Por escribir
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" /> |
La etiqueta label permite asociar un control con un texto.
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).
La etiqueta label es un elemento diseñado para mejorar la accesibilidad de los formularios. Por ejemplo, en el caso de una casilla de verificación, 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> |