El Atributo COLS

Se utiliza en la etiqueta textarea del HTML para definir el ancho visible del área de texto en términos de columnas de caracteres.

El atributo cols se utiliza en el elemento <textarea> de HTML para definir el ancho visible del área de texto en términos de columnas de caracteres. Es útil para controlar el tamaño inicial del campo de texto, aunque su comportamiento puede variar según el navegador y la fuente utilizada. A continuación, te explicamos cómo implementarlo correctamente.

¿Qué es el atributo `cols`?

Propósito:
Especifica el número de columnas (caracteres por línea) que se mostrarán en un <textarea>, determinando su ancho inicial.
Valor:
Un número entero (ej: 20, 40).
Compatibilidad:
Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Sintaxis básica

<textarea cols="número-de-columnas">...</textarea>

HTML:

<textarea cols="40" rows="5" placeholder="Escribe aquí..."></textarea>

¿Cómo funciona?

1 columna ≈ 1 carácter:
El valor de cols define el ancho del <textarea> basándose en el ancho promedio de los caracteres de la fuente actual (por ejemplo, cols="40" mostrará un campo de ~40 caracteres de ancho).
No es exacto:
El tamaño real puede variar según la fuente, el navegador o el sistema operativo.
Relación con CSS:
Si se aplican estilos con width en CSS, estos tendrán prioridad sobre cols.

Ejemplos prácticos

Área de texto básica con columnas definidas

<label for="comentario">Comentario:</label>
<textarea id="comentario" cols="50" rows="4"></textarea>

Resultado:

Un área de texto de 50 columnas de ancho y 4 filas de alto.

Combinando `cols` con CSS

<textarea 
  cols="30" 
  style="width: 100%; max-width: 500px; font-family: Arial;"
  placeholder="Mensaje..."
></textarea>

cols="30" sirve como valor predeterminado.
width: 100% y max-width: 500px en CSS permiten un diseño responsivo.

Uso sin atributo `cols` (comportamiento por defecto)

Si no se especifica cols, el navegador usará un valor predeterminado (generalmente 20).

HTML:

<textarea rows="3">Texto predeterminado</textarea>

Errores comunes y buenas prácticas

No confundir `cols` con `maxlength`:

cols: Define el ancho visible del área de texto.

maxlength: Limita la cantidad de caracteres que el usuario puede escribir.

<textarea cols="40" maxlength="200"></textarea>

Usar solo `cols` sin `rows`:

Es recomendable definir también rows (número de líneas visibles) para una mejor experiencia de usuario.

<!-- Correcto -->
<textarea cols="40" rows="5"></textarea>

Ignorar la accesibilidad:

Siempre asocia un <label> al <textarea> para mejorar la usabilidad y accesibilidad.

<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" cols="40" rows="3"></textarea>

Diferencias entre `cols` y CSS

Atributo `cols`	Propiedad CSS `width`
Basado en el ancho de caracteres.	Define el ancho en píxeles, porcentaje, etc.
Menos preciso.	Control más exacto.
Útil para diseños básicos.	Ideal para diseños responsivos.

Mejores prácticas

Usa `cols` como valor predeterminado:

Proporciona un tamaño inicial coherente, incluso si luego lo sobrescribes con CSS.

Combínalo con `rows`:

Define tanto el ancho (cols) como el alto (rows) para un control completo.

Prioriza CSS para diseños complejos:

Usa width, max-width, o unidades relativas (vw, %) para responsividad.

<textarea cols="30" style="width: 80%; min-width: 200px;"></textarea>

Ejemplo avanzado: Formulario responsivo

<form>
  <label for="bio">Biografía:</label>
  <textarea 
    id="bio" 
    cols="40" 
    rows="6"
    style="width: 100%; max-width: 600px; padding: 10px;"
    placeholder="Cuéntanos sobre ti..."
  ></textarea>
  <button type="submit">Enviar</button>
</form>

Resultado:

Un área de texto que se ajusta al ancho del contenedor (hasta 600px), manteniendo 40 columnas como referencia.

Conclusión

El atributo cols es útil para:

Definir un ancho inicial coherente en <textarea>.
Mejorar la usabilidad en formularios simples.
Trabajar junto a CSS para diseños más flexibles.

Ejemplo final:

<!DOCTYPE html>
<html>
<head>
  <style>
    .texto-personalizado {
      width: 90%;
      max-width: 800px;
      font-family: 'Arial';
      border: 2px solid #ccc;
      padding: 12px;
    }
  </style>
</head>
<body>
  <label for="historia">Tu historia:</label>
  <textarea 
    id="historia" 
    class="texto-personalizado" 
    cols="50" 
    rows="8"
    placeholder="Escribe aquí..."
  ></textarea>
</body>
</html>

¡Usa cols como guía inicial y complementa con CSS para diseños profesionales!

¿Qué es el atributo cols?