Elemento textarea

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento textarea representa un campo para la entrada de texto multilínea. El control asociado a este campo es una caja de texto que permite a los usuarios editar múltiples líneas de texto regular. Los controles textarea son útiles para recolectar o editar líneas largas de texto como mensajes, contenido de archivos, listas, reseñas, artículos, etc.

El contenido de este elemento representa el valor inicial del control. Este contenido es el que será mostrado cuando el documento sea cargado o cuando un botón de reinicio sea presionado en el formulario.

Ejemplos

En nuestro primer ejemplo, crearemos un formulario con un control textarea con todos sus valores por defecto. Adicionalmente, declararemos el atributo placeholder con una pista acerca del contenido que se espera sea ingresado en el control, el cual será mostrado dentro de la caja de texto cuando ésta esté vacía.

<form action="../../form-result.php" target="_blank">
  <p>Mensaje para el autor:</p>
  <p><textarea name="mensaje" placeholder="Comparte tu opinión con el autor!"></textarea></p>
  <p><input type="submit" value="Enviar mensaje"></p>
</form>

Mensaje para el autor:

En nuestro segundo ejemplo estableceremos un valor inicial como contenido del elemento. Este valor será usado para rellenar el control cuando el documento sea cargado y cuando el formulario sea restaurado.

En contraste con entradas de una sola línea, un elemento textarea lleva a su valor inicial como contenido, en lugar de usar el atributo value.

<form action="../../form-result.php" target="_blank">
  <p>Edita tu comentario:</p>
  <p><textarea name="comment">Hola! Creo que estás completamente equivocado!</textarea></p>
  <p>
    <input type="submit" value="Editar">
    <input type="reset" value="Restaurar">
  </p>
</form>

Edita tu comentario:

A continuación, usaremos los atributos cols y rows para establecer el número de caracteres que el control podrá mostrar al mismo tiempo, horizontal y verticalmente. Los navegadores calcularán el ancho y la altura del elemento, multiplicando estos números por el ancho y la altura de de un carácter de la fuente utilizada.

El ancho de este elemento es calculado a partir del ancho de los caracteres de la fuente usada. Como los caracteres no siempre tienen el mismo ancho, los navegadores pueden usar diferentes métodos para aproximar este valor (como promedio o máximo).

<form action="../../form-result.php" target="_blank">
  <p>Agregar una nueva descripción:</p>
  <p><textarea name="descripcion" cols="40" rows="5"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Agregar una nueva descripción:

En el siguiente ejemplo, probaremos dos atributos que establecen reglas acerca de la longitud del texto que puede ser ingresado en el control. Éstos son minlength y maxlength y establecen la cantidades mínima y máxima de caracteres que el control puede recibir.

Mientras que los requerimientos de minlength son únicamente comprobados previo al envío, los navegadores normalmente impiden que los usuarios tipeen un número de caracteres mayor que el especificado por maxlength.

Mientras que el atributo maxlength es bien siportado por los navegadores, minlength carece de soporte casi absolutamente (hasta el 17/03/2015).

<form action="../../form-result.php" target="_blank">
  <p>Edita tu biografía:</p>
  <p><textarea name="biografia" minlength="20" maxlength="50"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Edita tu biografía:

Por último, probaremos el atributo required, el cual es nuevo en HTML5. Cuando este atributo está presente, los navegadores que lo soportan impedirán el envío del formulario hasta que el control haya sido rellenado.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<form action="../../form-result.php" target="_blank">
  <p>Comentarios:</p>
  <p><textarea name="comentarios" required></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Comentarios:

Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<textarea name="ideas" autofocus></textarea>

cols

El ancho del control expresado en número de caracteres.

El ancho de este elemento es calculado a partir del ancho de los caracteres de la fuente usada. Como los caracteres no siempre tienen el mismo ancho, los navegadores pueden usar diferentes métodos para aproximar este valor (como promedio o máximo).

El valor provisto en este atributo debería ser un entero mayor a cero. Si el valor está ausente o mal formado, el atributo tomará el valor predeterminado de 20.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Agradecimientos:</p>
  <p><textarea name="agradecimientos" cols="30" rows="6"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Agradecimientos:

dirname

Un nombre para un nuevo campo especialmente creado con el fin de transmitir la direccionalidad del texto ingresado. Este atributo, nuevo en HTML5, permite a los autores manipular correctamente los valores enviados con cualquier direccionalidad de texto, al agregar un campo que es enviado con el formulario. El nombre de ese campo será el valor de este atributo.

