Formulários, controlos e submissão

Três relações diferentes

O id identifica um elemento no documento, o for de label referencia esse id e name dá nome à entrada submetida. No exemplo, resumo desempenha os dois papéis por conveniência, mas os valores não têm de coincidir. Se um componente mudar o id para evitar duplicados, deve atualizar o label correspondente; não precisa de mudar a chave que o servidor espera. Um placeholder não substitui esta identificação persistente.

Controlos que participam

Um controlo pode estar visível e não contribuir para os dados. Um input de texto sem name não fornece essa entrada e um controlo disabled é excluído. Readonly, nos tipos que o suportam, impede edição direta mas pode conservar o valor na submissão.

Isso é útil para apresentar um código fixo, porém não garante a integridade do pedido: o servidor deve confirmar a identidade do registo e o direito a alterá-lo.

Ausência também tem significado

A checkbox avisos do exemplo só envia o par avisos=email quando está marcada. Desmarcada, não envia automaticamente false, zero ou uma string vazia. A aplicação deve definir como interpreta a ausência.

Numa edição parcial, ausência pode significar não alterar; numa substituição completa, pode significar desativar. Essa decisão pertence ao contrato da operação e não deve ser adivinhada a partir da aparência do controlo.

Intenção do botão

Ajuda usa type button para não acrescentar submissão nem reset à interação. Os dois submitters têm valores distintos e o de rascunho substitui o destino do form com formaction. A validação continua ativa porque não existe uma dispensa no exemplo.

Ao interpretar FormData construído por código, considera o parâmetro submitter se o seu name/value for necessário. Construir esse objeto não é, por si só, um pedido HTTP.

Propriedade e posição visual

O atributo form de um input pode associá-lo a um formulário do mesmo documento, mesmo fora desse elemento. A associação usa o id do form. Mas form num fieldset não é uma regra herdada por todos os inputs: cada controlo precisa da associação adequada.

Isto importa quando um painel lateral parece fazer parte da mesma edição, mas está colocado noutra zona do DOM. Revê propriedade e nomes, além da proximidade visual.

Grupos e desativação

fieldset e legend permitem agrupar controlos relacionados com um título comum. Disabled no fieldset desativa os controlos descendentes, com a exceção dos descendentes do seu primeiro legend filho. Essa exceção pode permitir um controlo que decide ativar o grupo, mas a lógica de ativação não surge automaticamente.

Um segundo estado disabled independente continua relevante. Não generalizes a exceção a todos os elementos legend ou a todos os grupos aninhados.

Contrato de entrega

GET coloca os dados no URL e é adequado a pesquisas sem efeitos de escrita; POST transporta-os no corpo com a codificação aplicável. Nenhum método comprova que os dados sejam válidos, autorizados ou cifrados pelo simples facto de ter sido escolhido.

Para diagnosticar uma falha, identifica controlo, par esperado, submitter, método e destino. Só depois compara a resposta. As perguntas pedem essa leitura do fluxo, sem executar os excertos.

Armadilhas comuns

Confundir for com name; enviar campos disabled por expectativa; tratar checkbox desmarcada como false automático; supor que form no fieldset é herdado; ignorar formaction; confiar num código só porque está readonly.