En el desarrollo web, la organización de la información y la captura de datos del usuario son fundamentales. HTML proporciona etiquetas semánticas específicas para estructurar listas y crear formularios interactivos.

Listas en HTML

Las listas permiten agrupar elementos de manera estructurada. Existen tres tipos principales:

Listas No Odrenadas

Se utilizan cuando el orden de los elementos no es relevante. Se definen con la etiqueta <ul> y cada elemento interno se encapsula en <li>. Es importante destacar que el contenedor <ul> solo debe tener elementos <li> como hijos directos, aunque estos últimos pueden contener cualquier otro elemento HTML. Por defecto, los navegadores renderizan viñetas antes de cada elemento.

Listas Ordenadas

Cuando la secuencia de los elementos es importante, se emplea la etiqueta <ol>. Al igual que en las listas no ordenadas, los ítems se definen con <li>. El navegador asigna automáticamente una numeración secuencial a cada ítem.

Listas de Definición

Estas listas son ideales para presentar pares de términos y sus descripciones. El contenedor principal es <dl>. Dentro de él, se utiliza <dt> para el término y <dd> para la definición. Un término puede tener múltiples definiciones asociadas.

Formularios y Controles de Entrada

Los formularios son el mecanismo principle para recopilar datos del usuario. Están compuestos por un contenedor principal, controles interactivos y etiquetas descriptivas.

Contenedor del Formulario

La etiqueta <form> agrupa todos los controles. Atributos como action (URL de destino) y method (método HTTP como GET o POST) son esenciales para el procesamiento de los datos en el servidor.

Controles de Entrada (<input>)

El elemento <input> es versátil y su comportamiento cambia según el atributo type:

• text: Campo de texto de una sola línea.
• password: Oculta los caracteres ingresados.
• radio: Permite seleccionar una única opción dentro de un grupo. Para que funcionen como un grupo mutuamente excluyente, deben compartir el mismo atributo name.
• checkbox: Permite selecciones múltiples. También suelen compartir el atributo name para agrupar los valores en el backend.
• file: Habilita la carga de archivos locales.
• submit y reset: Botones para enviar los datos o restaurar el formulario a su estado inicial.
• button: Botón genérico que requiere JavaScript para ejecutar acciones.

El atributo checked se usa para marcar previamente opciones en radios y checkboxes. Los atributos name y value son cruciales, ya que definen las claves y valores que se envían al servidor.

<form action="/registro" method="POST">
    <!-- Campo de texto estándar -->
    <label for="correo">Correo Electrónico:</label>
    <input type="text" id="correo" name="email" /><br />
    
    <!-- Campo de contraseña -->
    <label for="clave">Contraseña:</label>
    <input type="password" id="clave" name="pwd" /><br />
    
    <!-- Grupo de botones de radio -->
    <p>Plan de Suscripción:</p>
    <input type="radio" id="plan_basico" name="plan" value="basico" checked />
    <label for="plan_basico">Básico</label>
    <input type="radio" id="plan_pro" name="plan" value="pro" />
    <label for="plan_pro">Profesional</label><br />
    
    <!-- Grupo de casillas de verificación -->
    <p>Notificaciones:</p>
    <input type="checkbox" id="notif_email" name="notificaciones" value="email" />
    <label for="notif_email">Por Email</label>
    <input type="checkbox" id="notif_sms" name="notificaciones" value="sms" />
    <label for="notif_sms">Por SMS</label><br />
    
    <!-- Carga de archivos -->
    <label for="avatar">Foto de Perfil:</label>
    <input type="file" id="avatar" name="foto" /><br /><br />
    
    <!-- Botones de acción -->
    <input type="submit" value="Registrarse" />
    <input type="reset" value="Limpiar Campos" />
    <input type="button" value="Verificar Disponibilidad" onclick="verificar()" />
</form>

Etiquetas Descriptivas (<label>)

El elemento <label> mejora la accesibilidad y la experiencia de usuario. Al vincular el atributo for de la etiqueta con el atributo id del control correspondiente, el área clickeable del control se expande para incluir el texto de la etiqueta.

Menús Desplegables (<select>)

Para presentar una lista de opciones donde el usuario debe elegir una (o varias, con el atributo multiple), se utiliza <select>. Cada opción se define con <option>. La primera opción se selecciona por defecto, a menos que se especifique el atributo selected en otra.

<form>
    <label for="region">Seleccione su Región:</label>
    <select id="region" name="zona">
        <option value="mad">Madrid</option>
        <option value="bcn">Barcelona</option>
        <option value="val" selected>Valencia</option>
        <option value="sev">Sevilla</option>
    </select>
</form>

Áreas de Texto Multilínea (<textarea>)

Cuando se requiere que el usuario ingrese bloques de texto extensos, <textarea> es el elemento adecuado. Sus dimensiones iniciales se pueden configurar mediante los atributos rows (filas visibles) y cols (columnas o caracteres por fila), aunque en la práctica moderna, estas dimensiones suelen controlarse mediante CSS.

<label for="comentarios">Observaciones Adicionales:</label>
<textarea id="comentarios" name="obs" rows="5" cols="40">
Escriba aquí sus comentarios...
</textarea>