Saltar al contenido

Formularios en HTML5: Recopilación de Datos del Usuario 📋

Un formulario en HTML es un elemento interactivo fundamental que permite a los sitios web recoger datos introducidos por el usuario. Estos datos pueden ser opiniones, dudas, información de contacto, credenciales de inicio de sesión, y una amplia variedad de otros detalles, lo que hace a los formularios esenciales para la interacción dinámica entre el usuario y la página web. Están compuestos por una serie de controles o campos como cuadros de texto, casillas de verificación, menús desplegables y botones.

El Elemento <form>: La Base del Formulario 🏗️

Todos los controles de un formulario se agrupan dentro de la etiqueta <form>. Esta etiqueta, que tiene una apertura y un cierre, define el inicio y el fin del formulario.

Estructura y Atributos Principales:

<form action="destino.php" method="post" enctype="text/plain">
    <!-- Controles del formulario aquí -->
</form>
  • action: Indica la dirección URL (de un archivo en el servidor, como PHP, o incluso una dirección de correo electrónico mailto:) a la que se enviarán los datos del formulario una vez que el usuario lo envíe.
  • method: Especifica el método HTTP que se utilizará para enviar los datos del formulario. Los valores más comunes son:
    • get: Los datos se envían como parte de la URL (aparecen en la barra de direcciones del navegador). Es adecuado para formularios cortos y no sensibles, pero tiene limitaciones de longitud.
    • post: Los datos se envían en el cuerpo de la solicitud HTTP, lo que los hace más seguros (no visibles en la URL) y permite enviar grandes volúmenes de información. Es el método preferido para la mayoría de los formularios.
  • enctype: (Solo relevante con method="post") Indica cómo se codificará la información del formulario para su envío.
    • application/x-www-form-urlencoded (por defecto): Para la mayoría de los formularios.
    • multipart/form-data: Obligatorio cuando el formulario incluye campos de carga de archivos (<input type="file">).
    • text/plain: Para enviar datos como texto plano (raramente usado).
  • id: Permite asignar un identificador único al formulario para su manipulación con JavaScript o CSS, aunque no es visible para el usuario.

El Elemento <input>: La Estrella de los Formularios ✨

La etiqueta <input> es el elemento más versátil y utilizado dentro de los formularios. Es una etiqueta vacía (no necesita cierre) y su comportamiento se define principalmente a través de su atributo type.

Estructura y Atributos Generales:

<input name="nombreInterno" type="tipoDeControl" value="valorInicial" />
  • name: Es un nombre interno que se le da al control para identificarlo cuando los datos del formulario se envían al servidor. Este nombre no es visible para el usuario, pero es crucial para el procesamiento de los datos. Debe ser descriptivo y tener sentido.
  • type: Define el tipo de control que será el input. Es el atributo más importante y determina su apariencia y función.
  • value: Indica el valor inicial del control que se mostrará por pantalla o el valor que se enviará con el formulario. Su comportamiento varía según el type.

Tipos Comunes de <input>

Campo de Texto (type="text"):

Para introducir texto de una sola línea.

  • size: Determina el ancho visual de la caja.
  • maxlength: Limita el número máximo de caracteres que se pueden introducir.
  • value: Contenido inicial del campo.
Nombre: <input name="campoNombre" type="text" value="Juan Pérez" size="30" maxlength="50">

Contraseña (type="password"):

Similar al campo de texto, pero los caracteres introducidos se ocultan (usualmente con asteriscos o puntos).

Contraseña: <input name="clave" type="password" size="20" maxlength="15">

Botón de Envío (type="submit"):

Crea un botón que, al ser clicado, envía los datos del formulario al action especificado en la etiqueta <form>.

  • value: El texto que se mostrará en el botón (este sí es visible para el usuario).
<input name="botonEnviar" type="submit" value="Enviar Formulario">

Casilla de Verificación (type="checkbox"):

Permite al usuario seleccionar una o varias opciones de un conjunto.

  • value: El valor que se enviará si la casilla está marcada.
  • checked: Atributo booleano (se pone o no se pone) que hace que la casilla aparezca marcada por defecto.
<input name="opcion1" type="checkbox" value="aceptoCondiciones" checked> Acepto los términos y condiciones

Botón de Opción (type="radio"):

