Curso HTML 8.5 Textarea y comentarios del usuario

1. Introducción al elemento <textarea>

El elemento <textarea> se utiliza para recoger en un formulario bloques de texto multilínea. A diferencia de <input type='text'>, que solo admite una sola línea, <textarea> proporciona a los usuarios un área expandible donde escribir comentarios largos, mensajes, descripciones, etc.

2. Atributos fundamentales de <textarea>

A continuación un resumen de los atributos más comunes:

3. Ejemplo básico de <textarea>

Este fragmento muestra un área de texto para que el usuario escriba una descripción libre:

<form action='/enviar' method='post'>
  <label for='descripcion'>Descripción:</label>
  <textarea
    id='descripcion'
    name='descripcion'
    rows='5'
    cols='40'
    placeholder='Escribe aquí tu descripción...'
    maxlength='500'
    required
  ></textarea>
  <button type='submit'>Enviar</button>
</form>
  

Comentarios de código:

• rows y cols indican las dimensiones iniciales.
• placeholder da pista sobre el contenido esperado.
• maxlength limita la longitud.
• required obliga a no dejarlo vacío.

4. Sección de comentarios de usuarios

Para habilitar que los usuarios dejen sus propios comentarios en una página, se suele usar:

1. Un formulario con un <textarea> para el texto del comentario.
2. Botones para enviar o cancelar su comentario.
3. Un listado donde ese comentario se muestre junto con metadatos (usuario, fecha).

Ejemplo de un mini-sistema de comentarios (solo HTML):

<section id='comentarios'>
  <h4>Deja tu comentario</h4>
  <form action='/comentar' method='post'>
    <label for='usuario'>Nombre:</label>
    <input type='text' id='usuario' name='usuario' required>
    
    <label for='texto-comentario'>Comentario:</label>
    <textarea
      id='texto-comentario'
      name='texto-comentario'
      rows='4'
      cols='50'
      placeholder='Escribe tu comentario aquí...'
      required
    ></textarea>
    
    <button type='submit'>>Publicar</button>
    <button type='reset'>>Limpiar</button>
  </form>
  
  <h4>Comentarios publicados</h4>
  <article class='comentario'>
    <header>
      <strong>Ana Pérez</strong> <time datetime='2023-08-01T10:30'>1 ago, 10:30</time>
    </header>
    <p>¡Excelente contenido! Gracias por compartir.</p>
  </article>
  <!--
    Cada nuevo comentario iría dentro de un <article>
    con datos de autor y fecha. En una implementación real
    esos elementos se generan en el servidor.
  -->
</section>
  

En este ejemplo:

• Usamos un formulario sencillo para publicar el comentario.
• La sección de comentarios muestra cada mensaje en un <article>.
• Se ilustra también cómo usar comentarios en HTML (<!-- texto -->).

5. Buenas prácticas y accesibilidad

• Siempre vincula <label for='…'> con el id del <textarea>.
• Proporciona placeholder breve y claro.
• Usa required o validación personalizada para evitar envíos vacíos.
• En producción, valida y escapa el contenido del comentario en el servidor para prevenir XSS.
• Incluye atributos de accesibilidad como aria-label o aria-describedby si el contexto lo requiere.

6. Recapitulación

El elemento <textarea> es esencial cuando necesitas permitir a un usuario escribir textos largos. Combinado con formularios y un correcto etiquetado, facilita la recogida de “comentarios de usuario” en sitios web y aplicaciones. No olvides emplear siempre las buenas prácticas de etiquetado, validación y seguridad al procesar ese contenido.