Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Usando Rótulos para Melhor Acessibilidade de Formulários | Formulários HTML e Entrada do Usuário
HTML Definitivo
course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Usando Rótulos para Melhor Acessibilidade de Formulários

O elemento <label> é utilizado para associar um rótulo a um campo de entrada em um formulário. Essa associação auxilia os usuários a compreenderem as informações solicitadas no campo do formulário. Ao clicar no rótulo, o foco é automaticamente direcionado para o campo de entrada correspondente.

Existem duas maneiras de conectar elementos label e input:

Envolvimento

Ao aninhar um elemento de formulário, como um campo <input/>, dentro de um elemento <label>, o navegador estabelece automaticamente uma ligação entre o rótulo e o campo de entrada. Por exemplo:

html

index.html

copy

Neste exemplo, ao clicar no texto do rótulo "Nome", o campo de entrada correspondente será automaticamente focado.

Utilizando o atributo id

Quando um elemento de formulário não está aninhado dentro de um elemento <label>, é necessário vinculá-los manualmente utilizando o atributo id do elemento input e o atributo for do elemento label. Os valores dos atributos for e id devem ser iguais. Por exemplo:

html

index.html

copy

Neste caso, o rótulo está associado ao campo de entrada utilizando o atributo for no rótulo e o atributo id no campo de entrada. Ao clicar no texto do rótulo "Nome", o campo de entrada correspondente também será focado.

Observação

Utilizando esses métodos, estabelece-se uma conexão visual e semântica entre o label e o campo input. No entanto, podem existir situações em que envolver o elemento input dentro do label seja inviável devido a restrições de estilo ou lógica do site. Nesses casos, normalmente utiliza-se a conexão por atributos para manter a flexibilidade na aplicação de estilos e implementação de lógica de fundo.

Vamos analisar a diferença entre as duas abordagens examinando o código na imagem.

Nota

Do ponto de vista do navegador, a abordagem escolhida para estabelecer a conexão é irrelevante. Ambos os métodos alcançam o mesmo resultado de vincular o rótulo e o campo de entrada para melhor usabilidade e acessibilidade.

question mark

Qual é o propósito do elemento <label> em formulários HTML?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Usando Rótulos para Melhor Acessibilidade de Formulários

O elemento <label> é utilizado para associar um rótulo a um campo de entrada em um formulário. Essa associação auxilia os usuários a compreenderem as informações solicitadas no campo do formulário. Ao clicar no rótulo, o foco é automaticamente direcionado para o campo de entrada correspondente.

Existem duas maneiras de conectar elementos label e input:

Envolvimento

Ao aninhar um elemento de formulário, como um campo <input/>, dentro de um elemento <label>, o navegador estabelece automaticamente uma ligação entre o rótulo e o campo de entrada. Por exemplo:

html

index.html

copy

Neste exemplo, ao clicar no texto do rótulo "Nome", o campo de entrada correspondente será automaticamente focado.

Utilizando o atributo id

Quando um elemento de formulário não está aninhado dentro de um elemento <label>, é necessário vinculá-los manualmente utilizando o atributo id do elemento input e o atributo for do elemento label. Os valores dos atributos for e id devem ser iguais. Por exemplo:

html

index.html

copy

Neste caso, o rótulo está associado ao campo de entrada utilizando o atributo for no rótulo e o atributo id no campo de entrada. Ao clicar no texto do rótulo "Nome", o campo de entrada correspondente também será focado.

Observação

Utilizando esses métodos, estabelece-se uma conexão visual e semântica entre o label e o campo input. No entanto, podem existir situações em que envolver o elemento input dentro do label seja inviável devido a restrições de estilo ou lógica do site. Nesses casos, normalmente utiliza-se a conexão por atributos para manter a flexibilidade na aplicação de estilos e implementação de lógica de fundo.

Vamos analisar a diferença entre as duas abordagens examinando o código na imagem.

Nota

Do ponto de vista do navegador, a abordagem escolhida para estabelecer a conexão é irrelevante. Ambos os métodos alcançam o mesmo resultado de vincular o rótulo e o campo de entrada para melhor usabilidade e acessibilidade.

question mark

Qual é o propósito do elemento <label> em formulários HTML?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt