DEV Community: luysla

[Tutorial] Validação de formulário HTML5

luysla — Thu, 03 Apr 2025 03:35:10 +0000

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?)

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.

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.

Por padrão, o campo de e-mail possui a 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.

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!

O que é Github?

luysla — Fri, 10 Jun 2022 02:45:05 +0000

Oi, gente! 🥰

Bem, eu trouxe esse post pra esclarecer o que é Github. A maioria dos meus posts (que são poucos ainda rs) são sempre para pessoas que estão iniciando na programação e imagino que fiquem esse tipo de dúvida.

Então vamos lá!

Git

Antes de falar do github em si, precisamos saber que existe o git por trás de tudo isso.
Em resumo, o git é um controlador de versões de código aberto. Ele foi criado por Linus Torvalds (mesmo criador do Linux, inclusive :D). Com ele você consegue versionar e ter um controle melhor das versões do seu código/projeto.

Sim, mas qual a utilidade disso?
Bem, quando estamos falando de desenvolver projetos individuais, nós temos o maior controle das alterações feitas. Mas imagina que você precisa trabalhar em um projeto que o mesmo arquivo pode ser alterado por você e por outra pessoa ao mesmo tempo? 😬
sem esse controle de versões iria ser quase inviável você juntar esse código ou controlar as alterações. Basicamente o git te ajuda nessa junção desse código.
Outro exemplo de utilidade, voltar em uma versão específica do seu código. Digamos que no seu projeto você mudou a cor do site para ser azul, só que com a mudança o site parou de funcionar, usando o git você pode voltar o código para a versão anterior que estava funcionando antes dessa alteração. Esse é só um exemplo simples, mas podemos entender a importância desse controle do nosso código.

E o que é o github?

Basicamente o github é uma plataforma web que você armazena em nuvem e gerencia seus projetos que usam git. Exemplo, estou criando o meu site localmente usando o git no meu computador e quero que o meu projeto seja armazenado na nuvem. Eu posso criar um repositório no github e armazenar o meu projeto. O github também oferece a utilização dos recursos do próprio git a partir de sua interface, então se eu quiser ver as alterações do código, qual linha foi removida, qual a pessoa que fez a alteração, criar commits, tudo isso na plataforma. O que facilita o trabalho em conjunto também e facilita o uso do git para quem não é muito familiarizado com comandos no terminal.

Provavelmente se você é iniciante na programação fazendo algum curso, já ouviu falar sobre o github, porque no geral é um ambiente que se tornou muito importante para criar seu portfólio pessoal e profissional, além de colaborar com projetos de outras pessoas também, é muito comum você ver devs usando o github com essas finalidades. Virou meio que uma rede social para devs também 👩‍💻 🧑‍💻 👨‍💻

Então por isso não deixem de usar!
vou deixar aqui embaixo alguns links que podem ajudar você a entender mais profundamente como funciona o git e o github, mas se for legal futuramente posso trazer mais informações sobre o git, porque tem muitos detalhes que não comentei aqui nesse post
mas espero que tenham gostado desse resumo 💜

Links para saber mais:

Git tutorial, bem legal
https://rogerdudler.github.io/git-guide/index.pt_BR.html

Documentação do Github
https://docs.github.com/pt/get-started

https://skills.github.com/

Git + github tutorial top das meninasss do Womakers code
https://womakerscode.gitbook.io/desvendando-git-e-github/

Curso gratuito de Git e Github
https://www.udemy.com/course/git-e-github-para-iniciantes/

Fonte da imagem da capa
https://videosdeti.com.br/git-e-github-primeiros-passos/

Feliz dia de Star Wars!

luysla — Thu, 05 May 2022 01:05:14 +0000

Olá, pessoal <3

Em comemoração ao dia de Star Wars trouxe um post especial!

Quem me acompanha no instagram viu minha postagem comemorando e prometi colocar aqui no post alguns links de projetinhos legais com a temática Star Wars!
Vem comigo conferir!

1 - Construindo uma galáxia com código

Esse projetinho é voltado mais para pessoas que estão iniciando na programação, que ainda não possuem conhecimento em nenhuma linguagem específica. O code.org oferece gratuitamente exercícios de programação utilizando a programação por meio de bloquinhos, é muito legal para exercitar sua lógica e também o aprendizado para quem está iniciando. Esse projeto em especial é sobre Star Wars :D

2 - Desenvolvendo a intro de Star Wars

Sabe aquele famoso letreiro que aparece logo no início de todo filme de Star Wars? Nesse post a @glaucia86 ensina como reproduzir essa intro usando HTML, CSS e JS.

3 - Jogo de Super trunfo usando os veículos de Star Wars

Esse projetinho foi criado pela comunidade Dev Girls Mentor. O jogo já foi desenvolvido mas as meninas mantém as aulas de live coding gravadas aqui então você ainda pode acompanhar e desenvolver junto <3
Lembrando que a comunidade tem um discord e lá tem os encontros e anúncios de novos projetos e muito mais então não deixem de participar da comunidade!

