El Atributo ROWS

El atributo rows en HTML se utiliza para definir el número de líneas visibles en un elemento <textarea> o en un grupo de filas de una tabla (<tbody>, <thead>, <tfoot>). En este tutorial, nos enfocaremos en su uso principal: controlar la altura de un campo de texto multilínea (<textarea>). Aprenderás cómo implementarlo, personalizarlo y combinarlo con otros atributos para una mejor experiencia de usuario.

1. Introducción al atributo rows

• Propósito:
  Especificar la altura inicial (en líneas de texto) de un <textarea>.

  • Ejemplo: Si rows="5", el campo mostrará 5 líneas de texto visibles.

• Elementos compatibles:

  • <textarea> (principal uso).

  • <tbody>, <thead>, <tfoot> (menos común, para agrupar filas en tablas).

2. Sintaxis básica para <textarea>

<textarea rows="número">Texto predeterminado</textarea>

• Valor: Un número entero positivo (ej.: 3, 10).

• Valor predeterminado: Si no se especifica, el navegador suele usar 2.

3. Ejemplos prácticos

Ejemplo 1: Campo de texto básico

<label for="comentario">Deja tu comentario:</label>
<textarea id="comentario" name="comentario" rows="4"></textarea>

Resultado:
Un campo de texto con espacio para 4 líneas visibles.

Ejemplo 2: Combinar con cols para definir ancho

El atributo cols controla el ancho del <textarea> en caracteres.

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

Resultado:
Un campo de texto de 5 líneas de alto y 50 caracteres de ancho.

Ejemplo 3: Estilizar con CSS

Aunque rows define la altura inicial, puedes personalizar el tamaño con CSS:

<textarea rows="3" style="width: 100%; padding: 10px; resize: vertical;"></textarea>

• resize: vertical: Permite al usuario ajustar la altura manualmente.

4. Uso avanzado

a) Filas dinámicas con JavaScript

Puedes cambiar el valor de rows según la interacción del usuario:

<textarea id="mensaje" rows="2" onfocus="this.rows=5"></textarea>

Explicación:
El campo se expande a 5 filas cuando el usuario hace clic en él.

b) Validación de longitud

Combina rows con maxlength para limitar el texto:

<textarea rows="4" maxlength="200" placeholder="Máximo 200 caracteres"></textarea>

5. Buenas prácticas

1. Evita valores extremos:

   • rows="1" puede dificultar la lectura.

   • rows="20" ocupará demasiado espacio.

2. Usa CSS para diseño responsivo:

   css

   Copy

   textarea {
     width: 100%;
     min-height: 100px; /* Altura mínima */
     max-height: 300px; /* Altura máxima */
     resize: both; /* Permite ajustar horizontal y verticalmente */
   }

3. Accesibilidad:

   • Siempre usa <label> asociado al <textarea>.

   • Considera aria-describedby para instrucciones adicionales.

6. Errores comunes

• Usar rows en elementos incorrectos:
  No funciona en <input type="text"> (solo en <textarea>).

• Ignorar la usabilidad:
  Un <textarea> demasiado pequeño puede frustrar al usuario.

• Confiar solo en rows:
  El tamaño final puede variar según el navegador o el CSS.

7. Casos de uso comunes

1. Formularios de contacto:

   html

   Copy

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

    

• Run HTML

• Comentarios en blogs:

  html

  Copy

  <textarea rows="4" placeholder="¿Qué opinas?"></textarea>

   
• Run HTML

• Editores simples de texto:

  html

  Copy

  <textarea rows="10" style="font-family: monospace;"></textarea>

   

3. Run HTML

8. Compatibilidad

• Navegadores modernos: Chrome, Firefox, Safari y Edge lo soportan.

• Dispositivos móviles: El teclado virtual puede afectar la visibilidad del campo (prueba en diferentes pantallas).

9. Conclusión

El atributo rows es esencial para:

• Definir la altura inicial de un campo de texto multilínea.

• Mejorar la experiencia de usuario al proporcionar un espacio adecuado para escribir.

Recuerda:

• Combínalo con CSS para diseños responsivos.

• Prueba en múltiples dispositivos y navegadores.

• ¡Nunca olvides la accesibilidad!

Ejemplo final:

<form>
  <label for="bio">Biografía (máx. 500 caracteres):</label>
  <textarea 
    id="bio" 
    name="bio" 
    rows="5" 
    maxlength="500" 
    placeholder="Cuéntanos sobre ti..."
    style="width: 100%; padding: 8px;"
  ></textarea>
  <button type="submit">Enviar</button>
</form>

Con este tutorial, podrás implementar campos de texto claros, funcionales y adaptables en tus formularios web. ????