Formulários com telefone e e-mail - @Curso em Vídeo HTML5 e CSS3

Acompanhe esse vídeo até o final para responder a estas e muitas outras perguntas.

Tópicos deste vídeo:
00:00 - Módulo 04, Capítulo 24, aula 07

O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.

Acesse o material de apoio em PDF:

Receba notificações de novos vídeos:

Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:

Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:

Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:

Torne-se apoiador do projeto:

Siga-nos nas redes sociais:

Conheça os patrocinadores desse curso:

#cursohtml5css3 #modulo04 #C24A07

[isaiasandre]

Pessoal quem está começando, e quiser comando de atalho pra comentários basta digitar na linguagem que vc estiver pode ser dentro de Css na tag <style> ou mesmo em html em qualquer tag ou javascript... ( pressione a tecla (Ctrl + ; ) o Vs Code criará automáticamente a linha de comentários... Abçs....

[visiontronicsecurity]

Cara o seu canal é o mais divulgado em grupos lá da faculdade.
Fico feliz em acompanhar o canal a anos e ver o quanto o curso em vídeo está crescendo.
Parabéns Guanabara vc merece cara. Sempre nos trazendo conteúdo de qualidade e a melhor explicação em todos os conteúdos .

[flavianafernandes]

Grande explicação, didática impecável. Não saí do vídeo até compreender o pattern (dei uma pesquisa na internet tbm). Obrigada, professor 😃

[ARTSeARTS]

Me identifico muito com seu método de trabalho. Tudo sem complicações e com resultado garantido. Muito obrigado por nos informar. Sucesso.

[Jcstch]

Já estou quase terminando o curso de Html e css do capitulo 17 aula 10 .
E irei começar esse aqui, muito obrigado Guanabara.

[nonly]

Seguimos, aula recheada para anotar, obrigado Guanabara, como sempre impecavel

[danp]

Suas aulas me ajudam muito, ganhei um curso na EBAC "Profissão: Desenvolvedor Full Stack Java" (estou no inicio, modulo 6/36) e mesmo assim venho ao seu canal pra aprender mais. Obrigado pela dedicação em passar seu conhecimento. Muito sucesso pra você.

[dalik]

caramba, é muita coisa que tem pra configurar um formulário, eu nem imaginava que tinha tanta coisa assim

[michaelwilly.]

Mais uma aula perfeita!!! Parabéns, e muito obrigado!🙃

[celsosilva]

Meu like está garantido! Excelente trabalho professor.

[Azlouren]

Muito bom.
Eu que conheço um pouco sobre HTML estou sempre aprendendo algo novo.
Obrigado.

[_Victor-Lourenco]

*pattern:*

O atributo pattern especifica uma Expressão Regular para validar o conteúdo de um campo input. Dessa forma, para que a submissão do form seja executada, o valor do controle de formulário deve corresponder ao padrão especificado na expressão regular (pattern).

Mas o que é uma expressão regular? Expressões Regulares ou Regular Expressions (RegEx) se tratam de uma forma de notação - sistema de representação gráfica - usado para especificar um padrão de texto que faz verificações em conteúdos textuais... De forma resumida, essas verificações textuais possuem três principais aplicações:

*1 - Efetuar buscas:*

Não se trata de uma simples busca por palavras como estamos acostumados. Com o RegEx, você pode buscar por PADRÕES que definem qual é o formato esperado do termo que está sendo procurado. Por exemplo: Num texto qualquer, buscar todos os termos que tenham um formato de data (dd/mm/aaaa) SEM SABER EXATAMENTE QUAL É A DATA QUE ESTAMOS PROCURANDO.

*2 - Validações em texto:*

Com o RegEx podemos fazer validações em texto, ou seja, verificar se determinada sequência de caracteres atende ao PADRÃO estabelecido (o atributo "pattern" usa essa aplicação na sua validação por RegEx).

*3 - Fazer substituições:*

No contexto de Expressão Regular, as substituições vão muito além de simplesmente substituir texto por texto, pois no RegEx há um recurso em que é possível extrair apenas uma parte de um padrão para utilizá-lo no destino. Portando, se trata se uma substituição que tem como base um padrão, bem como partes desses padrões também.

As aplicações do RegEx descritas acima podem ser executadas em qualquer sequência de caracteres, seja para um parágrafo de um livro, um texto estruturado ou até mesmo o próprio conteúdo de um código. (o atributo pattern no HTML5 utiliza para validar o conteúdo do input - Validação em texto)

Várias ferramentas tem suporte para expressões regulares. A maioria dos ambientes de desenvolvimento (como o VSC por exemplo) também suportam RegEx nativamente, seja para buscar arquivos ou conteúdo dentro dos arquivos. Além de usar RegEx dentro de ferramentas, também é possível utilizá-lo em softwares usando linguagens de programação. Praticamente qualquer linguagem de programação suporta expressões regulares.

*Importante:* A estrutura de expressões regulares é escrita em uma linguagem formal única baseada na teoria de linguagens formais, que descrevem um conjunto de cadeia de caracteres e regras (Entende-se por linguagem formal estudo de modelos matemáticos que possibilitam a especificação e o reconhecimento de linguagens).

No entanto, a implementação dessa estrutura (RegEx) pode variar de linguagem para linguagem. Isso significa que, dependendo da linguagem de desenvolvimento utilizada, o jeito de estruturar um padrão RegEx em termos de sintaxe e recursos pode mudar.

*_Na prática, como fazemos para definir padrões com o RegEx no atributo pattern do HTML?_*

Toda expressão regular no pattern deve começar com o marcador " ^ " e terminar com o marcador " $ " (Esses marcadores de início e fim são chamados de âncoras).

De forma resumida, para definir padrões, as expressões regulares trabalham com algumas estruturas como: Classes de caracteres, Intervalos, Âncoras, Constructos de agrupamento e entre muitas outras estruturas...

Segue um exemplo de uso dessas estruturas mencionadas para especificar um padrão validador simples para números de telefone (inclusive telefone celular - Usaremos:

*Classes de caracteres:* Como estamos validando um telefone, precisamos especificar que só iremos aceitar caracteres numéricos (especificar uma classe de caractere). Para definir essa classe, abrimos e fechamos colchetes " [] " e dentro deles, definimos a classe desejada. Fica assim nesse caso: [0-9] - Dessa forma, estamos dizendo que só aceitamos números entre " 0 e 9 ".

*Intervalo:* Agora que determinamos a classe, temos que dizer quantos números iremos aceitar (intervalo) antes do traço " - ". Para definir esse intervalo, abrimos e fechamos chaves " {} " e dentro delas, definimos o intervalo desejado. Fica assim: {4, 5} - Dessa maneira, estamos dizendo que só aceitamos a entrada de " 4 a 5 " caracteres (5 para o caso dos celulares).

Agora, ainda no código da expressão regular, basta inserir um traço " - " depois do intervalo e especificar novamente uma classe numérica... Logo em seguida defina um outro intervalo, mas dessa vez apenas para quatro caracteres.

O resultado final fica assim: *^[0-9]{4, 5}-[0-9]{4}$*

No caso do nosso exemplo, criamos um padrão validador simples para números de telefone, entretanto é possível criar padrões com Expressões Regulares para todo tipo de dado, como por exemplo: Data, hora, endereço de IP, e-mail, URL, CPF, RG, cartão de crédito e por aí vai... Na internet também é possível encontrar esses padrões RegEx já montados, restando o trabalho de só copiar e colar nesses casos.

O atributo "pattern" é válido para os inputs do tipo text, password, tel, number, date, month, time, email e mais alguns outros...

*Importante:* Apesar desses padrões por RegEx no pattern aumentarem o nível de validação dos nossos campos de entrada, nenhum deles é suficiente para conseguir bloquear totalmente alguns tipos de dados inseridos da forma errada... Você pode usar o pattern, mas tenha em mente que essa validação de fato tem que ser feita usando uma linguagem de programação, como JS ou PHP por exemplo.

*Conclusão:*

O atributo pattern, quando especificado, é uma expressão regular à qual o valor da entrada na caixa input deve corresponder para que o "value" passe na validação de restrição.

Se o valor do componente de entrada não estiver em conformidade com as restrições definidas pelo valor de pattern (a expressão regular definida), a submissão do formulário não será executada.

[renatoorosco]

Grato pela aula, Mestre-Guananhoto :)

[WEBNAWEB]

Guanabara, sou seu fã, e hoje estudo programação, graças a sua facilidade na explicação, e o salve vai para vc mesmo que esta ficando cada vez mais com cabelos brancos!

[lucasvilasboas]

Professor voce tinha que viver pra sempre !!!

[na_panfletos_e_cartoes]

cara fala que não vamso aprender a fundo formulários já vi vídeos específicos de formulários que nehum ensina muita coisa que o Guanabara está ensinando o cara é fera

Estou fazendo também o curso de JS, e nesse momento to tentando criar uma validação de email no js e tbm validar nome e telefone falta um pouquinho ainda pra funcionar como deveria kkk

[elvessacapuri]

Sou um grande apreciador seu! Mas gostaria mesmo de saber se não tem como ter aulas presenciais contigo ou no seu centro de formação em Brasil. É que eu sou de Angola. Obrigado!

[SuportoVc]

Regex tem sintaxe universal ou cada tecnologia implementa de uma maneira diferente?