Elemento textarea en HTML

por
Elemento textarea en html
Elemento textarea en html

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 contenidoUn elemento organizativo, un elemento normal, un elemento interactivo y un elemento relacionado con la forma.
Contenido permitidoTexto.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normal.
Interfaz DOMOHTMLTextAreaElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

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 iden 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 el cols.
  • 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 harda 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 texty 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.