Siendo relativamente nuevo, el soporte provisto por los navegadores para el atributo dirname es incompleto. Los autores deberían revisar el soporte cuando la información es recibida en el servidor.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Contribuye con una idea:</p>
  <p><textarea name="idea" dirname="idea-dir"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Contribuye con una idea:

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>¿Qué estás pensando?:</p>
  <p><textarea name="pensamientos" disabled></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

¿Qué estás pensando?:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<p>Introducción:</p>
<p><textarea name="introduccion" form="formulario1"></textarea></p>
<form id="formulario1" action="../../form-result.php" target="_blank">
  <p><input type="submit" value="Enviar"></p>
</form>

Introducción:

maxlength

Un entero que indica el número máximo de caracteres que el valor de este control puede tener.

Los autores no deberían confiar en el atributo maxlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Recursos:</p>
  <p><textarea name="recursos" maxlength="20"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Recursos:

minlength

Un entero que indica el número mínimo de caracteres que el valor de este control puede tener.

Los autores no deberían confiar en el atributo minlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

El soporte provisto por los navegadores para el atributo minlength es extremadamente bajo (hasta el 18/12/2014). Los autores no deberían confiar en este atributo hasta que el soporte crezca.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Análisis:</p>
  <p><textarea name="analisis" maxlength="20"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Análisis:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del elemento. Ambos valores juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Reseña:</p>
  <p><textarea name="resena"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Reseña:

placeholder

Una línea de texto que se supone provee una pista acerca de cómo debería ser rellenado el campo, como ejemplos o descripciones cortas. Los navegadores pueden mostrar los contenidos de este atributo en el control mientras este no tiene un valor. Tan pronto como el usuario comience a escribir su propio texto, el texto placeholder debería desaparecer del control.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Resultados:</p>
  <p><textarea name="resultados" placeholder="Escribe aquí los resultados de tu estudio..."></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Resultados:

readonly

A boolean value instructing the browser to prevent the user from changing the control's value. If this attribute has the value "readonly" or the empty string (""), or if it's just present, the user won't be allowed to change the value in this control.

Although this attribute prevents the control's value from being edited, not all interaction is blocked: users will still be able to select and copy the text in the control.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>archivo "config.cfg":</p>
  <p>
    <textarea name="archivo" readonly>wait=24
login=db
autostart=yes
    </textarea>
  </p>
  <p><input type="submit" value="Enviar"></p>
</form>

archivo "config.cfg":

required

Un valor booleano que indica si este control puede ser dejado en blanco o no. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el usuario tendrá que rellenar el control a fin de poder enviar el formulario.

Si un control con el atributo required presente es dejado en blanco, los navegadores que soporten este mecanismo arrojarán un error previo al envío y cancelarán el proceso inmediatamente.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Deja tu opinión:</p>
  <p><textarea name="opinion" required></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Deja tu opinión:

rows

El número de líneas que el control debería mostrar al mismo tiempo. Si el texto dentro de este control presenta más líneas que las especificadas por este atributo, los navegadores comúnmente proveerán una barra de desplazamiento vertical para acceder al contenido oculto.

El valor provisto en este atributo debería ser un entero mayor a cero. Si el valor está ausente o mal formado, el atributo tomará el valor predeterminado de 2.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Special thanks:</p>
  <p><textarea name="thanks" cols="30" rows="6"></textarea></p>
  <p><input type="submit" value="Submit"></p>
</form>

Special thanks:

wrap

Un valor que indica a los navegadores si el texto en este control debería ser ajustado a las márgenes para el envío. Existen dos valores posibles, insensibles a mayúsculas/minúsculas:

  • soft: el texto no será ajustado al enviarse, aunque sí puede ser ajustado en la representación. Este es el valor por defecto.
  • hard: el texto será ajustado para el envío, mediante el agregado de quiebres de línea donde sea necesario, para evitar que el texto exceda el ancho del cuadro.

Si el atributo wrap se define con el valor "hard", la presencia del atributo cols es obligatoria.

Siendo relativamente nuevo, el soporte provisto por los navegadores para este atributo es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Lista de códigos:</p>
  <p><textarea name="listacodigos" cols="5" rows="6" wrap="hard"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Lista de códigos:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.