Tag HTML textarea

Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas
nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales
HTML.

Tabla de contenidos

• Descripción
• Atributos
• Eventos
• Ejemplos

Descripción
El tag HTML textarea crea un control para entrada de texto. Este control provee un campo
rectangular que acepta la entrada de texto en múltiples líneas (usa tag HTML input para entradas
de línea simple). Este tag es muy usado en formularios (tag HTML form).

Atributos
id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en
el documento y puede ser usado para referirse a ese elemento.

Ejemplo:

Comienzo del código <p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para
cambiar dinámicamente las propiedades del mismo usa este identificador.</p>Fin del código

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por
espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la
cual el elemento está asociado. Una clase provee atributos visuales para los elementos.

Ejemplo:

Comienzo del código <p class="referencias">Este artículo está basado en el libro "Viento en los
árboles" por Jhon L. Brooks</p>

<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles"
por Jhon L. Brooks... y es más importante que el anterior.</p>Fin del código
style (style)

Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de
estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar
este orden "nombre : valor" y ser separados por un punto y coma.

Si estás escribiendo código XHTML te recomendamos no utilizar este atributo y probar con las
clases de hojas de estilo (con el atributo "class").

Ejemplo:

Comienzo del código <p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo
definido</p>
<p>Y este es otro texto sin estilo.</p>Fin del código

title (text)

Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es
usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el
elemento.

Ejemplo:

Código Visualización
<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código
Código HTML
HTML</a>

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".

Al escribir código XHTML la sintaxis "xml:lang" representa una alternativa preferida en

XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").

Ejemplo:

Comienzo del código <p lang="en">This is a paragraph in english.</p>

<p lang="es">Este es un párrafo en español.</p>Fin del código

dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la
direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a
mayúsculas/minúsculas:

• RTL: Derecha a izquierda.

• LTR: Izquierda a derecha.

Ejemplo:

Comienzo del código <q lang="he" dir="rtl">...Una cita en Hebreo...</q>Fin del código

name (cdata)

Asigna un nombre de control al elemento.

rows (number)

Especifica el número de líneas que serán visibles sl mismo tiempo en un campo de texto. Nota
que el control puede contener más líneas de las que son visibles.

cols (number)

Especifica el número de columnas en ancho promedio de carácter (o sea, el número de caracteres

que serán visibles al mismo tiempo por línea). Nota que para estilos de fuentes en las que los
caracteres no tienen el mismo ancho, esto puede no ser exacto.

disabled

Cuando se establece este atributo, el control es deshabilitado, lo que significa que no puede
obtener el enfoque, que su valor no puede ser cambiado y que no será enviado junto con el
formulario. Dependiendo del navegador los elementos deshabilitados pueden ser mostrados de
una manera diferente.

Ejemplo:

Código Visualización
<form action="ejemplo.php">
<div>
<input name="primerboton" type="button" value="Habilitado" /><br /><br />
<input name="segundoboton" type="button" value="Deshabilitado"
disabled="disabled" /><br /><br />
<input name="textosegundo" type="text" value="Habilitado" /><br /><br />
<input name="textoprimero" type="text" value="Deshabilitado"
disabled="disabled" />
</div>
</form>

readonly

Cuando este atributo booleano está presente, el usuario no podrá realizar cambios en el control.
Los controles de solo-lectura no reciben el enfoque y no son enviados junto con el formulario.

Recuerda que los atributos booleanos deben ser definidos en la forma

nombre_atributo="nombre_atributo" para ser compatibles con el código XHTML.

Ejemplo:

Código Visualización
<form action="ejemplo.php">
<div>
<input name="nombre" type="text" value="Jhon" readonly="readonly" />
</div>
</form>

tabindex (number)

Especifica la posición del elemento en el orden de tabulación. El orden de tabulación define una
secuencia con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar
dicha secuencia mediante el teclado (usualmente con la tecla "tab").

Eventos
• onfocus
• onblur
• onselect
• onchange
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

Lista completa e información acerca de eventos en HTML

Ejemplos
Información de contacto simple.
Código Visualización
<form action="eg.php">
<div>
<fieldset>
<legend>Información personal</legend>
<label for="idnombre">Nombre completo:</label> <input type="text"
name="nombrecompleto" id="idnombre" value="-" /><br />
<label for="idemail">Email address:</label> <input type="text" name="email"
id="idemail" value="-" />
</fieldset>
<fieldset>
<legend>Comentarios</legend>
<textarea name="comentarios" rows="10" cols="30">...Tus comentarios
aquí...</textarea>
</fieldset>
<input type="button" name="enviar" value="Enviar comentarios" />
</div>
</form>