HTML textarea: texto multilínea, longitud, readonly y valores enviados

Referencia de HTML

Creado 2026-10-30 Última modificación 2026-10-30

HTML textarea acepta múltiples líneas de texto plano. Coloque el contenido inicial entre sus etiquetas de apertura y cierre, use rows/cols para el tamaño de visualización, y minlength/maxlength para la longitud de entrada. Configure name para enviar el valor con un formulario.

Tamaño de visualización, contenido inicial y límites de entrada

textarea necesita una etiqueta de cierre. A diferencia de input, no utiliza un atributo de valor HTML para el valor inicial. Los saltos de línea y los espacios entre sus etiquetas afectan el contenido, así que verifica que la indentación del formato no introduzca entradas no deseadas.

Atributo	Rol y limitaciones
`rows`, `cols`	Establece el recuento de filas visibles y el ancho medido en anchuras de carácter promedio usando enteros positivos. No limitan las líneas de entrada ni los caracteres; el ancho y alto de CSS también afectan la visualización.
`placeholder`	Un indicio que se muestra cuando el valor está vacío. No se envía como el valor real y desaparece al escribir, por lo que no reemplaza una etiqueta separada.
`required`	Bloquea el envío ordinario del formulario cuando está vacío. No decide si el texto que contiene solo espacios en blanco es significativo.
`minlength`, `maxlength`	Limita la longitud mínima y máxima de los valores introducidos por el usuario en unidades de código UTF-16. Un solo emoji puede usar dos o más unidades. Solo un mínimo permite un valor vacío; combínalo con required para entrada obligatoria.
`readonly`	Evita la edición por parte del usuario pero permite enfocar y copiar. Con un nombre, permanece incluido en los datos del formulario.
`disabled`	Desactiva el control y lo excluye de los datos del formulario y la validación de restricciones.

Ejecute un ejemplo completo de entrada de varias líneas

Guarde este código completo como textarea.html y ábralo en un navegador. No se necesita servidor ni biblioteca adicional. El botón de enviar muestra las entradas de nombre/valor del navegador en lugar de enviarlas.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Entrada textarea y valores enviados</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Escribir una consulta</h1>
  <form id="demo">
    <label for="message">Mensaje (5–200 unidades de código)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Describe el problema y el resultado que deseas.">Esta es la primera línea.
Esta es la segunda línea.</textarea>
    <label for="reference">Indicación de solo lectura</label>
    <textarea id="reference" name="reference" rows="2" readonly>Incluye el número de pedido.</textarea>
    <label for="locked">Campo desactivado</label>
    <textarea id="locked" name="locked" rows="2" disabled>Este valor se excluye del envío.</textarea>
    <button type="submit">Mostrar valores enviados</button>
    <button type="reset">Restablecer</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

Envíe el formulario inicial: aparecen message y reference. El JSON \n indica un salto de línea en el valor; locked se omite.
Borre el mensaje y envíe: la validación requerida lo bloquea. Luego escriba directamente dos o tres caracteres ordinarios y envíe para verificar la validación de longitud mínima.
Ingrese <b>Practice</b> como el mensaje y envíe. Debido a que la entrada y la salida son texto, el resultado muestra texto con forma de etiqueta en lugar de texto en negrita.
Restablecer restaura el mensaje original de dos líneas y borra el resultado. Restablecer vuelve a los valores predeterminados de HTML en lugar de dejar el valor vacío.

La validación nativa del navegador ayuda con la entrada del usuario y la envío ordinario de formularios. No se garantiza que las mismas comprobaciones se realicen para los valores asignados por script, por lo que las aplicaciones reales deben validar también en el servidor los valores requeridos, las longitudes permitidas y los formatos.

Distinguir el ajuste visual del texto de los saltos de línea reales

El ajuste visual debido al ancho del campo es distinto de un salto de línea introducido con Enter. El wrap="soft" predeterminado no añade saltos de línea enviados solo porque el texto se ajuste visualmente. wrap="hard" añade saltos de línea enviados según el ancho de columna especificado y requiere cols. Para adaptarse a una pantalla estrecha, comienza con el ajuste predeterminado y el ancho de CSS.

El max-width: 100% del ejemplo ayuda a mantener el campo dentro de su contenedor en pantallas estrechas, mientras que resize: vertical permite a los usuarios cambiar su altura. El ancho en píxeles de cols="32" depende de la fuente, los anchos de los caracteres y del navegador, por lo que no se debe asumir que exactamente 32 caracteres caben en una línea.

Lee los valores en JavaScript y valídalos en el servidor

Lea la entrada actual a través de textarea.value y la predeterminada a través de textarea.defaultValue. Para leer las ediciones del usuario, use el valor en lugar del textContent de la etiqueta. El ejemplo escribe los resultados en textContent para que la entrada no se ejecute como HTML.

readonly y disabled no son controles de seguridad. Los usuarios pueden alterar los valores a través de las herramientas de desarrollador o solicitudes separadas, por lo que verifique los números de orden inalterables o los datos de permisos contra los datos confiables del servidor. Si el servidor cuenta bytes u otra unidad de caracteres, verifique si su límite utiliza la misma medida que el maxlength del navegador.

La referencia del área de texto referencia de textarea en MDN explica los atributos y restricciones.

Referencia de HTML