Olá 💜

Hoje vou dar algumas dicas de como criar formulários usando HTML5 e como podemos validar os campos!

Antes de tudo vamos entender a importância da validação de campos e das mensagens de instrução! Como desenvolvedores nós temos que sempre pensar no lado do usuário, em formulários nem sempre o que é pedido pode ser o que o usuário irá digitar.
Então, termos uma validação do campo força que o usuário insira os dados de acordo com o que esperamos, além disso as mensagens de instrução ajudam na usabilidade, pois assim quando tivermos algum dado escrito de forma incorreta, avisar ao usuário é importante para que ele corrija e prossiga com o preenchimento e envio do formulário.

O HTML5 já oferece e facilita a validação de campos.
Vamos ao exemplo:

Vou criar um formulário simples de cadastro de usuário! (Lembrando que é só um exemplo simples, hein?)

Print do código HTML

Existem algumas coisas que podemos observar, é sempre importante usarmos as tags semânticas do HTML5, então além da tag main também usei a tag form para indicar que temos um formulário.

Também é importante usarmos a tag label, porque é ela que vai ser associada aquele input. Isso facilita os leitores de tela em caso de acessibilidade (o valor do "for" na tag label corresponde ao id do input). Quando o usuário clicar na label, ele ativa o campo correspondente.
O placeholder também é importante, nele você pode adicionar uma instrução a mais para aquele campo.

Print de uma tela de formulário de cadastro com o campo nome em destaque

Quando adicionamos o atributo required no campo indicamos que ele é obrigatório para preenchimento, então o envio do formulário só será feito após o usuário preencher tudo. Então mesmo clicando no botão de enviar os dados, ele vai impedir caso os campos obrigatórios estejam vazios ou preenchidos de forma incorreta.

Print de uma tela de formulário a mensagem de campo obrigatório

Por padrão, o campo de e-mail possui a validação:

Print de uma tela de formulário com o campo e-mail com mensagem de validação

Porém para outros campos como telefone, CPF etc, podemos usar o pattern. O atributo pattern recebe uma REGEX indicando qual formato aquele campo aceita.
Se você é iniciante com REGEX não precisa se preocupar, no geral você pode pesquisar na internet REGEXs que já são bastante utilizadas em alguns campos. Então se você precisar de um pattern de CPF por exemplo, é só pesquisar e usar.

Nesse meu exemplo, eu coloquei um pattern que exige que o usuário digite uma senha com no mínimo 6 caracteres e que tenha ao menos um caractere especial.

Print de uma tela de formulário com o campo senha com mensagem de validação

Você pode perceber que além da mensagem padrão, eu também adicionei uma mensagem personalizada pra esse campo com o atributo title, dando mais instruções ao usuário sobre como ele deve preencher o campo.

Esses são apenas alguns passos básicos que você pode usar pra deixar seu formulário mais informativo e acessível. Você também pode adicionar um estilo, uma borda vermelha ao redor do campo com erro, também é muito utilizado. O que importa é que o usuário possa ver claramente o que ele precisa corrigir.
Algo simples que vai facilitar e ajudar na usabilidade.

Você pode ver o código aqui.
Espero que tenha gostado!