4 - API Star Wars

Se você já sabe consumir dados por meio de APIs saiba que existe uma API especialmente com dados sobre Star Wars aqui então você pode soltar a imaginação e criar projetinhos utilizando esses dados. (Exemplo: Um buscador de informações sobre os personagens)

Espero que vocês tenham gostado do post especial de Star Wars!

May the 4th be with you!

Vem aprender sobre HTML semântico 💜

luysla — Fri, 28 Jan 2022 04:51:17 +0000

Antes de falar de semântica, vamos conceituar o HTML (Hypertext Markup Language). O HTML é basicamente um arquivo que pode ser lido pelos navegadores, nele podemos definir toda a estrutura de um site e seu conteúdo, seja ele texto, vídeo, imagem etc.
Entāo basicamente usamos o HTML para construçāo de páginas na web 👩‍💻

Entāo o que seria o HTML semântico?
Bem, antes do HTML5 (versāo atual) a estrutura de um HTML era dividida em divs e cada div tinha sua classe.
Entāo se eu quisesse fazer um header (cabeçalho) no meu site seria dessa forma:

<div class="header"> 
...
</div>

Mas essa estrutura dificultava os navegadores na hora da leitura e compreensāo, bem como os leitores de acessibilidade.

Entāo a partir do HTML5 foram criadas as tags semânticas para facilitar na leitura e no processamento das informaçōes contidas na página.
Com o HTML semântico, nosso header (cabeçalho) pode ser descrito com a tag semântica header:

<header>
...
</header>

O header é somente um exemplo de tag semântica, existem aproximadamente umas 100 tags semânticas que podemos usar para ajudar os navegadores a interpretar melhor nosso site.

Confira uma lista dessas tags aqui

Lembrando que semântica também pode ser aplicada ao JavaScript e CSS! Veja um pouco aqui

Referências

Meu instagram:
💬 @_dyanadev

Criando sua SSH key no Github

luysla — Sat, 03 Jul 2021 19:02:22 +0000

Oi :)
No meu primeiro post aqui, decidi trazer um tutorial de como criar sua chave SSH para sua conta Github, pois futuramente (ainda esse ano) será uma das formas de autenticação obrigatória nas operações git que você for fazer (commit, push...). Vamos lá?
Mas antes...

O que é uma chave SSH?

SSH (Secure Socket Shell) é um protocolo que permite troca de informações de maneira segura entre cliente e servidor. A chave SSH é uma identificação única que podemos utilizar para autenticação, ela é composta por um par de chaves, uma chave privada e outra pública. A chave privada deve ser armazenada na sua máquina e a chave pública será armazenada na sua conta remota, nesse caso o Github. Então toda vez que uma operação é feita, há uma verificação e a operação só será liberada se a chave privada for compátivel Mais detalhes aqui

Porque criar uma chave SSH para o Github?

O Github tem feito nos últimos anos, diversas mudanças que envolvem a segurança dos dados e a ideia de retirar a autenticação por usuário e senha nas operações que você faz no seu Github é exatamente para melhorar a segurança. Na autenticação por login/senha, existe uma vulnerabilidade maior em relação ao seus dados de autenticação, já com o token ou a chave SSH, a segurança é maior diminuindo assim as chances de exposição dos seus dados.

Criando sua chave 🔑

~ Se você usa Windows, pode usar os mesmos passos abaixo para gerar a chave usando o Git Bash ~

1 - Vamos verificar se você já possui um par de chaves SSH criado com o seguinte comando:

$ ls ~/.ssh

Se o arquivo de nome id_rsa.pub, id_ecdsa.pub ou id_ed25519.pub estiver no diretório, então você já possui um par de chaves pule o passo 2.

2 - Gerando seu par de chaves

$ ssh-keygen -t ed25519 -C "seu-email-github@email.com"

Após executar esse comando, ele irá perguntar se você confirma a criação da chave no diretório padrão (aperta 'Enter' para confirmar ou adicione o diretório que deseja criar o arquivo com a chave):

Generating public/private ed25519 key pair.
Enter file in which to save the key (/home/User/.ssh/id_ed25519):

e também adicionar alguma frase como senha, é opcional porém utilizar aumenta a segurança da sua chave, mas caso deseje pode deixar em branco (Aperte 'Enter' 2 vezes para isso :D).

3 - Adicionando sua chave pública no Github

Acesse o arquivo da chave criada:

$ cat ~/.ssh/id_ed25519.pub

copie o conteúdo.

Hora de ir no Github, em Configurações > SSH Keys and GPG Keys e clique em gerar nova chave SSH:

Adicione o título que desejar e o conteúdo da sua chave:

Após adicionar os dados, o Github irá solicitar sua senha para confirmação. Adicione a sua senha e a chave já estará cadastrada na sua conta <3

Para utilizar sua chave SSH, é só clonar o repositório utilizando a opção de SSH, como indicado na imagem abaixo.

Até mais 💜