Inputs e labels
Um campo sem label associado é um dos problemas de acessibilidade mais comuns (e mais fáceis de evitar) na web.
Estudar esta lição interativa →Todo formulário que pede um nome, um e-mail ou uma senha depende de duas tags trabalhando juntas: <input> (o campo em si) e <label> (o texto que diz o que aquele campo espera). O detalhe que faz toda a diferença é como essas duas tags se conectam.
Pense num formulário de papel: o rótulo "Nome:" precisa estar fisicamente colado à linha em que você escreve, senão ninguém sabe o que preencher onde. No HTML, essa "cola" não é a posição visual (que pode enganar), é o par de atributos for (no label) e id (no input): quando os dois valores são iguais, o navegador entende que aquele label pertence àquele campo específico, de forma inequívoca.
O que conecta um label ao seu input não é a posição na tela, é o valor: for="email" no label precisa ser exatamente igual ao id="email" no input.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Repare que id="nome" e for="nome" (mesmo valor) conectam label e input.
Essa conexão não é só um detalhe técnico "correto": ela tem efeitos práticos imediatos. Primeiro, clicar no texto do label (não só no campo) já foca o input, um ganho de usabilidade e de área clicável, ótimo em telas de celular. Segundo, e mais crítico, leitores de tela anunciam o texto do label sempre que o campo recebe foco: sem essa associação, a pessoa ouve só "campo de texto em branco", sem saber o que digitar ali.
Também funciona colocar o <input> dentro do <label>, sem for nem id: <label>Aceito os termos <input type="checkbox"></label>. É muito usada em checkboxes e radios. O par for/id continua sendo o mais flexível, porque o label e o campo podem ficar em lugares diferentes do layout. Escolha um jeito e seja consistente.
É tentador usar só o atributo placeholder (aquele texto cinza-claro dentro do campo) no lugar de um label de verdade. O problema: o placeholder desaparece assim que a pessoa começa a digitar, e ele não tem o mesmo suporte de leitores de tela que um label de verdade tem. Use o placeholder como uma dica extra de formato (ex.: "dd/mm/aaaa"), nunca como substituto do label.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Associe o label ao input com for/id.