Área De Texto Modelos HTML

Modelos HTML de Área de Texto para Campos Estruturados

A maioria dos problemas com um campo de múltiplas linhas começa na marcação: nenhuma etiqueta vinculada à caixa, nenhum nome para enviar a resposta, nada que indique ao visitante se são esperadas duas frases ou dois parágrafos. Um modelo de "área de texto" resolve essas questões primeiro.

Marcação Básica: Etiqueta, Nome, Linhas

Um campo de suporte completo precisa de pouco. Uma etiqueta como "Descreva o problema" aponta para o controle através do seu valor "for"; o controle repete esse valor como seu "id", possui um "nome" como "mensagem", abre em seis linhas e oferece um espaço reservado como "número do pedido, o que aconteceu, o que você tentou".

Quatro detalhes são cruciais:

1. "for" na etiqueta e o "id" correspondente no controle conectam os dois, de modo que clicar no texto coloca o cursor na caixa e o software de acessibilidade os lê como um só;

2. "name" é a chave sob a qual a resposta chega, e um campo sem ele não contribui em nada;

3. "rows" define quantas linhas ficam visíveis antes do início da rolagem, uma dica honesta sobre o comprimento esperado;
4. "placeholder" mostra um exemplo e nunca substitui o rótulo, pois desaparece ao primeiro toque de tecla.

"cols" é a contraparte horizontal e a maioria dos modelos o omite.

Atributos para Respostas Obrigatórias ou Limitadas

Um comentário rápido e uma solicitação de garantia exigem garantias diferentes, e três atributos abrangem a maior parte dessa diferença:

1. "required" impede o envio de um texto vazio e pertence ao campo sem o qual sua equipe não pode trabalhar, geralmente a descrição do problema;

2. "minlength" define um limite mínimo para respostas de uma palavra, como em um resumo de projeto;

3. "maxlength" limita entradas muito longas e funciona melhor ao lado de um contador que "aria-describedby" conecta ao controle.

O resultado são modelos visivelmente diferentes. Uma mensagem de suporte mantém o indicador de obrigatório, seis linhas e um limite de quase 1200 caracteres. A descrição de um projeto abrange 10 linhas, com um limite inferior de aproximadamente 80 caracteres. A avaliação permanece opcional e ilimitada, já que um limite inferior desencoraja a escrita.

Ordem Acessível Antes do Envio

A sequência no documento é tão importante quanto os atributos. Primeiro o rótulo, depois qualquer texto explicativo, em seguida o controle e, por fim, o local para uma mensagem de validação. Ao ler em voz alta, a ordem faz sentido e um visitante que navega pelo documento usando a tecla Tab encontra a explicação antes da caixa vazia. O atributo "aria-describedby" vincula o texto explicativo e o contador de caracteres ao controle, e nenhum marcador substitui esse link.

O Nicepage monta a mesma estrutura por meio de seu Elemento de Formulário de Contato, que mantém rótulos, controles e envio em ordem.

Escolha um modelo com base no rótulo necessário, se a resposta é obrigatória, o comprimento esperado, as dicas que você fornece ao visitante e a validação por trás dela.