Textarea Plantillas HTML

Plantillas HTML de área de texto para campos estructurados

La mayoría de los problemas con un campo multilínea comienzan en el marcado: no hay etiqueta asociada al cuadro, ni nombre para enviar la información, ni nada que indique al usuario si se esperan dos oraciones o dos párrafos. Una plantilla de "área de texto" resuelve estos problemas desde el principio.

Marcado básico: Etiqueta, nombre, filas

Un campo de soporte completo requiere poco. Una etiqueta como "Describa el problema" apunta al control mediante su valor "for"; el control repite ese valor como su "id", tiene un "nombre" como "mensaje", se abre en seis filas y ofrece un marcador de posición como "número de pedido, qué sucedió, qué intentó".

Cuatro detalles son clave:

1. "for" en la etiqueta y el "id" correspondiente en el control los conectan, de modo que al hacer clic en el texto, el cursor se coloca en el cuadro y el software de asistencia los lee como uno solo;

2. "Name" es la clave con la que se recibe la respuesta, y un campo sin ella no aporta nada;

3. «rows» determina cuántas líneas se muestran antes de que comience el desplazamiento, una indicación clara de la longitud esperada;

4. «placeholder» muestra un ejemplo y nunca reemplaza la etiqueta, ya que desaparece al pulsar la primera tecla.

«cols» es la contraparte horizontal, y la mayoría de las plantillas la omiten.

Atributos para respuestas obligatorias o limitadas

Un comentario breve y una reclamación de garantía requieren garantías diferentes, y tres atributos cubren la mayor parte de esa diferencia:

1. «required» evita que se envíe información vacía y se ubica en el campo indispensable para el equipo, generalmente la descripción del problema;

2. «minlength» establece un límite mínimo donde las respuestas de una sola palabra son inútiles, como en un resumen del proyecto;

3. «maxlength» limita las entradas muy largas y funciona mejor junto a un contador que «aria-describedby» conecta al control.

El resultado son plantillas claramente diferentes. Un mensaje de soporte mantiene la bandera de obligatorio, seis filas y un límite de casi 1200 caracteres. La descripción de un proyecto ocupa 10 filas con un límite inferior de aproximadamente 80 caracteres. La revisión es opcional y no tiene límite, ya que un límite inferior desincentiva la escritura.

Orden accesible antes del envío

El orden en el documento es tan importante como los atributos. Primero la etiqueta, luego el texto de ayuda, después el control y, por último, el espacio para el mensaje de validación. Al leerlo en voz alta, el orden tiene sentido, y un visitante que navegue con la tecla Tab encontrará la explicación antes del 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 vínculo.

Nicepage crea la misma estructura mediante su Elemento de formulario de contacto, que mantiene las etiquetas, los controles y el envío en orden.

Elija una plantilla según la etiqueta que necesite, si la respuesta es obligatoria, la longitud esperada, las sugerencias que proporcione al visitante y la validación correspondiente.