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.
Los botones son útiles en formularios para enviarlos, reestablecerlos o para ejecutar funciones personalizadas. Pueden ser insertados usando el tag HTML input (submit, reset e image) o el tag HTML button (botones con contenido).
Este tipo de botones envía automáticamente el formulario al ser presionados. Son insertados usando el tag HTML input con el valor "submit" para el atributo "type".
Este tipo de botones reestablecen los controles de un formulario a sus valores iniciales al ser presionados. Son insertados usando el tag HTML input con el valor "reset" para el atributo "type".
Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia de que lo los botones de imagen son mostrados visualmente con la imagen apuntada en el atributo "src". Estos botones además envían las coordinadas donde el click ha ocurrido (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas con el formulario como "boton1.x" y "boton1.y"). Son insertados usando el tag HTML input con el valor "image" para el atributo "type".
Los botones con contenido pueden ser usados como botones de envío o de reestablecimiento, o pueden no tener ninguna acción preestablecida (dependiendo del valor del atributo "type"), pero sí permiten a los autores insertar contenido dentro de ellos. Esto dignifica que un trozo de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).
| Código | Visualización |
|---|---|
| <form method="post" action="manejador.php"> <p><button type="button"> El <b>tag HTML button</b><br /> permite contenido.<br /> </button></p> </form> |
La entrada de archivos puede ser utilizada para subir archivos al servidor. El control muestra una caja de texto donde el usuario debe especificar la ubicación del archivo (que será procesada localmente por el navegador) que será enviado hacia el servidor. De esta forma, los autores pueden pedir a los visitantes el envío de archivos mediante la página. El control usualmente muestra un botón para elegir el archivo visualmente.
Nota que para formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag HTML form.
| Código | Visualización |
|---|---|
| <form method="post" action="manejador.php" enctype="multipart/form-data"> <p><input name="imagen" type="file" /></p> </form> |
Las etiquetas de los elementos pueden hacer que tu página se vea mejor y agregar una pequeña funcionalidad para navegadores visuales (cuando un visitante hace click en la etiqueta la acción es transmitida al control asociado), pero seguramente tendrán mucho sentido para personas con discapacidades o navegadores no visuales. Una etiqueta establece una relación entre un control y un trozo de texto (que se supone ha de dar un "título" para el control).
Las etiquetas pueden ser insertadas usando el tag HTML label y son asociadas al control mediante el atributo "for". Para lograr esto, el valor del atributo "for" del tag HTML label debe coincidir con el valor del atributo "id" del control.
| Código | Visualización |
|---|---|
| <form method="post" action="manejador.php"><div> <label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br /> <label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br /> Género:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br /> <input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label> </div></form> |
Todos los elementos de un formulario pueden también ser agrupados temáticamente con el tag HTML fieldset. Este tag contiene a un grupo de controles que se relacionan unos con otros de alguna forma (por ejemplo, información personal, información laboral, información financiera, intereses, etc.).
El título para cada grupo de elementos puede establecerse con el tag HTML legend que debe ser definido justo a continuación del tag de apertura del fieldset, y proveer un título descriptivo para el grupo de controles.
| Código | Visualización |
|---|---|
| <form method="post" action="manejador.php"> <fieldset> <legend>Información personal</legend> Nombre: <input type="text" name="nombre" /><br /> Apellido: <input type="text" name="apellido" /><br /> Dirección: <input type="text" name="pdireccion" /><br /> Teléfono: <input type="text" name="ptelefono" /> </fieldset> <fieldset> <legend>Información laboral</legend> Dirección: <input type="text" name="ldireccion" /><br /> Teléfono: <input type="text" name="ltelefono" /> </fieldset> </form> |
El uso de estas agrupaciones es amplio y depende de cada formulario específico, pero puede ser muy útil para los visitantes al llenar formularios largos (especialmente para navegadores no visuales).