Permite al usuario seleccionar solo una opción de un conjunto mutuamente excluyente.

  • name: Es crucial que todos los botones de radio de un mismo grupo compartan el mismo name para que solo uno pueda ser seleccionado.
  • value: El valor asociado a la opción seleccionada.
  • checked: Marca una opción por defecto.
<input type="radio" id="genderMale" name="genero" value="masculino"> <label for="genderMale">Masculino</label><br>
<input type="radio" id="genderFemale" name="genero" value="femenino"> <label for="genderFemale">Femenino</label>

Selección de Archivo (type="file"):

Permite al usuario adjuntar y subir un archivo.

Adjuntar CV: <input type="file" name="curriculum">

Importante: Para que funcione la subida de archivos, el atributo enctype del formulario debe ser multipart/form-data.

Selector de Fecha (type="date"):

Abre un calendario para que el usuario seleccione una fecha.

  • min y max: Establecen un rango de fechas permitidas (formato yyyy-mm-dd).
Fecha de Nacimiento: <input type="date" name="nacimiento" min="1900-01-01" max="2025-12-31">

Selector de Hora (type="time"):

Permite introducir una hora.

  • min y max: Limitan el rango de horas.
  • step: Define los incrementos en segundos (por defecto es 60, para minutos).
Hora de Cita: <input type="time" name="horaCita" min="09:00" max="17:00" step="900">

Campo Numérico (type="number"):

Para introducir solo números, a menudo con flechas para incrementar/decrementar.

  • min, max, step: Definen el rango y los incrementos.
  • value: Valor inicial.
Cantidad: <input type="number" name="cantidad" min="1" max="100" value="1">

Correo Electrónico (type="email"):

Similar a text, pero los navegadores pueden realizar una validación básica del formato de correo electrónico.

Correo Electrónico: <input type="email" name="correo">

URL (type="url"):

Similar a text, con validación básica del formato URL.

Sitio Web: <input type="url" name="urlPersonal">

Selector de Color (type="color"):

