
El elemento html textarea es un elemento de formulario que proporciona un cuadro de texto de varias líneas editable. Un ejemplo de un elemento <textarea>
simple:
< textarea name = "textarea" > escribe texto aquí </ textarea >
Etiqueta html textarea
Clasificaciones de contenido | Un elemento organizativo, un elemento normal, un elemento interactivo y un elemento relacionado con la forma. |
---|---|
Contenido permitido | Texto. |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte contenido normal. |
Interfaz DOMO | HTMLTextAreaElement |
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
Soportado | Soportado | Soportado | Soportado | Soportado |
Una función autocomplete
que todavía no es compatible con la mayoría de los navegadores.
Características
En este elemento html textarea se pueden utilizar propiedades globales.
autocomplete
Esta propiedad indica si el valor de este elemento se puede completar automáticamente a través del navegador. Los posibles valores de esta propiedad son:
off
: El usuario debe ingresar manualmente valores en este campo cada vez, o la página proporciona un método para autocompletar entradas de forma aislada del navegador, es decir, el navegador no interfiere con el problema de autocompletar.on
: El navegador puede completar automáticamente los valores ingresados por el usuario en función de los valores ingresados por el usuario en tiempos anteriores.
Si no se establece ningún valor de propiedad autocomplete
en un elemento <textarea>
, entonces el navegador usará la propiedad del autocomplete
formulario al que pertenece ese elemento, que es el <form>
elemento padre de ese elemento o el elemento <form>
cuyo valor de propiedad hijo usamos id
en una propiedad form
de ese elemento.
Para obtener más información, consulte el párrafo de propiedades autocomplete
en la página del elemento <form>
. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.
autofocus
Esta propiedad booleana nos permite especificar que queremos que el foco se mueva a este elemento al cargar la página a menos que el usuario lo cambie (por ejemplo, escribiendo un elemento de entrada diferente).
Esta propiedad solo se puede usar en un elemento relacionado con el formulario en el documento. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.
Ejemplo de uso de la función autofocus
:
< textarea name = "textarea" autofocus > Escriba el texto aquí </ textarea >
cols
Especifica el ancho aparente de este elemento en anchos de caracteres. Si se especifica esta propiedad, debe ser un número entero positivo. De lo contrario, su valor predeterminado es 20
(en HTML5).
Un ejemplo del uso de las propiedades cols
y rows
para especificar las dimensiones de un cuadro de texto:
< textarea name = "textarea" rows = "10" cols = "50" > escriba el texto aquí </ textarea >
disabled
Esta propiedad booleana indica que el usuario no puede interactuar con este elemento, y si no se especifica ningún valor para esta propiedad, heredará su valor del elemento que lo contiene como el elemento <fieldset>
, y si no hay ningún elemento que contenga este elemento que tenga la propiedad disabled
, este elemento se activará.
Ejemplo de uso de la función disabled
:
< textarea name = "textarea" disabled > No puedes escribir aquí </ textarea >
form
Esta propiedad determina a qué forma pertenece el elemento <textarea>
y el valor de esta propiedad debe ser un identificador de id
elemento <form>
en el propio documento.
Esta propiedad le permite vincular elementos <textarea>
a elementos <form>
en cualquier parte del documento, pero un elemento <textarea>
dentro de un <form>
elemento no se puede vincular a <form>
otro elemento .
Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes. Ejemplo de uso de la propiedad form
para asociar un cuadro de texto con un formulario que no tiene padre:
< form action = "action_page.php" id = "from1" > name: < input type = "text" name = "username" > < input type = "submit" > </ form > < textarea name = "textarea" form = "from1" > escribe texto aquí </ textarea >
maxlength
El número máximo de caracteres que el usuario puede ingresar, y si no se especifica ningún valor para esta propiedad, el usuario podrá ingresar un número ilimitado de caracteres.
Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes. Ejemplo de uso de la propiedad maxlength
para limitar el número máximo de caracteres que puede ingresar un usuario:
< textarea name = "textarea" maxlength = "50" > escribe el texto aquí </ textarea >
minlength
El número mínimo de caracteres que debe ingresar el usuario. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.
Ejemplo de uso de la propiedad minlength
para especificar el número mínimo de caracteres que el usuario debe ingresar, y el navegador no aceptará el envío del formulario si el número de caracteres es menor que este valor. Observe cómo usamos la propiedad form
para referirnos a un modelo que no es padre del elemento <textarea>
:
< form action = "action_page.php" id = "from1" > name: < input type = "text" name = "username" > < input type = "submit" > </ form > < textarea name = "textarea" form = " from1 " minlength = "10" > escriba el texto aquí </ textarea >
name
Esta propiedad se utiliza para especificar el nombre de este elemento (con el que se asociará cuando se envíe el formulario).
placeholder
Sugerencia para el usuario Para saber qué escribir en este elemento, tenga en cuenta que las líneas nuevas en el texto de la sugerencia se mostrarán en el elemento tal como están. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.
Ejemplo del elemento <textarea>
con la propiedad placeholder
:
< textarea name = "textarea" placeholder = "content hint " rows = "10" cols = "50" > </ textarea >
readonly
Esta propiedad booleana indica que el usuario no puede modificar el valor de este elemento, pero a diferencia de la propiedad, la propiedad disabled
no impedirá que el readonly
usuario seleccione texto o haga clic en el elemento, y el valor del elemento se enviará junto con los datos del formulario al servidor.
Ejemplo de uso de la función readonly
:
< textarea name = "textarea" readonly > Solo se puede seleccionar texto </ textarea >
required
Una propiedad booleana que indica que este elemento es obligatorio y se debe especificar al menos una de sus opciones. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.
rows
El número de líneas que se muestran en el elemento.
spellcheck
Establecer este valor en true
indica que el navegador debe comprobar si hay errores ortográficos y gramaticales. El valor default
indica que el elemento heredará el valor spellcheck
de propiedad del elemento padre o lo tomará del navegador.
El valor false
significa que no debe verificar errores ortográficos y gramaticales en este elemento. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.
wrap
Esta propiedad indica cómo se envuelve el texto en este elemento. Los valores permitidos son:
hard
: El navegador colocará nuevas líneas (CR + LF) para cada línea más larga que el ancho de este elemento, luego elcols
.soft
: El navegador se asegurará de que todas las líneas nuevas incluyan los caracteres especiales CR + LF, pero el navegador no agregará ninguna línea nueva.
Si no se especifica ningún valor para esta propiedad, su valor predeterminado es soft
. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes. Ejemplo de asignación de valor hard
a la propiedad wrap
:
< textarea name = "textarea" cols = "10" wrap = "hard" > escribe el texto aquí </ textarea >
Notas
Cambiar el tamaño del elemento <textarea>
La escala de elementos <textarea>
se puede controlar usando la propiedad resize
, si el cambio de tamaño está habilitado de manera predeterminada, puede deshabilitar usando la siguiente regla CSS :
textarea { resize: none; }
Interactuar con CSS
En cuanto a CSS, el elemento <textarea>
es un elemento reemplazado y la especificación HTML no define dónde está la línea de base del elemento <textarea>
, por lo que cada navegador usará una ubicación diferente.
Por lo tanto, no se recomienda utilizar el valor de una baseline
propiedad vertical-align
en CSS, porque su comportamiento es impredecible. Tenga en cuenta que el elemento <textarea>
tiene dimensiones netas, como mapas de bits ( <img>
).
Formato predeterminado
Los navegadores difieren en cómo muestran el elemento <textarea>
, pero tienen en común al establecer la propiedad display
en inline-block
, cambiar el puntero cursor
a text
y cambiar la familia de texto font-family
a monospace
. El resto de características (como marco border
, fondo background
, notas al pie padding
, etc.) difieren entre los navegadores.
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML