La Etiqueta TEXTAREA

La etiqueta <textarea> se utiliza para crear un campo de texto multilínea en formularios HTML. Es ideal para recopilar entradas largas de usuarios, como comentarios, mensajes o descripciones. Aquí te explicamos cómo implementarla correctamente, con ejemplos y buenas prácticas.

Sintaxis básica

La estructura básica incluye los atributos rows (filas) y cols (columnas) para definir el tamaño visible inicial:

<textarea rows="4" cols="50" placeholder="Escribe aquí..."></textarea>

• rows: Número de filas visibles (altura).

• cols: Número de columnas visibles (ancho).

• placeholder: Texto de ejemplo que desaparece al escribir.

 Atributos comunes

Atributo	Descripción
name	Nombre del campo (obligatorio para enviar datos en formularios).
maxlength	Máximo de caracteres permitidos (ejemplo: maxlength="200").
required	Indica que el campo es obligatorio antes de enviar el formulario.
readonly	El texto es visible pero no editable.
disabled	Desactiva el campo (no se envía con el formulario).
wrap="soft/hard"	Controla cómo se envía el texto al servidor (soft no incluye saltos de línea automáticos, hard sí).

Ejemplo con atributos:

<textarea 
  name="comentario" 
  rows="5" 
  cols="30" 
  placeholder="Escribe tu comentario..." 
  maxlength="500" 
  required
></textarea>

Estilización con CSS

Personaliza el diseño con clases o estilos en línea:

textarea {
  width: 100%;            /* Ancho completo */
  padding: 10px;
  border: 2px solid #007bff;
  border-radius: 5px;
  font-family: Arial;
  resize: vertical;       /* Permite redimensionar verticalmente */
}

textarea:focus {
  outline: none;
  border-color: #0056b3;
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

Integración en formularios

Envía el contenido del <textarea> a un servidor usando <form>:

<form action="/procesar" method="POST">
  <label for="mensaje">Mensaje:</label>
  <textarea 
    id="mensaje" 
    name="mensaje" 
    rows="4" 
    placeholder="Escribe tu mensaje..."
    required
  ></textarea>
  <button type="submit">Enviar</button>
</form>

<label>: Mejora la accesibilidad vinculando el texto al campo con for="id-del-textarea".

Accesibilidad

Vincula <label>: Siempre usa una etiqueta descriptiva.

Atributos ARIA: Agrega aria-describedby para instrucciones adicionales:

<textarea 
  id="bio" 
  aria-describedby="ayuda-bio"
></textarea>
<p id="ayuda-bio">Máximo 300 caracteres.</p>

Interacción con JavaScript

a) Obtener o modificar el valor:

const textarea = document.getElementById('mensaje');

// Obtener valor
console.log(textarea.value);

// Establecer valor
textarea.value = "Texto inicial...";

b) Validar longitud:

<textarea id="comentario" maxlength="200"></textarea>
<p id="contador">Caracteres restantes: 200</p>

<script>
  const textarea = document.getElementById('comentario');
  const contador = document.getElementById('contador');

  textarea.addEventListener('input', () => {
    const restantes = 200 - textarea.value.length;
    contador.textContent = `Caracteres restantes: ${restantes}`;
  });
</script>

Ejemplos prácticos

a) Formulario de contacto:

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" required>

  <label for="correo">Correo:</label>
  <input type="email" id="correo" name="correo" required>

  <label for="mensaje">Mensaje:</label>
  <textarea 
    id="mensaje" 
    name="mensaje" 
    rows="6" 
    placeholder="Escribe tu mensaje..." 
    required
  ></textarea>

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

b) Campo con límite de caracteres y estilos:

<textarea 
  id="tweet" 
  maxlength="280" 
  placeholder="¿Qué está pasando?"
  style="width: 100%; height: 100px; border: 1px solid #ccc; padding: 10px;"
></textarea>
<p id="contador-tweet">280 caracteres restantes</p>

<script>
  document.getElementById('tweet').addEventListener('input', function() {
    const contador = document.getElementById('contador-tweet');
    contador.textContent = `${280 - this.value.length} caracteres restantes`;
  });
</script>

Errores comunes

Olvidar el name: Sin él, el dato no se envía en el formulario.

Usar value como atributo: El valor se define entre las etiquetas, no como atributo:

<!-- Incorrecto -->
<textarea value="Texto inicial"></textarea>

<!-- Correcto -->
<textarea>Texto inicial</textarea>

Conclusión

La etiqueta <textarea> es esencial para:

• Capturar entradas de texto largas en formularios.

• Mejorar la experiencia de usuario con campos editables y redimensionables.

• Mantener accesibilidad y semántica en el código.

Mejores prácticas:

• Usa placeholder para guiar al usuario.

• Limita la longitud con maxlength si es necesario.

• Estiliza con CSS para adaptarlo al diseño de tu sitio.

• Valida el contenido con JavaScript en tiempo real.

¡Ahora puedes integrar <textarea> en tus formularios para recopilar datos de manera eficiente y profesional!