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.
Tabla de contenidos
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.
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>
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.
<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>
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.
<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>
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.
<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>
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.
<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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.