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

autocomplete

El atributo autocomplete provee información acerca de si y cómo los navegadores deberían sugerir opciones automáticamente para este control, como un intento de adivinar lo que el usuario está escribiendo. Existen tres valores posibles para este atributo:

  • El valor on, indicando al navegador que debería sugerir opciones automáticamente pero sin proveer ninguna otra información acerca del tipo de datos que se espera en el control.
  • El valor off, indicando al navegador que no debería sugerir opciones automáticamente, ya sea debido a que la información a ser ingresada en el control es particularmente sensible (como el usuario para acceder a un área muy segura) o debido a que su valor nunca será reutilizado (como una clave de uso único en un proceso de registración).
  • Una lista de identificadores de detalles de autocompletado, indicando al navegador que debería sugerir opciones automáticamente y especificando el tipo de valor que se espera recibir.

Una lista de identificadores de detalles de autocompletado puede estar compuesta por los siguientes identificadores en el orden especificado.

  1. Opcionalmente, un identificador que comience con la cadena "section-" (insensible a mayúsculas/minúsculas), indicando el grupo al cual el campo pertenece.
  2. Opcionalmente, uno de los dos identificadores siguientes (insensibles a mayúsculas/minúsculas):
    • shipping: el campo es parte de la dirección de envío.
    • billing: el campo es parte de la dirección de facturación.
  3. Una de las dos opciones siguientes:
    • El siguiente identificador (insensible a mayúsculas/minúsculas):
      • name: un nombre completo
      • honorific-prefix: un prefijo o título, como Sir, Sr., Dr., etc.
      • given-name: un primer nombre.
      • additional-name: nombres adicionales o secundarios.
      • family-name: un apellido o nombre de familia.
      • honorific-suffix: un sufijo, como Jr., II ó ABIST.
      • nickname: un sobrenombre o nombre corto utilizado en lugar del nombre completo.
      • organization-title: un título profesional, como Contador, Arquitecto, Ingeniero, etc.
      • username: un nombre de usuario, típicamente usado para operaciones de acceso, como "adan457" ó "materia_oscura_01".
      • new-password: una nueva contraseña, típicamente requerida al crear una cuenta o al cambiar una contraseña.
      • current-password: la actual contraseña, típicamente requerida al ingresar o al cambiar una contraseña.
      • organization: la empresa asociada con la persona o información en otros campos asociados a este campo.
      • street-address: una dirección, posiblemente compuesta por múltiples líneas.
      • address-line1: una componente de una dirección.
      • address-line2: una componente de una dirección.
      • address-line3: una componente de una dirección.
      • address-level4: el nivel administrativo más específico, en direcciones con cuatro niveles administrativos.
      • address-level3: el tercer nivel administrativo, en direcciones con tres o más niveles administrativos.
      • address-level2: el segundo nivel administrativo, en direcciones con dos o más niveles administrativos. En países con dos niveles administrativos, esto sería típicamente la ciudad, pueblo o aldea.
      • address-level1: el nivel administrativo más amplio. Esto podría ser la provincia o estado dentro del cual se encuentra la localidad.
      • country: un código de país representando a un país, como "US", "UK" ó "ES".
      • country-name: el nombre de un país, como Albania, Liberia ó Uruguay.
      • postal-code: un código postal, código ZIP, código CEDEX (si es CEDEX, se debe agregar "CEDEX", y el distrito, si es relevante, al campo address-level2), etc., como 02139, 1428 ó 10025.
      • cc-name: un nombre completo como figure en el instrumento de pago.
      • cc-given-name: un primer nombre como figure en el instrumento de pago.
      • cc-additional-name: nombres adicionales o secundarios como figure en el instrumento de pago.
      • cc-family-name: un apellido o nombre de familia como figure en el instrumento de pago.
      • cc-number: un código identificando al instrumento de pago, como el número de una tarjeta de crédito.
      • cc-exp: la fecha de expiración del instrumento de pago.
      • cc-month: el mes de expiración del instrumento de pago.
      • cc-year: el año de expiración del instrumento de pago.
      • cc-csc: el código de seguridad del el instrumento de pago (CSC, CVC, CVV, SPC, CCID, etc.).
      • cc-type: el tipo de intrumento de pago utilizado, como la tarjeta de crédito.
      • transaction-currency: un código de divisa representando a la divisa a ser usada en la transacción, como "USD", "ARS" ó "GBP".
      • transaction-amount: el monto de la transacción, como al ingresar un valor en una subasta.
      • language: una etiqueta de lenguaje identifiando al idioma preferido, como "en", "en-GB" ó "es-419".
      • bday: una fecha de nacimientoa.
      • bday-day: el día de una fecha de nacimiento.
      • bday-month: el mes de una fecha de nacimiento.
      • bday-year: el año de una fecha de nacimiento.
      • sex: un identificador de género, como masculino o femenino.
      • url: una página correspondiente a la empresa, persona, dirección o información de contacto en otros campos asociados a este campo, como "http://www.yo-soy-juan.com".
      • photo: una fotografía, ícono, u otra imagen a la empresa, persona, dirección o información de contacto en otros campos asociados a este campo, como "http://www.yo-soy-juan.com/imagenes/yo.jpg".
    • Lo siguiente, en el orden dado:
      1. Opcionalmente, un identificador que coincide (insensible a mayúsculas/minúsculas) con alguno de los valores siguientes:
        • home: indicando que el campo es para contactar a alguien en su residencia.
        • work: indicando que el campo es para contactar a alguien en su lugar de trabajo.
        • mobile: indicando que el campo es para contactar a alguien en su dispositivo móvil.
        • fax: indicando que el campo describe datos de contacto de una máquina de fax.
        • pager: indicando que el campo describe datos de contacto de un pager ó beeper.
      2. Un identificador que coincide (insensible a mayúsculas/minúsculas) con alguno de los siguientes identificadores de detalles de autocompletado:
        • tel: un número de teléfono completo, incluyendo el código de país, como +1 617 253 5702.
        • tel-country-code: el código de país de un número telefónico, como +1 ó +54.
        • tel-national: un número de teléfono sin el código de país, con un prefijo nacional, si corresponde, como 617 253 5702.
        • tel-area-code: el código de área de un número telefónico, como 617.
        • tel-local: un número de teléfono sin el código de país y sin el código de área nacional, como 253 5702.
        • tel-local-prefix: la primera parte de un número de teléfono sin código de país y sin código de área, cuando ese número se encuentra dividido en dos componentes.
        • tel-local-suffix: la segunda parte de un número de teléfono sin código de país y sin código de área, cuando ese número se encuentra dividido en dos componentes.
        • tel-extension: el código de extensión interno de un número telefónico.
        • email: una dirección de correo electrónico, como juanperez@desconocido.com.
        • impp: una URL representando a un punto de un protocolo de mensajería instantánea, como "aim:goim?screenname=juanperez" ó "xmpp:juanperez@desconocido.com".

