Etiqueta HTML <textarea>
La etiqueta HTML <textarea> define un campo de formulario donde los usuarios pueden ingresar texto de varias líneas, enviado al enviar el formulario.
La etiqueta <textarea> define un campo de formulario donde los usuarios pueden ingresar texto de varias líneas. A diferencia de la etiqueta <input>, el ajuste de texto dentro de <textarea> está permitido cuando se envía el formulario.
Un área de texto puede tener un número ilimitado de caracteres. El texto dentro de esta etiqueta se renderiza en una fuente proporcional de forma predeterminada.
La etiqueta <textarea> se usa dentro de la etiqueta <form>.
Sintaxis
La etiqueta <textarea> va en pares. El contenido se escribe entre las etiquetas de apertura (<textarea>) y cierre (</textarea>).
Un error común entre principiantes: <textarea> no acepta un atributo value. Su valor predeterminado va entre las etiquetas de apertura y cierre, a diferencia de un <input> de una sola línea, que usa value="…". Por ejemplo, <textarea>Hello</textarea> muestra "Hello", mientras que <input value="Hello"> muestra "Hello" — pero <textarea value="Hello"></textarea> no muestra nada.
Ejemplo de la etiqueta HTML <textarea>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Resultado
En este ejemplo usamos <textarea> para definir el campo de texto, el atributo name para asignar un nombre a este campo ("comment"), el atributo rows para establecer su altura visible (12 líneas) y el atributo cols para establecer su anchura visible (35 caracteres).
Asociar una etiqueta con un <textarea>
Cada campo de formulario debe tener una etiqueta <label>. Conecte la etiqueta al textarea asignándole un id al textarea y apuntando el atributo for de la etiqueta a ese mismo valor. Esto permite que los lectores de pantalla anuncien el campo, y que los usuarios hagan clic en el texto de la etiqueta para mover el foco al textarea — ambas mejoras para la accesibilidad y la usabilidad.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="comment">Your comment:</label><br />
<textarea id="comment" name="comment" rows="6" cols="40"></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Limitar e indicar la entrada
Use el atributo maxlength para limitar cuántos caracteres puede escribir un usuario, y el atributo placeholder para mostrar una pista breve dentro de un campo vacío. El placeholder desaparece en cuanto el usuario comienza a escribir — no es un valor predeterminado, por lo que nunca se envía con el formulario.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="bio">Short bio (max 100 characters):</label><br />
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="100"
placeholder="Tell us a little about yourself..."></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Aplicar estilos al elemento <textarea> con CSS
La etiqueta <textarea> se considera un elemento reemplazado, ya que tiene algunas dimensiones intrínsecas. Aplicar estilos a esta etiqueta es relativamente sencillo con CSS estándar.
Sus valores válidos e inválidos pueden resaltarse con las pseudoclases :valid e :invalid.
En la mayoría de los navegadores, <textarea> es redimensionable gracias a la propiedad CSS resize. El redimensionamiento está habilitado de forma predeterminada. Puede deshabilitarlo estableciendo el valor de resize en none.
Ejemplo de la etiqueta HTML <textarea> con propiedades CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Here we use CSS styles to customize the look of the text field.</p>
<textarea class="comment"> Send your comments to the author.</textarea>
<br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>En este ejemplo usamos estilos CSS para personalizar la apariencia del campo de texto.
Controlar el redimensionamiento con la propiedad resize
De forma predeterminada, la mayoría de los navegadores agregan un controlador de arrastre en la esquina de un <textarea> para que los usuarios puedan redimensionarlo en ambas direcciones. Puede controlar esto con la propiedad CSS resize:
resize: none;— deshabilita el redimensionamiento por completo.resize: vertical;— permite redimensionar solo la altura.resize: horizontal;— permite redimensionar solo la anchura.resize: both;— el valor predeterminado, permite redimensionar en ambas direcciones.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea {
width: 60%;
padding: 8px;
}
.no-resize {
resize: none;
}
.vertical-only {
resize: vertical;
}
.horizontal-only {
resize: horizontal;
}
</style>
</head>
<body>
<p>Not resizable:</p>
<textarea class="no-resize" rows="3"></textarea>
<p>Resizable vertically only:</p>
<textarea class="vertical-only" rows="3"></textarea>
<p>Resizable horizontally only:</p>
<textarea class="horizontal-only" rows="3"></textarea>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| autocomplete | on, off | Especifica si el campo de texto debe tener el autocompletado habilitado. |
| autofocus | autofocus | Define que el área de texto debe obtener el foco automáticamente cuando se carga la página. |
| cols | number | Define la anchura visible de un área de texto. El valor predeterminado es 20 caracteres. |
| dirname | dirname | Especifica el nombre de un control de formulario oculto que contendrá la dirección del texto del textarea al enviarlo. |
| disabled | disabled | Define que un área de texto debe estar deshabilitada. |
| form | form_id | Define uno o más formularios a los que pertenece el área de texto (mediante id). |
| maxlength | number | Define el número máximo de caracteres permitidos en el área de texto. |
| minlength | number | Define el número mínimo de caracteres permitidos en el área de texto. |
| name | text | Define un nombre para el área de texto. |
| placeholder | text | Define una pista breve que describe el valor esperado de un área de texto. La pista se muestra cuando el campo está vacío y desaparece cuando recibe el foco. |
| readonly | readonly | Define que un área de texto es de solo lectura. |
| required | required | Define que un área de texto debe completarse antes de enviar el formulario. |
| rows | number | Define el número visible de filas en un área de texto. El valor predeterminado depende del navegador (normalmente 2). |
| spellcheck | true, false, default | Especifica si el texto en la etiqueta <textarea> debe ser verificado ortográficamente por el navegador o el sistema operativo. |
| wrap | soft, hard | Define cómo se ajusta el texto en un área de texto al enviar el formulario. soft (predeterminado): el texto se envía sin saltos de línea adicionales. hard: el navegador inserta saltos de línea según el ancho (requiere cols). |
La etiqueta <textarea> también admite los Atributos Globales y los Atributos de Eventos.
Etiquetas relacionadas
<input>— controles de formulario de una sola línea y especializados.<form>— el contenedor que agrupa y envía los campos del formulario.<label>— etiquetas que hacen accesibles los campos del formulario.