Los formularios son una pieza fundamental para permitir que los usuarios interactúen con nuestras páginas web, ya que son la vía más directa para recoger datos y enviar información. A diferencia de simplemente navegar haciendo clic en enlaces, los formularios nos ofrecen la posibilidad de que el usuario participe activamente, ya sea para realizar búsquedas, enviar encuestas o establecer contacto.
Para crear un formulario en HTML, utilizamos la etiqueta <form>, que actúa como un contenedor que agrupa todos los elementos relacionados con la entrada de datos. Aunque es posible colocar elementos de formulario fuera de esta etiqueta, hacerlo no tiene mucho sentido, ya que perderíamos la capacidad de enviar los datos o de que el formulario funcione correctamente. Por eso, siempre es recomendable incluir todos los campos dentro de un <form>, salvo que estemos manejando la interacción exclusivamente con JavaScript, algo que queda fuera del alcance de esta explicación.
Dentro de la etiqueta <form>, podemos definir varios atributos que controlan su comportamiento. El más importante es action, que indica la URL o página a la que se enviarán los datos cuando el usuario pulse el botón de enviar. Por ejemplo, si tenemos un archivo llamado procesamiento.php, pondríamos action="procesamiento.php" para que esa página reciba y procese la información. En entornos sin servidor activo, como cuando trabajamos localmente, no veremos resultados al enviar el formulario, pero la estructura sigue siendo la misma.
Otro atributo que podemos encontrar es enctype, que define cómo se codifican los datos antes de enviarlos. Por defecto, los formularios usan application/x-www-form-urlencoded, que es adecuado para la mayoría de los casos. Este atributo es más relevante cuando enviamos archivos o datos complejos, pero para formularios básicos no es necesario modificarlo.
El atributo method es fundamental para decidir cómo se transmiten los datos al servidor. Hay dos métodos principales: GET y POST. Cuando usamos GET, los datos se añaden a la URL después de un signo de interrogación, formando una cadena de consulta con pares nombre-valor separados por ampersands. Esto es útil para consultas o búsquedas donde no importa que los datos sean visibles en la barra de direcciones. Por ejemplo, al buscar en Google, los términos aparecen en la URL.
Sin embargo, GET no es adecuado para enviar información sensible, como contraseñas, porque los datos quedan expuestos en la URL. Para esos casos, usamos POST, que envía los datos en el cuerpo de la petición HTTP, ocultándolos de la barra de direcciones. Aunque POST no cifra los datos por sí mismo, dificulta que se vean directamente en el navegador. Para proteger realmente la información, es necesario usar protocolos seguros como SSL/TLS, que cifran la comunicación entre el navegador y el servidor.
Dentro del formulario, los elementos más comunes para recoger texto son los campos de entrada con la etiqueta <input>. Esta etiqueta requiere el atributo type para especificar el tipo de dato que aceptará. El tipo más básico es text, que crea una caja para introducir texto simple. Si no especificamos el atributo type, el navegador asume que es un campo de texto.
Cada campo debe tener un atributo name que identifica el dato que se envía. Este nombre es el que aparecerá como clave en la cadena de datos enviada al servidor. Es importante usar nombres descriptivos, como nombre o email, para facilitar el manejo posterior de la información.
El atributo value permite establecer un valor por defecto que aparecerá dentro del campo cuando se carga la página. Por ejemplo, si queremos que en el campo de nombre aparezca inicialmente Texto, pondremos value="Texto".
Podemos controlar el tamaño visible del campo con el atributo size, que indica aproximadamente cuántos caracteres caben en la caja, aunque el diseño visual es mejor manejarlo con CSS. Para limitar la cantidad máxima de caracteres que el usuario puede introducir, usamos maxlength. Por ejemplo, maxlength="10" impedirá que se escriban más de diez caracteres.
Para campos donde se debe ingresar una contraseña, usamos <input type="password">. Este tipo oculta el texto introducido mostrando puntos o asteriscos, evitando que alguien que esté cerca vea la contraseña. Sin embargo, es importante recordar que esta ocultación es solo visual; los datos se envían en texto plano a menos que usemos conexiones seguras. Por eso, nunca debemos confiar en que el campo password por sí solo garantiza seguridad.
Cuando necesitamos un área de texto más grande para comentarios o mensajes, utilizamos la etiqueta <textarea>. A diferencia de <input>, no es un elemento vacío y se escribe con etiqueta de apertura y cierre. También tiene un atributo name para identificar el dato. Podemos ajustar su tamaño visible con los atributos rows y cols, que controlan el número de filas y columnas respectivamente. Por ejemplo, rows="5" y cols="30" harán que el área sea más amplia y alta, facilitando la escritura de textos largos. A diferencia de los campos de texto, textarea no tiene un atributo maxlength nativo, por lo que para limitar la cantidad de texto se necesitaría usar JavaScript.
Finalmente, para enviar el formulario, usamos un botón de tipo submit, que también se crea con <input>. Por defecto, este botón muestra el texto Enviar consulta, pero podemos personalizarlo con el atributo value. Por ejemplo, value="Mándame" cambiará el texto que aparece en el botón. El atributo name en los botones no suele ser necesario, a menos que queramos identificar qué botón se pulsó en formularios con varios botones.
Con estos elementos básicos ya podemos construir formularios funcionales que recojan datos de texto, contraseñas y textos largos, y enviarlos a una página para su procesamiento. En futuras ocasiones podremos explorar más tipos de campos y funcionalidades avanzadas, pero con lo visto aquí tenemos una base sólida para empezar a trabajar con formularios en HTML.
Un ejemplo sencillo de formulario con estos elementos podría ser:
<form action="respuesta.html" method="get">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" value="Texto" maxlength="10" size="32">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena">
<label for="comentarios">Comentarios:</label>
<textarea id="comentarios" name="comentarios" rows="5" cols="30"></textarea>
<input type="submit" value="Mándame">
</form>
Este formulario recoge un nombre limitado a diez caracteres, una contraseña oculta y un área para comentarios más extensa, enviando los datos mediante el método GET a la página respuesta.html. Así podemos empezar a interactuar con los usuarios y procesar la información que nos envían.