Usualmente, los navegadores llevan a cabo las operaciones de autocompletado recuperando datos de una base de datos con entradas previas u otras fuentes con información del usuaio.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Dirección de envío:</p>
  <p><textarea name="direccionenvio" autocomplete="shipping street-address"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Dirección de envío:

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:

inputmode

Un valor que indica qué tipo de mecanismo de entrada sería más beneficioso para los usuarios que ingresen datos en el control. Existen doce valores posibles, insensibles a mayúsculas/minúsculas:

  • verbatim: entrada de escritura latina alfanumérica de contenido no presentado en prosa, como nombres de usuario, contraseñas, códigos de procuto, etc.
  • latin: entrada de escritura latina en el lenguaje preferido del usuario, con algunos mecanismos de tipeo asistido habilitados, como predicción de texto. Pensado para entradas de usuario a computadora como en los formularios de búsqueda.
  • latin-name: entrada de escritura latina en el lenguaje preferido del usuario, con mecanismos de tipeo asistido de nombres habilitados, como predicción de texto en base a una lista de contactos y capitalizaciones automáticas.
  • latin-prose: entrada de escritura latina en el lenguaje preferido del usuario, con mecanismos de tipeo de humano a humano habilitados, como predicción de texto y capitalización automática al comienzo de cada oración.
  • full-width-latin: entrada de escritura latina en el lenguaje secundario del usuario, usando caracteres de ancho completo y mecanismos de tipeo de humano a humano habilitados, como predicción de texto y capitalización automática al comienzo de cada oración.
  • kana: entrada en kana o romaji, típicamente entrada en hiragana, usando caracteres de ancho completo, con soporte para convertir a kanji. Pensado para entradas de texto en japonés.
  • kana-name: igual que "kana", con mecanismos de tipeo pensados para el ingreso de nombres de personas habilitados, como predicción de texto en base a una lista de contactos.
  • katakana: entrada en katakana, usando caracteres de ancho completo, con soporte para convertir a kanji. Pensado para entradas de texto en japonés.
  • numeric: entrada numérica, incluyendo teclas para los dígitos del 0 al 9, el carácter separador de miles preferido del usuario, y el carácter para indicar números negativos. El control de entrada numérica es preferido.
  • tel: entrada de números telefónicos, incluyendo teclas para los dígitos del 0 al 9, el carácter "#", y el carácter "*". En algunos lugares, esto también puede incluir etiquetas de alfabeto mnemotécnico. El control de entrada de números telefónicos es preferido.
  • email: entrada de texto del lugar del usuario, con teclas para asistencia en la entrada de direcciones de correo electrónico, tales como el carácter "@" y el carácter ".". El control de entrada de e-mail es preferido.
  • url: entrada de texto del lugar del usuario, con teclas para asistencia en la entrada de direcciones web, tales como los caracteres "/" y "." y para entrada rápida de cadenas comúnmente encontradas en nombres de dominio tales como "www." o ".co.uk". El control de entrada de URLs es preferido.

Los navegadores pueden usar la información en este atributo para proveer un mecanismo que asista al usuario en el rellenado de la información. Por ejemplo, los teclados virtuales en pantalla pueden proveer teclas especiales para el modo de entrada especificado.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Nombra tus amigos:</p>
  <p><textarea name="amigos" inputmode="latin-name"></textarea></p>
  <p><input type="submit" value="Enviar"></p>
</form>

Nombra tus amigos:

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.