Etiqueta HTML `<textarea>`

La etiqueta <textarea> define un campo de formulario donde los usuarios pueden introducir texto de varias líneas. A diferencia de la etiqueta <input>, se permite el ajuste de texto dentro de <textarea> 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 muestra de forma predeterminada con una fuente proporcional.

El <textarea> se usa dentro de la etiqueta <form>.

Sintaxis

La etiqueta <textarea> viene en pares. El contenido se escribe entre las etiquetas de apertura (<textarea>) y cierre (</textarea>).

TIP

Para definir el tamaño de un campo de texto, usa los atributos rows y cols, o las propiedades CSS height y width.

Ejemplo de la etiqueta HTML `<textarea>`:

Ejemplo de la etiqueta HTML <textarea>|W3Docs

html

<!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>

Try it Yourself »

Resultado

textarea example

En este ejemplo usamos la etiqueta <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 (12 símbolos) y el atributo cols para establecer su anchura (35 símbolos).

Estilizar el elemento `<textarea>` con CSS

La etiqueta <textarea> se considera un elemento reemplazado, ya que tiene ciertas dimensiones intrínsecas. Dar estilo a esta etiqueta es relativamente fácil con CSS normal.

Sus valores válidos e inválidos pueden resaltarse con las pseudoclases :valid y :invalid.

TIP

En la mayoría de los navegadores, <textarea> es redimensionable debido a la propiedad CSS resize. El redimensionamiento está habilitado de forma predeterminada. Puedes desactivarlo estableciendo el valor de resize en none.

Ejemplo de la etiqueta HTML `<textarea>` con propiedades CSS:

Ejemplo de campo de texto con la etiqueta HTML <textarea>|W3Docs

html

<!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>

Try it Yourself »

En este ejemplo usamos estilos CSS para personalizar el aspecto del campo de texto.

Atributos

Attribute	Value	Description
autocomplete	on, off	Especifica si un campo de texto debe tener el autocompletado activado o no.
autofocus	autofocus	Define que un área de texto debe recibir automáticamente el foco cuando se carga la página.
cols	number	Define el ancho 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 cuando se envíe.
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 un área de texto.
placeholder	text	Define una breve sugerencia que describe el valor esperado de un área de texto. La sugerencia 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 un número visible de filas en un área de texto. El valor predeterminado es 2.
spellcheck	true, false, default	Especifica si el texto de la etiqueta `<textarea>` debe ser revisado ortográficamente por el navegador/SO subyacente.
wrap	soft, hard	Define cómo debe ajustarse el texto en un área de texto cuando se envía 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 evento.

Cómo dar estilo a una etiqueta HTML <textarea>

json

{
    "tag_name": "textarea"
}

Práctica

¿Cuáles son algunos de los atributos de la etiqueta HTML <textarea>?

El atributo 'rows', que especifica el número visible de líneas en el área de texto.El atributo 'color', que cambia el color del texto en el textarea.El atributo 'cols', que especifica el ancho visible del área de texto en caracteres.El atributo 'readonly', que hace que el área de texto sea de solo lectura.El atributo 'background', que cambia el color de fondo del textarea.

Etiqueta HTML <textarea> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <textarea>: ​

Resultado ​

Estilizar el elemento <textarea> con CSS ​

Ejemplo de la etiqueta HTML <textarea> con propiedades CSS: ​

Atributos ​

Práctica ​