Abre un selector de color del sistema.

  • value: Color inicial en formato hexadecimal (ej., #000000 para negro).
Color Preferido: <input type="color" name="colorFavorito" value="#FF0000">

Rango (type="range"):

Crea un deslizador para seleccionar un valor numérico dentro de un rango.

  • min, max, value, step: Configuran el rango, valor inicial e incrementos. step="any" permite decimales.
Valoración (1-10): <input type="range" name="valoracion" min="1" max="10" value="5">

Teléfono (type="tel"):

Para introducir números de teléfono. No incluye validación por defecto debido a la variabilidad de formatos.

Teléfono: <input type="tel" name="telefono">

Otras Etiquetas de Formulario Importantes 📝

Además de <input>, HTML ofrece otras etiquetas especializadas para diferentes tipos de entrada de datos:

Área de Texto Multilínea (<textarea>):

Para introducir texto que abarca varias líneas.

  • name: Nombre interno.
  • rows: Número de líneas visibles (altura).
  • cols: Número de caracteres por línea (ancho).

El valor inicial se coloca entre las etiquetas de apertura y cierre.

<label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" id="comentarios" rows="5" cols="40">Escribe aquí tu mensaje...</textarea>

Menú Desplegable (<select> y <option>):

Permite al usuario elegir una o varias opciones de una lista desplegable.

  • <select>: El contenedor del menú. Su atributo name identifica el desplegable.
  • <option>: Representa cada elemento seleccionable en la lista.
    • value: El valor que se enviará si esta opción es seleccionada.
    • selected: Atributo booleano que hace que esta opción aparezca seleccionada por defecto.
<label for="ciudad">Elige tu ciudad:</label>
<select name="ciudad" id="ciudad">
    <option value="madrid">Madrid</option>
    <option value="barcelona" selected>Barcelona</option>
    <option value="valencia">Valencia</option>
</select>

Atributos Adicionales Comunes para Campos de Formulario 💡

  • placeholder: Proporciona una pista de texto (generalmente en gris) que se muestra dentro del campo de entrada cuando está vacío. Desaparece en cuanto el usuario empieza a escribir. 
    <input type="text" name="usuario" placeholder="Introduce tu nombre de usuario">
  • required: Atributo booleano que indica que el campo es obligatorio. Si el usuario intenta enviar el formulario sin completar este campo, el navegador mostrará un mensaje de error. 
    <input type="email" name="email" required placeholder="Tu correo electrónico (obligatorio)">
  • pattern: Especifica una expresión regular que el valor del campo debe cumplir para ser válido. Se utiliza con type="text", email, url, tel, password, etc., para validaciones más específicas.
  • title: A menudo se usa junto con pattern para proporcionar un mensaje de error personalizado que explica al usuario cómo debe ser el formato de la entrada. 
    <input type="text" name="codigoPostal" pattern="[0-9]{5}" title="Introduce un código postal válido de 5 dígitos" required>
  • minlength y maxlength: Controlan la cantidad mínima y máxima de caracteres que un usuario puede introducir en un campo de texto o contraseña. 
    <input type="password" name="nuevaClave" minlength="8" maxlength="20" placeholder="Mín. 8, Máx. 20 caracteres">
  • autofocus: Atributo booleano que especifica que el campo debe recibir automáticamente el foco cuando la página se carga. Solo se debe usar en un elemento por página. 
    <input type="text" name="busqueda" autofocus placeholder="Escribe tu búsqueda aquí...">

Botones con la Etiqueta <button> 🔘

Además de <input type="submit">, HTML ofrece la etiqueta <button> que es más flexible, ya que puede contener texto e incluso otros elementos (como imágenes).

  • type="submit": Envía el formulario.
  • type="reset": Reinicia todos los campos del formulario a sus valores iniciales.
  • type="button": Un botón genérico que no realiza ninguna acción por defecto. Su comportamiento se suele definir con JavaScript.
<button type="reset" name="resetBtn">Limpiar Formulario</button>
<button type="submit" name="enviarForm">Enviar Datos</button>
<button type="button" name="accionJs">Cambiar Contenido</button>

La diferencia clave con <input type="submit"> es que <button type="submit"> permite contenido HTML complejo en su interior (ej., <button><img src="send.png" alt="Enviar"> Enviar</button>).

Agrupación de Controles: <fieldset> y <legend> 🧱

Para mejorar la organización y la semántica de formularios extensos, se utilizan <fieldset> y <legend>:

  • <fieldset>: Agrupa controles relacionados dentro de un cuadro.
  • <legend>: Proporciona un título o leyenda para el grupo de controles dentro del <fieldset>.
<form>
    <fieldset>
        <legend>Tus Datos Personales</legend>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre" required><br><br>
        <label for="apellido">Apellido:</label>
        <input type="text" id="apellido" name="apellido" required>
    </fieldset>

    <fieldset>
        <legend>Datos de Contacto</legend>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="telefono">Teléfono:</label>
        <input type="tel" id="telefono" name="telefono">
    </fieldset>

    <button type="submit">Enviar</button>
</form>

Lista de Opciones con Autocompletado: <datalist> y <option> 📝

La etiqueta <datalist> permite crear una lista de opciones sugeridas para un campo de texto, proporcionando funcionalidad de autocompletado. El usuario puede elegir una de las opciones sugeridas o escribir una diferente.

El atributo list del <input> debe coincidir con el id del <datalist>.

<label for="navegador">Tu navegador favorito:</label>
<input type="text" id="navegador" name="navegador" list="listaNavegadores">
<datalist id="listaNavegadores">
    <option value="Google Chrome">
    <option value="Mozilla Firefox">
    <option value="Microsoft Edge">
    <option value="Safari">
    <option value="Opera">
</datalist>

Consideraciones Importantes sobre los Formularios ⚠️

  • Funcionalidad del Formulario: Es crucial entender que los formularios HTML por sí solos solo recogen datos. Para que los datos sean procesados (guardados en una base de datos, enviados por correo electrónico, etc.), se requiere el uso de lenguajes de programación del lado del servidor (como PHP, Python, Node.js, Ruby) o, para interacciones más dinámicas en el navegador, JavaScript.
  • Validación: Aunque HTML5 proporciona validación básica (required, type="email", pattern), la validación completa y segura de los datos siempre debe realizarse también en el lado del servidor para proteger la aplicación de entradas maliciosas.

Con estos conocimientos, puedes empezar a construir formularios robustos y amigables en tus páginas web.