¿Como funciona el comando en HTML5: 'Textarea'?

Instrucción HTML5 para el elemento <textarea>

El elemento <textarea> en HTML5 se utiliza para crear un área de texto multilínea en un formulario HTML. Es un componente ampliamente utilizado para permitir la entrada de texto por parte del usuario, como comentarios, descripciones, o cualquier otra forma de texto que necesite más de una línea. A continuación, se detallan todos los atributos que se pueden utilizar con el elemento <textarea>.

Atributos del elemento <textarea>

1. autofocus:

   • Descripción: Este atributo booleano hace que el área de texto obtenga el foco automáticamente cuando la página se carga.
   • Ejemplo: <textarea autofocus></textarea>

2. cols:

   • Descripción: Especifica el ancho visible del área de texto en términos de número de caracteres. Es un atributo numérico.
   • Ejemplo: <textarea cols="30"></textarea>

3. dirname:

   • Descripción: Si está presente, este atributo envía el valor de la dirección de texto (ltr o rtl) de la entrada junto con el nombre del campo en el formulario.
   • Ejemplo: <textarea dirname="textarea.dir"></textarea>

4. disabled:

   • Descripción: Atributo booleano que hace que el área de texto no sea editable ni enfocada por el usuario. No se enviará el valor del campo al servidor.
   • Ejemplo: <textarea disabled></textarea>

5. form:

   • Descripción: Atributo de ID que asocia el área de texto con un formulario específico, útil cuando el área de texto no se encuentra dentro del formulario.
   • Ejemplo: <textarea form="myForm"></textarea>

6. maxlength:

   • Descripción: Define el número máximo de caracteres que el usuario puede introducir en el área de texto.
   • Ejemplo: <textarea maxlength="100"></textarea>

7. name:

   • Descripción: Asigna un nombre al área de texto, que será utilizado para identificar el campo de texto cuando se envíe el formulario.
   • Ejemplo: <textarea name="usercomment"></textarea>

8. placeholder:

   • Descripción: Proporciona una indicación al usuario sobre qué tipo de información se espera en el área de texto.
   • Ejemplo: <textarea placeholder="Ingrese su comentario aquí..."></textarea>

9. readonly:

   • Descripción: Atributo booleano que hace que el campo sea de solo lectura, lo que significa que el usuario no puede modificar su contenido.
   • Ejemplo: <textarea readonly></textarea>

10. required:

    • Descripción: Atributo booleano que indica que el área de texto debe completarse antes de enviar el formulario.
    • Ejemplo: <textarea required></textarea>

11. rows:

    • Descripción: Especifica la altura visible del área de texto en términos de número de líneas de texto.
    • Ejemplo: <textarea rows="10"></textarea>

12. wrap:

    • Descripción: Define cómo se maneja el texto cuando excede el área de texto visible. Puede tener valores como soft, hard o off.
    • Ejemplo: <textarea wrap="soft"></textarea>

Uso del <textarea> en HTML5

El uso del elemento <textarea> es bastante sencillo y flexible. Aquí se presentan algunos ejemplos que ilustran su implementación en diferentes situaciones.

Ejemplo Básico

<form>
    <label for="comments">Comentarios:</label>
    <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
</form>

En este ejemplo, se crea una simple área de texto con 4 filas de altura y 50 columnas de ancho.

Ejemplo con placeholder y required

<form>
    <label for="description">Descripción del producto:</label>
    <textarea id="description" name="description" rows="5" cols="40" placeholder="Escriba una descripción detallada..." required></textarea>
</form>

Aquí, el atributo placeholder proporciona una indicación inicial al usuario y el atributo required asegura que el usuario complete este campo antes de poder enviar el formulario.

Ejemplo con maxlength y readonly

<form>
    <label for="bio">Biografía:</label>
    <textarea id="bio" name="bio" rows="6" cols="60" maxlength="300" readonly>This is a pre-filled biography.</textarea>
</form>

Este ejemplo muestra un área de texto que ya contiene texto inicial y es de solo lectura (readonly). El atributo maxlength limita la entrada del usuario a un máximo de 300 caracteres.

Ejemplo de Uso del Atributo form

<form id="specialForm">
    <label for="specialNotes">Notas Especiales:</label>
</form>
<textarea form="specialForm" id="specialNotes" name="specialNotes" rows="4" cols="50"></textarea>

En este caso, el área de texto está fuera del formulario con ID specialForm, pero se asocia al formulario a través del atributo form.

Estos ejemplos cubren la mayoría de los usos fundamentales del elemento <textarea> en HTML5, demostrando su versatilidad y facilidad de uso en la creación de formularios web ricos y funcionales.