El elemento <textarea> crea un control que permite la entrada de múltiples líneas de texto plano. Este tipo de campo es muy útil para recolectar o editar varias líneas de texto en webs interactivas, como podría ser la sección de comentarios de un blog, la publicación de artículos o la participación en foros y redes sociales.
Este elemento tiene dos etiquetas: <textarea> (de apertura) y </textarea> (de cierre), y permite contenido de tipo textual. Se trata de un elemento de línea, es decir, que ocupa el mínimo espacio horizontal, permitiendo así que otros elementos de la misma índole se coloquen a su lado.
Ejemplo básico de código HTML de una caja de texto:
<form>
<textarea></textarea>
</form>
El resultado es el siguiente:
Valor por defecto
Si queremos establecer un texto inicial que aparezca por defecto debemos introducirlo como texto dentro de las etiquetas de apertura y cierre del elemento.
Ejemplo de código HTML de caja de texto con texto predefinido:
<form>
<textarea>Texto predefinido</textarea>
</form>
Dará como resultado:
Atributos de una caja de texto
Las cajas de texto tienen muchos atributos que permiten definir tanto sus dimensiones y apariencia como su funcionalidad. A pesar de que puede funcionar perfectamente sin ellos, conocerlos ofrece la posibilidad de adaptarlos a ciertas necesidades. Este elemento tiene varios atributos específicos que conviene conocer.
Los atributos ‘cols’ y ‘rows’
Los atributos más utilizados en la creación de la caja de texto son los que permiten definir su anchura y altura: cols y rows, respectivamente. Sus valores deben ser números enteros. De este modo se indica los caracteres que caben en horizontal, como si fueran columnas, y las líneas de texto que caben en vertical.
En el caso de que no se especifiquen estos dos atributos, se tomará los valores por defecto; dichos valores equivalen a 20 en el caso de las columnas (atributo cols) y a 2 en el caso de las filas (atributo rows).
Ejemplo de código HTML de una caja de texto especificando ancho y alto:
<form>
<textarea cols='50' rows='4'></textarea>
</form>
El código anterior dará el siguiente resultado:
Tal y como se puede observar en el ejemplo anterior, aparece una caja de texto con un ancho de 50 columnas o caracteres y un alto de 4 filas de texto. Estos valores permiten fijar unas dimensiones iniciales, pero cabe mencionar que en el borde inferior derecho aparece un dibujo indicador que permite al usuario modificar sus dimensiones; funciona pulsando dicho vértice y arrastrándolo hacia cualquier dirección.
El ancho y el alto de este elemento son calculados a partir de la fuente usada. Los navegadores web pueden usar métodos diferentes para obtener un valor, por lo tanto, es difícil ajustar las medidas a nivel de píxeles. Estas dimensiones también dependerán del tipo de fuente usado, además de su tamaño.
El atributo ‘name’
El atributo name se utiliza para asignar un nombre al control. El navegador web será el encargado de enviar este nombre a la aplicación encargada de procesar los datos, junto con el contenido del elemento. De hecho, el nombre y el contenido forman el par «nombre-valor», que es utilizado para procesar la información. Este atributo está disponible en todos los controles interactivos y funciona de igual manera.
Los atributos ‘maxlength’ y ‘minlength’
Con los atributos maxlength y minlength se puede indicar el número máximo y mínimo de caracteres que el usuario puede insertar en la caja de texto. Sus valores deben ser números enteros. Si no se especifica ningún valor significa que el usuario puede insertar un número ilimitado de caracteres.
Los desarrolladores de formularios deben ser conscientes de que estos dos atributos tienen un soporte limitado en algunos navegadores web. Si bien es cierto que minlength no está soportado en ninguna de las versiones de Internet Explorer, también lo es que pronto morirán y que el navegador que los sustituye (Edge) sí lo soporta. El soporte ha mejorado mucho en los últimos años.
El atributo ‘wrap’
El atributo wrap permite indicar a los navegadores web si el texto contenido en la caja de texto debe ser ajustado a los márgenes antes de ser enviado y procesador. Este atributo tiene dos valores posibles:
soft: el texto no se ajustará en el momento de enviarse, aunque puede ajustarse en la representación. Este es el valor por defecto.hard: el texto será ajustado en el momento de enviarse. Se agregarán saltos de línea donde sea necesario; así se evita que el texto supere el ancho de la caja de texto. Es obligatorio haber especificado un valor en el atributocols.
El atributo ‘placeholder’
Con el atributo placeholder podemos especificar un texto de ayuda dentro de la caja de texto. De esta manera, el usuario lo podrá leer y cuando pulse la primera tecla dentro de la caja, el texto de ayuda especificado en el placeholder desaparecerá totalmente, momento en el que se visualizará el texto que escribe el usuario. Este atributo no debe usarse como sustituto del elemento <label>, cuya finalidad es la de etiquetar campos, ya que simplemente es para dar una pista del contenido.
Ejemplo de código HTML de caja de texto con texto de ayuda:
<form>
<textarea placeholder='Letra de la canción...'></textarea>
</form>
Resultado:
En este ejemplo anterior se ha propuesto introducir la letra de una canción. Cuando el usuario empiece a teclear, el texto de ayuda que aparece en color gris claro desaparecerá por completo.
El atributo ‘autofocus’
Aplicando el atributo autofocus en el elemento <textarea> se consigue que se ponga el foco dentro de la caja de texto cada vez que se termine de cargar el documento. Al tratarse de un atributo binario no se requiere de ningún valor: con su presencia será suficiente para activar esta opción.
Gracias a este atributo, el usuario no necesitará pulsar con el cursor o el dedo dentro de la caja para empezar a teclear. Es un atributo muy útil cuando se trata de mejorar la experiencia del usuario en un sitio web, agilizando mucho la entrada de datos, y es útil tanto para este control como para los demás tipos que existen.
El atributo ‘readonly’
En cambio, si lo que se quiere es que sea de sólo lectura en vez de estar deshabilitado del todo, se puede usar el atributo readonly. Este atributo también es binario. Con su presencia, el usuario no podrá cambiar el valor de la caja de texto, y los datos predefinidos serán enviados.
Ejemplo de código HTML de una caja de texto de sólo lectura:
<form>
<textarea readonly>Texto no modificable</textarea>
</form>
Resultado:
Tal y como se observa en el ejemplo anterior, el texto se puede seleccionar pero no se puede modificar, ya que el campo es de sólo lectura. El usuario tendrá que enviar el formulario con el contenido predefinido, ya sea con texto o vacío.
El atributo ‘required’
El atributo required obligará al usuario a rellenar la caja de texto para poder enviar el formulario. Este atributo también es binario, por lo que no se requiere ningún valor. Con su presencia ya se especifica la obligación de rellenar el campo. Si se introduce una cadena de texto vacía (required="") funcionaría igual.
El atributo ‘disabled’
Con la ayuda del atributo disabled es posible deshabilitar el control interactivo. De este modo aparecerá en color gris y no se podrá insertar el foco dentro de la caja de texto. Este atributo tiene un valor binario: su presencia lo deshabilita y su ausencia lo mantiene habilitado para los usuarios. También funcionaría en el caso de indicar un valor vacío: disabled="", pero es más largo.
Ejemplo de código HTML de una caja de texto deshabilitada:
<form>
<textarea disabled></textarea>
</form>
Resultado:
