Textarea Plantillas HTML

Plantillas HTML de textarea para campos estructurados

La mayoría de los problemas con un campo multilínea comienzan en el marcado: ninguna etiqueta vinculada al cuadro, ningún nombre bajo el que enviar los datos y nada que indique al visitante si se esperan dos frases o dos párrafos. Una plantilla de "textarea" resuelve estos puntos en primer lugar.

Marcado básico: Label, Name, Rows

Un campo de soporte completo necesita muy poco. Una etiqueta como "Describa el problema" apunta al control mediante su valor "for"; el control repite ese valor como su "id", lleva un "name" como "message", se muestra inicialmente con seis filas y ofrece un placeholder como "número de pedido, qué ocurrió, qué intentó".

Cuatro detalles resultan determinantes:

1. "for" en la etiqueta y el "id" coincidente en el control conectan ambos elementos, de modo que hacer clic en el texto sitúa el cursor dentro del cuadro y las herramientas de asistencia los leen de forma conjunta;
2. "name" es la clave bajo la que se recibe la respuesta, y un campo sin ella no envía ningún dato;
3. "rows" establece cuántas líneas son visibles antes de que comience el desplazamiento, una pista clara sobre la longitud que se espera;
4. "placeholder" muestra un ejemplo y nunca sustituye a la etiqueta, ya que desaparece con la primera pulsación de tecla.

"cols" es su contraparte horizontal, y la mayoría de las plantillas lo omiten.

Atributos para respuestas obligatorias o limitadas

Un comentario rápido y una reclamación de garantía requieren garantías distintas, y tres atributos cubren la mayor parte de esas necesidades:

1. "required" impide el envío en blanco y debe ubicarse en el campo indispensable para el equipo, habitualmente la descripción del problema;
2. "minlength" establece un límite mínimo cuando las respuestas de una sola palabra resultan inútiles, como en el resumen de un proyecto;
3. "maxlength" limita las entradas muy extensas y funciona mejor junto a un contador vinculado al control mediante "aria-describedby".

El resultado son plantillas reconociblemente distintas. Un mensaje de soporte mantiene el atributo required, seis filas y un límite de casi 1200 caracteres. La descripción de un proyecto abarca 10 filas con un mínimo de unos 80 caracteres. Una reseña sigue siendo opcional y sin límite, ya que un mínimo desincentivaría la redacción.

Orden accesible antes del envío

La secuencia en el documento importa tanto como los atributos. Primero la etiqueta, luego el texto de ayuda si lo hubiera, después el control y por último el espacio para el mensaje de validación. Leído en voz alta, el orden tiene sentido, y un visitante que navega con el tabulador encuentra la explicación antes que el cuadro vacío. "aria-describedby" vincula el texto de ayuda y el contador de caracteres al control, y ningún marcador de posición sustituye ese enlace.

Nicepage estructura este mismo orden a través de su Contact Form Element, que conserva organizadas las etiquetas, los controles y el envío.

Elija una plantilla según la etiqueta que necesite, si la respuesta es obligatoria, la extensión que espera, las indicaciones que ofrece al visitante y la validación asociada.