Cargando...

Textarea en HTML

Antes, form="id" y form* resolvían propiedad y enrutado de envío. Textarea es otro trabajo: control de texto multilínea para comentarios y notas. Un input de una línea no sirve bien para párrafos. Usa textarea cuando el usuario necesita más de una línea.

Por qué existe textarea

Contacto, tickets, bios y reseñas necesitan altura con scroll. Textarea envía ese texto como un solo campo con name. Siguen haciendo falta label, name e indicios de tamaño — pero el contenido va entre las etiquetas, no como value de input.

Respuesta directa

1) Escribe textarea con id, name y rows. 2) Conecta un label con for. 3) Texto por defecto entre etiquetas — no value. 4) Opcional: placeholder, maxlength, readonly, disabled, required, wrap. 5) Entrada multilínea — no la asociación form= anterior.

📊 Textarea attributes beginners use

Attribute Role Beginner tip
name Submit key Required if the text should post with the form
id Label hook Match label for= for accessible naming
rows Visible height hint Lines of height before scrolling
cols Visible width hint Prefer CSS width for responsive layouts
placeholder Soft hint Disappears when the user types
maxlength Character cap Browser-enforced upper bound
readonly / disabled Lock vs mute readonly still submits; disabled usually does not
wrap Soft/hard wrap Affects how line breaks are submitted (soft vs hard)

Formulario de feedback: caja de mensaje

Un feedback corto deja el email como input de una línea y el mensaje como textarea. El texto inicial va entre las etiquetas.

Labeled feedback textarea

html 
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>

<button type="submit">Send feedback</button>
</form>

Leer el demo de feedback

  • Multilínea es textarea, no input
  • id coincide con label for
  • name clavea el párrafo enviado
  • rows/cols sugieren tamaño
  • Texto por defecto entre etiquetas
  • Mantén labels claros
  • form= no hace falta — los campos están dentro del form

Tamaño, límites y wrap

Segundo demo: bio con maxlength, wrap=soft y CSS en lugar de cols. readonly en un resumen solo lectura.

Bio size limits and readonly note

html 
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>

<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>

Leer el demo de tamaño

  • maxlength limita la longitud
  • wrap=soft para saltos visuales sin hard
  • CSS width y resize afinan
  • readonly se ve pero no se edita
  • name sigue siendo necesario para enviar
  • Siguiente: select para elegir de una lista

Elegir textarea frente a input

  • Una línea corta: input
  • Párrafos/mensajes: textarea
  • Tamaño con rows y CSS; cols es legado
  • Contenido por defecto entre etiquetas — no value
  • Siempre label y name
  • Anida en form si puedes
  • No confundir con formaction/propiedad

Práctica — construir y redimensionar

  1. Copia el feedback; cambia el texto entre etiquetas
  2. Baja rows y observa la altura
  3. Añade maxlength
  4. Sustituye cols por width CSS
  5. Prueba value un momento y quítalo
  6. Frase: textarea entre etiquetas; input con value
  7. Listas van en select a continuación

Errores fáciles

  • Texto por defecto en value en vez de entre etiquetas
  • Olvidar name
  • Sin label
  • input de una línea cuando hacen falta varias
  • Confundir con form=/formaction
  • Solo cols para ancho responsive
  • disabled en lugar de readonly

Resumen

  • textarea = texto multilínea
  • label y suele name
  • Texto por defecto entre etiquetas
  • rows/CSS; opcional maxlength, placeholder, readonly
  • No son los atributos de asociación del form anterior
  • Siguiente: select

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
5
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 54 de 68
Html Tutorial