Los formularios son una característica del estándar HTML (lenguaje de marcas hipertextual) que permite a los autores colectar información provista por los visitantes. Estos formularios pueden ser útiles para recolectar información personal, información de contacto, preferencias u opiniones, o cualquier tipo de entrada por parte del visitante que el autor pueda necesitar. En este tutorial exploraremos todas las características disponibles para construir formularios en documentos HTML.
Un formulario puede ser insertado en un documento HTML mediante el tag HTML form el cual actúa como contenedor para todos los elementos de entrada (input). Toda la información recolectada por un formulario puede ser entregada a un agente procesador que es usualmente especificado en el atributo "action" (el cual puede ser suprimido mediante el uso de JavaScript). Lo que el agente procesador hace con la información y cómo la maneja es un tema que no será tratado en este sitio dado que no pertenece al estándar HTML. Para manejar datos de un formulario debes usar un script del lado servidor.
También puedes necesitar especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos son adjuntados al cuerpo del formulario) o "get" (los datos son adjuntados a la URL (localizador uniforme de recursos)). Se supone que el agente procesador conoce y maneja el método de envío del formulario.
De esta forma, un formulario simple puede tener la siguiente declaración:
La mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y también del tipo de información que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos usando tres tags: el tag HTML input, el tag HTML button, el tag HTML select y el tag HTML textarea. En este tutorial dividiremos los controles de acuerdo con su funcionalidad. Nota: como las descripciones y atributos de cada control son tratados brevemente en este tutorial, por favor refiérete a dichos tags para más información.
Observa que el atributo "name" de cada control será el nombre utilizado para identificar los datos para el agente procesador, y el valor dependerá de la naturaleza del control (algunas veces, como en las casillas de verificación o botones radio, será el contenido del atributo "value").
Existen tres tipos de entradas de texto que pueden recolectar información textual como nombres, comentarios, etc.
Este control recopila información textual en una sola línea, lo que significa que el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea. Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" para el atributo "type".
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p>Ingresa texto: <input name="textoentrada" type="text" /></p> </form> |
El valor pasado al agente procesador será el texto ingresado por el usuario, o sea el contenido dentro de la caja de texto.
Este control actúa exactamente como la entrada de texto de línea, con la excepción de que este control "esconde" los caracteres mostrándolos como puntos o asteriscos para evitar que los usuarios vean el texto ingresado. Es comúnmente usado para el ingreso de contraseñas.
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p>Ingresa contraseña: <input name="contrasena" type="password" /></p> </form> |
El valor pasado al agente procesador será el texto ingresado por el usuario, o sea el contenido dentro de la caja de texto.
Este control permite a los usuarios ingresar texto en una o más líneas. Es insertado utilizando el tag HTML textarea y puede ser usado para recolectar párrafos, comentarios, cartas, etc. En este tag, el contenido será el valor inicial del texto.
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p>Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea></p> </form> |
Nota que los atributos "rows" y "cols" establecen las dimensiones de la caja de texto y son requeridos por algunos DTDs (declaración de tipo de documento). El valor pasado al agente procesador será el texto ingresado por el usuario, o sea el contenido dentro de la caja de texto.
Los autores también pueden permitir a sus visitantes escoger opciones preestablecidas de una lista. Esto puede ser logrado usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de opciones.
La casilla de verificación es una opción simple que puede tomar uno de dos valores: "marcado" o "desmarcado". Las casillas de verificación pueden ser visualmente agrupadas como una lista de opciones, pero cada una de ellas es tratada individualmente. Este control es insertado mediante el tag HTML input con el valor "checkbox" para el atributo "type".
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p>Selecciona tus intereses:<br /> <input name="cbipeliculas" type="checkbox" />Películas<br /> <input name="cbilibros" type="checkbox" />Libros<br /> <input name="cbiinternet" type="checkbox" />Internet </p> </form> |
En este caso, el valor pasado será un valor booleano y representará el estado de verificación de la opción. Dependiendo del agente procesador podría ser "on/off", "checked/unckecked", "true/false", etc.
Los botones radio funcionan en la misma forma que las casillas de verificación con pequeñas diferencias: los botones radio que comparten un mismo nombre conforman un grupo de opciones donde los usuarios no pueden seleccionar más de una opción a la vez. Esto significa que cuando el usuario selecciona una opción, el resto es automáticamente deseleccionado.
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p>Selecciona tus intereses:<br /> <input name="intereses" type="radio" value="rbipeliculas" />Películas<br /> <input name="intereses" type="radio" value="rbilibros" />Libros<br /> <input name="intereses" type="radio" value="rbiinternet" />Internet </p> </form> |
Para los botones radio el valor pasado al agente procesador es el contenido del atributo "value", lo que significa que una lista de opciones con varias opciones sólo pasará un valor.
Estas lista pueden ser insertadas usando tres tags: el tag HTML select (contenedor principal), el tag HTML option (declaración de opción) y el tag HTML optgroup (grupo de opciones). Este tipo de lista puede ser usado como una lista de botones radio o como una lista de casillas de verificación, dependiendo de la presencia del atributo "multiple".
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p>Selecciona una sola opción, como en los botones radio:<br /> <select name="entradaselect"> <optgroup label="Entradas de texto"> <option>De una sola línea</option> <option>Contraseña</option> <option>Multilínea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificación</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> </p> <p>Selecciona tantas opciones como desees, como en las casillas de verificación (manteniendo presionada la tecla "Ctrl"):<br /> <select name="entradaselect[]" multiple="multiple"> <optgroup label="Entradas de texto"> <option>De una sola línea</option> <option>Contraseña</option> <option>Multilínea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificación</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> </p> </form> |
Para la primera lista sin el atributo "multiple", el valor pasado al agente procesador será la opción seleccionada, pero para el segundo ejemplo el valor pasado será una lista (array) conteniendo las opciones seleccionadas. Es por ello, que para las listas con el atributo "multiple" presente, debes agregar al nombre del control "select" los corchetes ("[]"). El valor individual pasado en ambos casos es el contenido del atributo "value" si es que se encuentra presente, y en su defecto el contenido del tag.