Melhore formulários com padrões de validação
Use fieldset, legend e validações nativas.
- Agrupar campos e aplicar required/pattern com semântica.
Formulários longos ficam mais claros com fieldset e legend. Validações nativas ajudam sem JavaScript adicional.
1<form>
2 <fieldset>
3 <legend>Contact details</legend>
4 <label for="phone">Phone</label>
5 <input id="phone" name="phone" pattern="[0-9]{10}" required>
6 </fieldset>
7 <button type="submit">Send</button>
8</form>Contact details Phone Send
required marca campo obrigatório; pattern valida formatos específicos.
Principais conclusões
Agrupar campos e aplicar required/pattern com semântica.
Prefira elementos semânticos para comunicar intenção.
Mantenha estrutura legível para pessoas e ferramentas assistivas.
Quiz da aula
5 perguntas · aprovação com 4 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em HTML
Escreva a marcação, veja a prévia em um frame isolado do navegador e compare o texto visível com os requisitos.
Agrupe campos de formulário de voluntários
Crie fieldset Volunteer contact, labels Phone e Email, botão Join, required nos dois campos e pattern [0-9]{10} no telefone.
- Texto do formulário de voluntários
Sua marcação aparece em uma prévia isolada. Execute os testes para conferir o texto visível da página.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…