Passo 1 de 6
Escolher entre uma linha e várias linhas
Escolha o controle de texto adequado e escreva a estrutura HTML de campos de uma ou várias linhas.
Trilha de aprendizado · Nível 6 · Tutorial 1
Ao concluir, você poderá criar campos de uma ou várias linhas e associar rótulos visíveis que identifiquem corretamente cada controle.
Escolher entre uma linha e várias linhas
Escolha o controle de texto adequado e escreva a estrutura HTML de campos de uma ou várias linhas. 2 min
Associar um rótulo a cada campo
Crie rótulos visíveis e associe cada um ao campo correto usando for e id. 3 min
Conferir a associação pelo foco
Teste o destino do foco ao clicar nos rótulos e corrija referências que apontam para o campo errado. 2 min
Definir o texto inicial dos campos
Preencha input e textarea com textos iniciais editáveis, usando a sintaxe adequada para cada controle. 2 min
Usar placeholder sem substituir o rótulo
Diferencie o rótulo permanente, o conteúdo preenchido e a dica temporária de um campo. 2 min
Aplicar e revisar os campos criados
Monte dois campos com rótulos associados, valores iniciais e uma dica opcional. Depois, confira o comportamento no navegador. 3 min
Passo 1 de 6
Escolha o controle de texto adequado e escreva a estrutura HTML de campos de uma ou várias linhas.
Use input com type="text" para um campo de texto de uma linha.
Use textarea quando o usuário precisar escrever em várias linhas, com a possibilidade de inserir quebras de linha.
Dica
Um texto comprido pode ser escrito em uma única linha. Mesmo um recado curto pode precisar de quebras de linha. Escolha conforme a necessidade de edição.
O título de um projeto pode ser comprido, mas deve ser editado em uma única linha, sem quebras de linha. Qual controle atende a essa necessidade?
input é um elemento vazio: não recebe tag de fechamento.
textarea tem tag de abertura e tag de fechamento. Para criar um campo vazio, escreva <textarea></textarea>.
<input type="text">
<textarea></textarea>Coloque o trecho no body de um arquivo HTML de prática, salve e atualize a página.
Por enquanto, são controles isolados apenas para testar a digitação.
Tanto input quanto textarea precisam de uma tag de fechamento.
Passo 2 de 6
Crie rótulos visíveis e associe cada um ao campo correto usando for e id.
O elemento label apresenta um rótulo visível para o campo. Quando associado ao controle, seu texto fornece o nome acessível: a identificação usada por tecnologias assistivas, como leitores de tela.
<label for="nome-completo">Nome completo</label>
<input type="text" id="nome-completo">O for do label aponta para o id do controle. Os valores devem ser exatamente iguais, inclusive nas letras maiúsculas e minúsculas, e sem acrescentar #.
Apenas colocar um texto perto do campo não estabelece essa associação.
<label for="____">Cidade de residência</label>
<input type="text" id="cidade-residencia">Digite apenas o valor que completa for, sem as aspas.
Use um id exclusivo no documento para cada controle e faça cada label apontar para o campo correspondente.
Escolha textos claros e específicos: “Assunto da solicitação” e “Detalhes da solicitação” informam melhor a finalidade dos campos do que um rótulo genérico como “Dados”.
<label for="assunto">Assunto da solicitação</label>
<input type="text" id="assunto">
<label for="detalhes">Detalhes da solicitação</label>
<textarea id="detalhes"></textarea><label for="nome-projeto">Nome do projeto</label>
<input type="text" id="nome-projeto">
<label for="descricao-projeto">Descrição do projeto</label>
<textarea id="____"></textarea>Qual valor completa o id da textarea, associando-a ao rótulo “Descrição do projeto” sem repetir o id do input?
Passo 3 de 6
Teste o destino do foco ao clicar nos rótulos e corrija referências que apontam para o campo errado.
Ao clicar em um label associado, o navegador direciona o foco ao campo correspondente. Observe o cursor de inserção — a barrinha dentro do campo — e digite algumas letras. Elas devem aparecer no controle identificado pelo rótulo.
Dica
Se nenhum campo receber foco ou outro campo receber, compare o for do rótulo com o id do controle pretendido.
Insira este trecho no body do seu arquivo de prática. Salve, atualize a página e clique no rótulo “Mensagem”. Observe o cursor de inserção e digite algumas letras.
<p>
<label for="nome">Nome</label>
<input type="text" id="nome">
</p>
<p>
<label for="nome">Mensagem</label>
<textarea id="mensagem"></textarea>
</p>Qual campo recebeu o foco ao clicar em “Mensagem”? Mantendo os controles e seus valores de id, escreva a linha do rótulo “Mensagem” corrigida.
Escreva pelo menos 15 caracteres (0/15).
Aplique a correção, salve e atualize a página.
Atenção
O teste de clique ajuda a conferir a associação entre rótulo e campo. Passar nesse teste não garante, sozinho, a acessibilidade completa da página.
Passo 4 de 6
Preencha input e textarea com textos iniciais editáveis, usando a sintaxe adequada para cada controle.
Um campo pode começar preenchido. No input do tipo text, use o atributo value para definir esse texto inicial.
<label for="nome">Nome de exibição</label>
<input type="text" id="nome" value="Ana">Exemplo
“Nome de exibição” identifica o campo. “Ana” é o conteúdo inicial: o usuário pode trocar por “Bia” ou apagar tudo. Essa edição não altera o rótulo.
Preencha a lacuna com o atributo que faz o campo começar com o texto “Recife”.
<label for="cidade">Cidade</label>
<input type="text" id="cidade" ____="Recife">No textarea, escreva o texto inicial entre a tag de abertura e a de fechamento. Esse conteúdo também poderá ser editado pelo usuário.
<label for="apresentacao">Apresentação</label>
<textarea id="apresentacao">Gosto de desenhar.
Quero aprender HTML.</textarea>Atenção
Em HTML, o atributo value não define o valor inicial de um textarea. Use value no input; no textarea, coloque o conteúdo entre as tags.
<label for="apresentacao">Apresentação</label>
<textarea id="apresentacao" value="Estudo à noite."></textarea>O campo deveria começar com “Estudo à noite.”. Qual trecho corrige o problema e mantém o rótulo “Apresentação”?
Passo 5 de 6
Diferencie o rótulo permanente, o conteúdo preenchido e a dica temporária de um campo.
Use o atributo placeholder para oferecer uma dica breve e opcional em input type="text" ou textarea. Mantenha o label visível e associado: a dica não o substitui.
<label for="assunto">Assunto</label>
<input type="text" id="assunto"
placeholder="Ex.: Horário de atendimento">
<label for="mensagem">Mensagem</label>
<textarea id="mensagem"
placeholder="Ex.: Vocês abrem aos sábados?"></textarea>Exemplo
Os dois campos estão vazios: os exemplos são dicas, não valores preenchidos. Ao digitar, a dica desaparece; ao apagar todo o conteúdo, ela volta. O rótulo permanece visível.
<input type="text" id="nome-completo"
placeholder="Nome completo">O placeholder “Nome completo” dispensa um label visível e associado a esse campo.
Um valor inicial já preenche o campo. Por isso, enquanto houver esse conteúdo, o placeholder não aparece.
<label for="cidade-destino">Cidade de destino</label>
<input type="text" id="cidade-destino"
value="Recife" placeholder="Ex.: Salvador">Exemplo
No exemplo anterior, a pessoa apaga “Recife” por completo. Sem digitar nada, como fica o campo?
Passo 6 de 6
Monte dois campos com rótulos associados, valores iniciais e uma dica opcional. Depois, confira o comportamento no navegador.
Escreva um trecho HTML com estes requisitos:
id exclusivo para cada controle.Ex.: interesses e projetos, sem substituir o rótulo.Use somente os elementos e atributos necessários para esses dois campos.
Escreva pelo menos 30 caracteres (0/30).
Coloque seu trecho no body de um arquivo HTML de prática, salve e abra no navegador.
Dica
O clique no rótulo verifica pontualmente a associação com o campo. Esse teste, sozinho, não garante a acessibilidade de toda a página.
Ao testar uma versão do trecho, você clica em “Apresentação pessoal”, mas a digitação entra no campo “Nome de exibição”. O que deve revisar?
Resumo
Parabéns! Você concluiu: Criar campos de texto com rótulos acessíveis
Tutorial concluído! Você praticou a criação e a revisão de campos de texto com rótulos associados. No próximo tutorial, verá como configurar o envio de dados.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
