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 navegador 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.
Volver al principio de la página
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" name="texto" 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" name="texto" 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" name="texto1" value="Texto 1" /> |
||
| |
<input type="text" name="texto1" value="Texto 1" tabindex="5" /> |
El atributo accesskey permite definir teclas de acceso (atajos de teclado). 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" name="texto1" value="Acceso con a" accesskey="a" /> |
Nota: Internet Explorer 9 puede acceder a un elemento con la letra d como letra de acceso, pero versiones anteriores no podían, ya que utilizaban la combinación Alt+(Shift)+d para acceder a la barra de dirección, como se comenta en la página de diferencias entre IE9 e IE8. Firefox y Chrome sí que puede acceder mediante Alt+Shift+d (la combinación Alt+d accede a la barra de dirección). Internet Explorer 6 no utilizaba la combinación 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" name="texto1" value="Acceso con 1" accesskey="1" /> |
|
| |
<input type="text" name="texto1" 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" name="texto1" value="Acceso con z" accesskey="z" /> |
|
| |
<input type="text" name="texto1" value="Acceso con w" accesskey="w" /> |
Volver al principio de la página
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 />.
Normalmente los botones no suelen llevar atributo name, pero se puede poner si se quiere (tendría sentido si un formulario contuviera dos botones de envío y quisieramos saber en cuál de ellos ha hecho clic el usuario, pero esto no es muy habitual).
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. El texto que se muestra en el botón se define mediante el atributo value.
| |
<input type="submit" value="Submit" /> |
|
| |
<input type="submit" value="Enviar" /> |
El botón Reset restablece los valores iniciales del formulario. Se crea mediante una etiqueta <input /> cuyo atributo type tiene el valor reset. El texto que se muestra en el botón se define mediante el atributo value.
| |
<input type="reset" value="Reset" /> |
|
| |
<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">Borrar todo</button> |
|
| |
<button type="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="cdlibre.png" width="16" height="16" /> Botón </button> |
Si un botón no lleva el atributo type, tanto Firefox como Internet Explorer se comportan como si fuera un botón de tipo submit.
| |
<button>Botón</button> |
Nota: Si un botón no lleva el atributo type, Internet Explorer 8 se comporta como si fuera un botón de tipo submit, pero Internet Explorer 7 y anteriores se comportaban como si fuera un botón de tipo button, como se comenta en la página de diferencias entre IE8 e IE7.
Volver al principio de la página
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" name="texto" /> |
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" name="texto" value="Escribe algo" /> |
|
| |
<input type="text" name="texto" size="10" /> |
|
| |
<input type="text" name="texto" 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" name="contrasena" /> |
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 name="texto" rows="4" cols="20"></textarea> |
|
| |
<textarea name="texto" rows="3" cols="30"></textarea> |
|
| |
<textarea name="texto" rows="4" cols="40">Escribe algo</textarea> |
Volver al principio de la página
Las casillas de verificación se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor checkbox.
| |
<input type="checkbox" name="casilla" />Casilla 1 |
Casilla 1 |
Si el atributo checked tiene el valor checked, la casilla aparece marcada.
| |
<input type="checkbox" name="casilla" 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.
Volver al principio de la página
Los botones radio se crean mediante la etiqueta <input /> cuyo atributo type tiene el valor radio.
| |
<input type="radio" name="radio" value="1" />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" value="1" />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" value="1" />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" value="1" />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 .
Volver al principio de la página
Los menús se crean mediante la etiqueta <select>. Cada opción del menú se define mediante la etiqueta <option>.
| |
<select name="menu"> <option selected="selected" value="1">Uno</option> |
El atributo selected indica la opción por omisión.
| |
<select name="menu"> |
Si ningún elemento posee el atributo selected, tanto Firefox como Internet Explorer muestran la primera opción del menú.
| |
<select name="menu"> |
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 name="menu"> |
El atributo size permite definir la altura del control
| |
<select name="menu" size="3"> |
El atributo multiple permite elegir varias opciones simultáneamente (con ayuda de la tecla Control o Mayúsculas)
| |
<select name="menu" 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ú.
Volver al principio de la página
El selector de archivo se crea mediante la etiqueta <input /> cuyo atributo type tiene el valor file.
| |
<input type="file" name="archivo" /> |
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.
Volver al principio de la página
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.
Volver al principio de la página
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" /> |
Volver al principio de la página
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> |
Puede haber varias etiquetas <legend>, pero sólo la primera se ve sobre el borde, el resto se ven dentro del <fieldset>.
| |
<fieldset> |
Volver al principio de la página
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" name="casilla" />Casilla 1 |
Casilla 1 |
| |
<label><input type="checkbox" name="casilla" />Casilla 1</label> |
|
| |
<input type="checkbox" name="casilla" id="casilla1" /> |
Nota: Internet Explorer 7 representa correctamente la asociación implícita. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.
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" name="casilla" /> |
Nombre: |
| |
<label>Nombre: <input type="text" name="casilla" /></label> |
|
| |
<label for="text1">Nombre:</label><input type="text" name="casilla" id="text1" /> |
Nota: Internet Explorer 7 representa correctamente la asociación implícita. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.