Área de texto HTML en formularios: guía práctica con ejemplos

Use a <textarea> when a single-line input is too small for the answer you need. Messages, feedback, support descriptions, job application notes, and project briefs all belong in a textarea.

La mejor pregunta no es “¿cómo agrego un área de texto?” Se trata de "¿cómo recopilo texto extenso y útil sin perjudicar la usabilidad, la accesibilidad o la capacidad de entrega?" Un área de texto de producción necesita una etiqueta clara, un tamaño útil, límites sensibles y manejo de backend para contenido extenso o abusivo.

Formulario de área de texto básico

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="message">Message</label>
5
  <textarea id="message" name="message" rows="5" required></textarea>
6

7
  <input type="checkbox" name="botcheck" style="display:none" />
8
  <button type="submit">Send message</button>
9
</form>

Los atributos importantes son:

Without name, the browser will not include the textarea value in the submitted form data.

Área de texto vs entrada

Utilice una entrada de texto para valores cortos. Utilice un área de texto para respuestas más largas y de formato libre.

No utilice un área de texto para direcciones de correo electrónico, números de teléfono, fechas o precios. Los tipos de entrada especializados brindan a los usuarios mejores teclados móviles y validación del navegador.

Agregar límites útiles

Long text is valuable, but unbounded text is a spam and storage risk. Set maxlength for the browser and enforce limits on the backend.

1
<label for="project">Project details</label>
2
<textarea
3
  id="project"
4
  name="project_details"
5
  rows="7"
6
  minlength="20"
7
  maxlength="3000"
8
  placeholder="Tell us what you are building, your timeline, and what should happen after submission."
9
  required
10
></textarea>

Use minlength only when a short answer would be unusable. For contact forms, required plus maxlength is usually enough.

Utilice el texto del marcador de posición con cuidado

El texto del marcador de posición puede mostrar ejemplos, pero no debe reemplazar la etiqueta. El texto del marcador de posición desaparece tan pronto como el visitante comienza a escribir y la tecnología de asistencia puede pasarlo por alto.

Good:

1
<label for="support_message">What happened?</label>
2
<textarea
3
  id="support_message"
4
  name="support_message"
5
  rows="6"
6
  placeholder="Include the page URL, error message, and what you expected to happen."
7
></textarea>

Poor:

1
<textarea placeholder="Message"></textarea>

The poor version has no label and no name, so it is both less accessible and less useful to the backend.

Controlar el cambio de tamaño con CSS

Los navegadores a menudo permiten a los visitantes cambiar el tamaño de las áreas de texto. Esto es útil, pero el cambio de tamaño horizontal puede romper los diseños estrechos.

1
textarea {
2
  width: 100%;
3
  min-height: 140px;
4
  resize: vertical;
5
}

resize: vertical lets visitors make the textarea taller without breaking the page width.

Enviar contenido del área de texto a un servidor

Este ejemplo completo funciona en un sitio estático y envía un envío estructurado a FormsFort.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New support request" />
4

5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" autocomplete="email" required />
7

8
  <label for="category">Category</label>
9
  <select id="category" name="category" required>
10
    <option value="">Choose a category</option>
11
    <option value="billing">Billing</option>
12
    <option value="technical">Technical issue</option>
13
    <option value="account">Account</option>
14
  </select>
15

16
  <label for="message">Details</label>
17
  <textarea id="message" name="message" rows="7" maxlength="3000" required></textarea>
18

19
  <input type="checkbox" name="botcheck" style="display:none" />
20
  <button type="submit">Send request</button>
21
</form>

When submitted, the backend receives email, category, and message as normal fields. That makes the submission easy to email, forward to a webhook, append to a sheet, or triage in a dashboard.

Notas de seguridad y spam

Los campos de área de texto atraen spam porque aceptan texto arbitrario. Utilice un campo honeypot, límites de velocidad, restricciones de dominio y CAPTCHA opcional para formularios expuestos.

Nunca muestre el contenido del área de texto enviado como HTML sin formato en un panel de administración o plantilla de correo electrónico. Escape del contenido del usuario antes de mostrarlo. Incluso cuando su formulario es estático, el texto enviado no es una entrada de confianza.

Guías relacionadas

Ver Ejemplos de formularios HTML para copiar y pegar plantillas, Campos de entrada HTML para campos cortos, y Honeypot vs CAPTCHA para protección antispam.