Labels para Inputs
Parte da seção Fundamentos do Journey de HTML da Coddy. Lição 39 de 60.
Nem sempre fica muito claro do que se trata um campo de entrada sem um rótulo. Um rótulo dá aos usuários uma indicação visual clara do tipo de entrada esperado naquele campo. Os 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 vínculo entre o rótulo e um campo do formulário. O valor defordeve corresponder aoiddo campo do formulário.
- Texto do rótulo: o texto que descreve para que serve o campo do formulário.
<input>: O campo do formulário ao qual o rótulo se refere.
id: O identificador exclusivo do campo do formulário, que corresponde ao atributoforno rótulo.
Depois que eles são vinculados, clicar no texto do rótulo posiciona o cursor (coloca o foco) no campo de entrada correspondente, o que também oferece aos usuários uma área maior para clicar.
Desafio
FácilAdicione as seguintes tags dentro da tag <form>:
- Uma
<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 rótulo.
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 Fundamentos
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éPratique por conta própria: Playground de Web