Labels para Inputs
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 39 de 60.
Nem sempre é muito claro sobre o que se trata um campo de entrada sem um rótulo. Um rótulo fornece aos usuários uma dica visual clara sobre qual tipo de entrada é esperada naquele campo. Rótulos são criados usando a tag <label>.
Aqui está a sintaxe básica:
<label for="field">Label text</label>
<input type="text" id="field"><label>: A tag que cria o rótulo.
for: Um link entre o rótulo (label) e um campo de formulário. O valor defordeve corresponder aoiddo campo de formulário.
- Texto da label: O texto que descreve para que serve o campo do formulário.
<input>: O campo de formulário ao qual o rótulo se refere.
id: O identificador único para o campo de formulário, que corresponde ao atributoforno rótulo.
Desafio
FácilAdicione as seguintes tags dentro da tag <form>:
- Um
<label>com o texto 'First Name:' e o atributofordefinido como 'firstname'. - Um campo
<input>comtype="text". - O campo
<input>deve ter umidque corresponda ao atributofordo label.
Folha de consulta
Rótulos fornecem pistas visuais claras para entradas de formulário usando a tag <label>:
<label for="field">Label text</label>
<input type="text" id="field">O atributo for no rótulo deve corresponder ao atributo id do campo de entrada correspondente para criar uma conexão adequada.
Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Escreva o código aqui -->
</form>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de Rodapé