Tudo sobre estilização do HTML

Usar formulários em páginas da internet é uma funcionalidade muito aplicada, principalmente quando pensamos na interação entre os usuários e o web site. Os formulários enviam dados para um servidor e também podem ser usados para alguma funcionalidade da página.

Quando você interage de alguma forma com uma página, seja fazendo um login ou respondendo uma pesquisa ou questionário, você está experimentando uma interação através de um formulário HTML.

Se você usar apenas HTML, você vai conseguir criar um formulário, mas integrando com uma linguagem de programação como CSS ou JavaScript, você consegue estilizar esse formulário e tornar a sua exibição mais amigável.

O que será abordado neste artigo, vai permitir que você compreenda um pouco mais sobre essa ferramenta, a importância da sua utilização e como tornar esse formulário eficiente, amigável e útil. Ressaltamos que o uso da ferramenta de formulários não é uma funcionalidade básica, por isso é importante conhecer primeiro outras ferramentas HTML para então partir para esse módulo.

Os melhores professores de HTML disponíveis

5 (34 avaliações)

Elias

R$65

/h

1^a aula grátis!

5 (38 avaliações)

Eduardo

R$180

/h

1^a aula grátis!

5 (81 avaliações)

Alberto

R$50

/h

1^a aula grátis!

5 (65 avaliações)

Rafael

R$150

/h

1^a aula grátis!

5 (39 avaliações)

Tiago frança

R$60

/h

1^a aula grátis!

4,9 (17 avaliações)

Fred

R$55

/h

1^a aula grátis!

5 (13 avaliações)

Victor

R$80

/h

1^a aula grátis!

5 (12 avaliações)

Lucas

R$100

/h

1^a aula grátis!

5 (34 avaliações)

Elias

R$65

/h

1^a aula grátis!

5 (38 avaliações)

Eduardo

R$180

/h

1^a aula grátis!

5 (81 avaliações)

Alberto

R$50

/h

1^a aula grátis!

5 (65 avaliações)

Rafael

R$150

/h

1^a aula grátis!

5 (39 avaliações)

Tiago frança

R$60

/h

1^a aula grátis!

4,9 (17 avaliações)

Fred

R$55

/h

1^a aula grátis!

5 (13 avaliações)

Victor

R$80

/h

1^a aula grátis!

5 (12 avaliações)

Lucas

R$100

/h

1^a aula grátis!

Vamos lá

Estrutura básica de um formulário

Um formulário HTML é composto por um pelo menos um widget. Esses widgets podem ser campos de texto de uma ou várias linhas, menus selecionáveis, checkboxes ou radio buttons. Mais frequentemente, esses elementos são apresentados junto com uma legenda que explica o seu propósito.

Para começar a trabalhar em um formulário, você precisa de um editor de texto ou ainda um editor de código HTML e um navegador. Veja antes o básico de HTML para iniciantes.

Essa é a tag usada para definir o início de um formulário. Esse elemento vai conter todos os campos do formulário, que podem ser desde inputs de texto até caixas de seleção.

É importante também definir o atributo action ou method:

Falaremos com mais detalhes sobre esses atributos mais a frente. Escolha sempre o método apropriado e dê prioridade para o uso POST, que tem mais segurança no tráfego dos dados.

Ao adicionar os elementos de entrada você vai capturar dados do usuário como campos de texto, caixas de seleção, botões de rádio e outras funções. Esse é a parte principal de um formulário, pois é ele que permite que o usuário insira os dados que serão enviados e posteriormente manipulados.

Conheça ainda a lista completa de atributos para o elemento input, para criar formulários mais interativos e com mais semântica.

</h3><p class="wp-block-paragraph">Esse elemento fornece um controle de edição para uma caixa de texto, o que é útil, já que permite que os usuários entrem com um texto mais extenso em formato livre, como um comentário ou um formulário de <em>feedback</em>. Esse elemento aceita ainda alguns atributos como o autocomplete, disabeld, autofocus, required e outros.</p><h3 class="wp-block-heading"><button></h3><p class="wp-block-paragraph">Essa tag é usada para incluir um botão de envio, usado normalmente no fim dos formulários para que o usuário possa enviar os dados previamente coletados. É um botão clicável. O valores possíveis são:</p><ul class="wp-block-list"><li><strong>submit: </strong>botão para enviar os dados do formulário para o servidor</li><li><strong>reset: </strong>restaura os controles para os valores iniciais.</li><li><strong>button: </strong>não possui um comportamento padrão, podendo ser definido os scripts pela pessoa que está a desenvolver o site.</li></ul><p class="wp-block-paragraph">Exemplo mais comum: <input type="submit"></p><h2 id="Tópicos_tipos-de-entrada" class="chapter">Tipos de entrada </h2><p class="wp-block-paragraph">O atributo type define o tipo de elemento de entrada <input> a ser preenchido pelo usuário. É ele que vai indicar o tipo de dado permitido, se um número, uma data, um e-mail. Conheça mais <a href="https://www.superprof.com.br/blog/introducao-html-elementos-basicos/">elementos e tags base do HTML</a>. Os navegadores vão selecionar o widget e o comportamento apropriado para cada tipo. </p><figure class="wp-block-image size-full"><picture class="wp-image-182019"><source type="image/webp" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital.jpg.webp 1920w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-700x467.jpg.webp 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-980x654.jpg.webp 980w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-300x200.jpg.webp 300w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1536x1025.jpg.webp 1536w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-110x73.jpg.webp 110w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-220x147.jpg.webp 220w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-288x192.jpg.webp 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-576x384.jpg.webp 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-340x227.jpg.webp 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-680x454.jpg.webp 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-373x249.jpg.webp 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-746x498.jpg.webp 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-432x288.jpg.webp 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-864x576.jpg.webp 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-600x400.jpg.webp 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1200x801.jpg.webp 1200w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1400x934.jpg.webp 1400w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-973x649.jpg.webp 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1060x707.jpg.webp 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1128x753.jpg.webp 1128w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1729x1154.jpg.webp 1729w" sizes="(max-width: 1920px) 100vw, 1920px"><source type="image/jpg" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital.jpg 1920w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-700x467.jpg 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-980x654.jpg 980w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-300x200.jpg 300w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1536x1025.jpg 1536w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-110x73.jpg 110w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-220x147.jpg 220w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-288x192.jpg 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-576x384.jpg 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-340x227.jpg 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-680x454.jpg 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-373x249.jpg 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-746x498.jpg 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-432x288.jpg 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-864x576.jpg 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-600x400.jpg 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1200x801.jpg 1200w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1400x934.jpg 1400w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-973x649.jpg 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1060x707.jpg 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1128x753.jpg 1128w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1729x1154.jpg 1729w" sizes="(max-width: 1920px) 100vw, 1920px"><img src="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital.jpg" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital.jpg 1920w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-700x467.jpg 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-980x654.jpg 980w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-300x200.jpg 300w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1536x1025.jpg 1536w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-110x73.jpg 110w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-220x147.jpg 220w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-288x192.jpg 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-576x384.jpg 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-340x227.jpg 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-680x454.jpg 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-373x249.jpg 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-746x498.jpg 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-432x288.jpg 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-864x576.jpg 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-600x400.jpg 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1200x801.jpg 1200w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1400x934.jpg 1400w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-973x649.jpg 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1060x707.jpg 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1128x753.jpg 1128w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/formulario-papel-digital-1729x1154.jpg 1729w" alt="Homem preenchendo um formulário em papel" sizes="(max-width: 1920px) 100vw, 1920px"></picture><figcaption class="wp-element-caption">Que tal transformar seus formulários de papel em formulários digitais? Com HTML já é possível. | Imagem: Scott Graham - Unsplash</figcaption></figure><p class="wp-block-paragraph">Veja alguns exemplos de <em>type</em>:</p><h3 class="wp-block-heading">Text</h3><p class="wp-block-paragraph">type="text" é o campo usado para capturar uma única linha de texto. Muito usado para coletar dados como nome, sobrenome, endereço, cidade... </p><h3 class="wp-block-heading">Email</h3><p class="wp-block-paragraph">type="email" esse campo só pode ser enviado se estiver vazio ou se possuir um único endereço de e-mail válido. Se a pessoa digitar dois endereços de e-mail não vai conseguir submeter o formulário.</p><h3 class="wp-block-heading">Password</h3><p class="wp-block-paragraph">type="password" oculta os caracteres digitados pelo usuário. Você pode associar com o atributo maxlength para especificar o cumprimento máximo da senha a ser inserida.</p><h3 class="wp-block-heading">Radio</h3><p class="wp-block-paragraph">type="radio" oferece a opção de selecionar apenas uma opção dentro de uma lista. Deve usar o atributo value para determinar o valor a ser enviado por esse item. </p><h3 class="wp-block-heading">Checkbox</h3><p class="wp-block-paragraph">type="checkbox" oferece ao usuário a opção de selecionar mais de uma escolha dentro de um conjunto de opções. Assim como no tipo Radio, você deve usar o atributo value para definir o valor a ser enviado por esse item.</p><a href="/aulas/html/brasil/" class="teachers-cta-link" target="_blank"><div class="teachers-cta-wrapper" id="tracking-cta-teachers-2"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/sp-superprof-logo-pink.svg" class="sp-logo" alt="Superprof logo"><div class="sp-presentation">Os melhores professores de HTML disponíveis</div><div class="slider-wrapper"><div class="slider"><div class="slide-track teachers-cta-glider"><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/21094513/12192999/300/20261006152532/javascript-avancado-basico-projetos-reais-github-atualizado-2026-pego-sua-mao-front-end-back-end-fullstack.jpg 1x, https://c.superprof.com/i/a/21094513/12192999/600/20261006152532/javascript-avancado-basico-projetos-reais-github-atualizado-2026-pego-sua-mao-front-end-back-end-fullstack.jpg 2x" ><img src="https://c.superprof.com/i/a/21094513/12192999/300/20261006152532/javascript-avancado-basico-projetos-reais-github-atualizado-2026-pego-sua-mao-front-end-back-end-fullstack.jpg" alt="Elias"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (34 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Elias</div></div><div class="teacher-info-second-row"><div class="rates">R$65 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/4920959/15502306/300/20261006154019/consultoria-agentes-projetos-automacoes-engenheiro-com-formacao-internacional.jpg 1x, https://c.superprof.com/i/a/4920959/15502306/600/20261006154019/consultoria-agentes-projetos-automacoes-engenheiro-com-formacao-internacional.jpg 2x" ><img src="https://c.superprof.com/i/a/4920959/15502306/300/20261006154019/consultoria-agentes-projetos-automacoes-engenheiro-com-formacao-internacional.jpg" alt="Eduardo"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (38 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Eduardo</div></div><div class="teacher-info-second-row"><div class="rates">R$180 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/18952991/9301456/300/20261006154556/professor-informatica-desenvolvedor-full-stack-senior-transforme-sua-carreira-com-aulas-personalizadas-javascript.jpg 1x, https://c.superprof.com/i/a/18952991/9301456/600/20261006154556/professor-informatica-desenvolvedor-full-stack-senior-transforme-sua-carreira-com-aulas-personalizadas-javascript.jpg 2x" ><img src="https://c.superprof.com/i/a/18952991/9301456/300/20261006154556/professor-informatica-desenvolvedor-full-stack-senior-transforme-sua-carreira-com-aulas-personalizadas-javascript.jpg" alt="Alberto"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (81 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Alberto</div></div><div class="teacher-info-second-row"><div class="rates">R$50 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/3041659/3805734/300/20261006154120/aprenda-programacao-zero-como-dominar-para-criar-apps-lancando-apps-absoluto-zero-ajudo-conquistar-sua-vaga.jpg 1x, https://c.superprof.com/i/a/3041659/3805734/600/20261006154120/aprenda-programacao-zero-como-dominar-para-criar-apps-lancando-apps-absoluto-zero-ajudo-conquistar-sua-vaga.jpg 2x" ><img src="https://c.superprof.com/i/a/3041659/3805734/300/20261006154120/aprenda-programacao-zero-como-dominar-para-criar-apps-lancando-apps-absoluto-zero-ajudo-conquistar-sua-vaga.jpg" alt="Rafael"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (65 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Rafael</div></div><div class="teacher-info-second-row"><div class="rates">R$150 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/8495349/4411875/300/20261109114525/aulas-programacao-php-laravel-basico-avancado-sem-restricao-idade.jpg 1x, https://c.superprof.com/i/a/8495349/4411875/600/20261109114525/aulas-programacao-php-laravel-basico-avancado-sem-restricao-idade.jpg 2x" ><img src="https://c.superprof.com/i/a/8495349/4411875/300/20261109114525/aulas-programacao-php-laravel-basico-avancado-sem-restricao-idade.jpg" alt="Tiago frança"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (39 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Tiago frança</div></div><div class="teacher-info-second-row"><div class="rates">R$60 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/16249265/8258032/300/20261006181247/quiser-aprender-html-css-javascript-outras-tecnologias-chama-ajudo-vou-ensinar-tudo-precisa-independente.jpg 1x, https://c.superprof.com/i/a/16249265/8258032/600/20261006181247/quiser-aprender-html-css-javascript-outras-tecnologias-chama-ajudo-vou-ensinar-tudo-precisa-independente.jpg 2x" ><img src="https://c.superprof.com/i/a/16249265/8258032/300/20261006181247/quiser-aprender-html-css-javascript-outras-tecnologias-chama-ajudo-vou-ensinar-tudo-precisa-independente.jpg" alt="Fred"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="4,9"/><div class="ratings-note">4,9 (17 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Fred</div></div><div class="teacher-info-second-row"><div class="rates">R$55 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/8261064/6202753/300/20261006181716/aulas-desenvolvimento-web-programacao-com-professor-universitario-engenheiro-software-com-anos-experiencia.jpg 1x, https://c.superprof.com/i/a/8261064/6202753/600/20261006181716/aulas-desenvolvimento-web-programacao-com-professor-universitario-engenheiro-software-com-anos-experiencia.jpg 2x" ><img src="https://c.superprof.com/i/a/8261064/6202753/300/20261006181716/aulas-desenvolvimento-web-programacao-com-professor-universitario-engenheiro-software-com-anos-experiencia.jpg" alt="Victor"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (13 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Victor</div></div><div class="teacher-info-second-row"><div class="rates">R$80 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/10697999/9202547/300/20261006154156/desenvolvedor-ensinando-programacao-pratica-projetos-reais-com-foco-nas-exigencias-mercado.jpg 1x, https://c.superprof.com/i/a/10697999/9202547/600/20261006154156/desenvolvedor-ensinando-programacao-pratica-projetos-reais-com-foco-nas-exigencias-mercado.jpg 2x" ><img src="https://c.superprof.com/i/a/10697999/9202547/300/20261006154156/desenvolvedor-ensinando-programacao-pratica-projetos-reais-com-foco-nas-exigencias-mercado.jpg" alt="Lucas"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (12 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Lucas</div></div><div class="teacher-info-second-row"><div class="rates">R$100 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/21094513/12192999/300/20261006152532/javascript-avancado-basico-projetos-reais-github-atualizado-2026-pego-sua-mao-front-end-back-end-fullstack.jpg 1x, https://c.superprof.com/i/a/21094513/12192999/600/20261006152532/javascript-avancado-basico-projetos-reais-github-atualizado-2026-pego-sua-mao-front-end-back-end-fullstack.jpg 2x" ><img src="https://c.superprof.com/i/a/21094513/12192999/300/20261006152532/javascript-avancado-basico-projetos-reais-github-atualizado-2026-pego-sua-mao-front-end-back-end-fullstack.jpg" alt="Elias"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (34 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Elias</div></div><div class="teacher-info-second-row"><div class="rates">R$65 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/4920959/15502306/300/20261006154019/consultoria-agentes-projetos-automacoes-engenheiro-com-formacao-internacional.jpg 1x, https://c.superprof.com/i/a/4920959/15502306/600/20261006154019/consultoria-agentes-projetos-automacoes-engenheiro-com-formacao-internacional.jpg 2x" ><img src="https://c.superprof.com/i/a/4920959/15502306/300/20261006154019/consultoria-agentes-projetos-automacoes-engenheiro-com-formacao-internacional.jpg" alt="Eduardo"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (38 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Eduardo</div></div><div class="teacher-info-second-row"><div class="rates">R$180 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/18952991/9301456/300/20261006154556/professor-informatica-desenvolvedor-full-stack-senior-transforme-sua-carreira-com-aulas-personalizadas-javascript.jpg 1x, https://c.superprof.com/i/a/18952991/9301456/600/20261006154556/professor-informatica-desenvolvedor-full-stack-senior-transforme-sua-carreira-com-aulas-personalizadas-javascript.jpg 2x" ><img src="https://c.superprof.com/i/a/18952991/9301456/300/20261006154556/professor-informatica-desenvolvedor-full-stack-senior-transforme-sua-carreira-com-aulas-personalizadas-javascript.jpg" alt="Alberto"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (81 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Alberto</div></div><div class="teacher-info-second-row"><div class="rates">R$50 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/3041659/3805734/300/20261006154120/aprenda-programacao-zero-como-dominar-para-criar-apps-lancando-apps-absoluto-zero-ajudo-conquistar-sua-vaga.jpg 1x, https://c.superprof.com/i/a/3041659/3805734/600/20261006154120/aprenda-programacao-zero-como-dominar-para-criar-apps-lancando-apps-absoluto-zero-ajudo-conquistar-sua-vaga.jpg 2x" ><img src="https://c.superprof.com/i/a/3041659/3805734/300/20261006154120/aprenda-programacao-zero-como-dominar-para-criar-apps-lancando-apps-absoluto-zero-ajudo-conquistar-sua-vaga.jpg" alt="Rafael"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (65 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Rafael</div></div><div class="teacher-info-second-row"><div class="rates">R$150 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/8495349/4411875/300/20261109114525/aulas-programacao-php-laravel-basico-avancado-sem-restricao-idade.jpg 1x, https://c.superprof.com/i/a/8495349/4411875/600/20261109114525/aulas-programacao-php-laravel-basico-avancado-sem-restricao-idade.jpg 2x" ><img src="https://c.superprof.com/i/a/8495349/4411875/300/20261109114525/aulas-programacao-php-laravel-basico-avancado-sem-restricao-idade.jpg" alt="Tiago frança"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (39 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Tiago frança</div></div><div class="teacher-info-second-row"><div class="rates">R$60 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/16249265/8258032/300/20261006181247/quiser-aprender-html-css-javascript-outras-tecnologias-chama-ajudo-vou-ensinar-tudo-precisa-independente.jpg 1x, https://c.superprof.com/i/a/16249265/8258032/600/20261006181247/quiser-aprender-html-css-javascript-outras-tecnologias-chama-ajudo-vou-ensinar-tudo-precisa-independente.jpg 2x" ><img src="https://c.superprof.com/i/a/16249265/8258032/300/20261006181247/quiser-aprender-html-css-javascript-outras-tecnologias-chama-ajudo-vou-ensinar-tudo-precisa-independente.jpg" alt="Fred"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="4,9"/><div class="ratings-note">4,9 (17 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Fred</div></div><div class="teacher-info-second-row"><div class="rates">R$55 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/8261064/6202753/300/20261006181716/aulas-desenvolvimento-web-programacao-com-professor-universitario-engenheiro-software-com-anos-experiencia.jpg 1x, https://c.superprof.com/i/a/8261064/6202753/600/20261006181716/aulas-desenvolvimento-web-programacao-com-professor-universitario-engenheiro-software-com-anos-experiencia.jpg 2x" ><img src="https://c.superprof.com/i/a/8261064/6202753/300/20261006181716/aulas-desenvolvimento-web-programacao-com-professor-universitario-engenheiro-software-com-anos-experiencia.jpg" alt="Victor"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (13 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Victor</div></div><div class="teacher-info-second-row"><div class="rates">R$80 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div><div class="teacher-slide slide"><div class="teacher-photo" data-responsive-background-image><picture><source srcset="https://c.superprof.com/i/a/10697999/9202547/300/20261006154156/desenvolvedor-ensinando-programacao-pratica-projetos-reais-com-foco-nas-exigencias-mercado.jpg 1x, https://c.superprof.com/i/a/10697999/9202547/600/20261006154156/desenvolvedor-ensinando-programacao-pratica-projetos-reais-com-foco-nas-exigencias-mercado.jpg 2x" ><img src="https://c.superprof.com/i/a/10697999/9202547/300/20261006154156/desenvolvedor-ensinando-programacao-pratica-projetos-reais-com-foco-nas-exigencias-mercado.jpg" alt="Lucas"/></picture></div><div class="teacher-info-wrapper"><div class="ratings"><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/star.svg" class="ratings-star" alt="5"/><div class="ratings-note">5 (12 avaliações)</div> </div><div class="teacher-info-first-row"><div class="name">Lucas</div></div><div class="teacher-info-second-row"><div class="rates">R$100 <div class="rates-unit">/h</div></div><img src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/gift-pink.svg" class="gift-icon" alt="Gift icon"/><div class="first-class">1^a aula grátis!</div></div></div></div></div></div></div><div class="teachers-cta-button">Vamos lá</div></div></a><h2 id="Tópicos_atributos-importantes" class="chapter">Atributos importantes </h2><p class="wp-block-paragraph">Em uma tag <form> é preciso definir os seguintes atributos: action ou method. O primeiro é essencial para definir o destino dos dados, que geralmente é um script no servidor, e o segundo define o método de envio dos dados. Entenda melhor cada um desses atributos a seguir.</p><h3 class="wp-block-heading">Action</h3><p class="wp-block-paragraph">Ao definir o atributo action na tag <form> você estará especificando o destino dos dados desse formulário. Esse atributo define, através de uma URL, o local para ao qual os dados recolhidos em um formulário serão enviados. Na maioria dos casos, a finalidade principal de um formulário é enviar dados para um servidor.</p><p class="wp-block-paragraph">O servidor processa os dados e envia então uma resposta para o usuário. Pode parecer simples, mas isso envolve algumas questões bem importantes. A primeira delas é que o valor do atributo action precisa ser uma URL válida.</p><div class="wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-center advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4"><div class="advgb-infobox-wrap"><div class="advgb-infobox-icon-container"><div class="advgb-infobox-icon-inner-container"><i class="material-icons-outlined">important_devices</i></div></div><div class="advgb-infobox-textcontent"><div class="advgb-infobox-title"><strong>Nota importante:</strong></div><p class="advgb-infobox-text">Você pode especificar uma URL que use HTTP seguro, em que os dados serão criptografados, mas lembre-se que se especificar uma URL não segura os navegadores vão exibir um alerta de segurança para o usuário.</p></div></div></div><h3 class="wp-block-heading">Method</h3><p class="wp-block-paragraph">Este atributo é o que vai definir o método em que esses dados serão enviados. Os dados coletados em um formulário HTML pode ser enviado através de dois métodos, GET ou POST.</p><p class="wp-block-paragraph">O método GET é o método padrão de envio, mas não deve ser usado para coletar dados sensíveis. O navegador pode pedir ao servidor para enviar de volta um recurso específico usando esse método: "Hey servidor, eu quero obter este recurso.". Neste caso, o navegador envia um objeto sem conteúdo.</p><p class="wp-block-paragraph">Já o método POST é um pouco diferente. Aqui o navegador envia para o servidor um pedido de resposta que leva em conta o que foi preenchido pelo usuário. Algo tipo: "Hey servidor, eu quero que você olhe esses dados e me envie de volta os resultados." Sempre que for enviar dados sensíveis ou um conteúdo grande, dê prioridade para o uso do método POST.</p><h3 class="wp-block-heading">Name</h3><p class="wp-block-paragraph">O atributo name é o nome do controle, que é enviado junto com os dados do formulário. Esse campo é importante para que você consiga identificar o campo enviado pelo usuário. Por isso, descreva um nome que te leve a identificar rapidamente aquele dado.</p><h3 class="wp-block-heading">Placeholder </h3><p class="wp-block-paragraph">Esse atributo é usado para dar uma dica ao usuário do que ele deve inserir no campo, por exemplo: "Digite aqui seu endereço completo com CEP". É aplicável apenas quando o type é text, search, tel, url ou email.</p><p class="wp-block-paragraph">Usar esse atributo fará quem que o usuário compreenda melhor qual informação ele precisa inserir naquele campo específico do formulário.</p><h2 id="Tópicos_estilizacao-de-formularios-com-css" class="chapter">Estilização de formulários com CSS</h2><p class="wp-block-paragraph">Criar um formulário apenas em HTML vai atingir o objetivo? Sim. Esse formulário vai ser bonito? Não. Isso porque o HTML não permite adicionar campos de personalização da aparência. Para isso, use o CSS para personalizar cores, fontes, bordas, espaçamentos.</p><p class="wp-block-paragraph">Com o CSS você também pode criar seletores específicos para cada elemento do formulário e ainda definir as propriedades desejadas para cada seletor.</p><p class="wp-block-paragraph">O CSS é uma linguagem de programação, diferente do HTML que é uma linguagem de marcação. Então para partir para esse ponto, é preciso ter algum conhecimento prévio de programação básica. </p><figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube"><div class="wp-block-embed__wrapper"><div class="responsive-video"><iframe title="Curso de Html5 e Css3 - 27 - Estilizando formulários Html com Css" width="500" height="281" src="https://www.youtube.com/embed/mk4C7BvSTk8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div><figcaption class="wp-element-caption">Veja mais como estilizar um formulário com CSS nessa aula sequencial da anterior, disponível no Canal Dica do Nerd.</figcaption></figure><p class="wp-block-paragraph">Os elementos HTML são organizados em uma ordem, e você vai usar uma classe CSS para selecionar e alterar a aparência de cada elemento. Além de estilizar a aparência de cada um dos componentes do formulário HTML, é possível alterar outros elementos, como erros, avisos e campos de validação. </p><p class="wp-block-paragraph">Para aprender mais sobre como otimizar e estilizar o seu formulário HTML com o CSS, agende uma aula particular de programação com um Superprof.</p><h2 id="Tópicos_validacao-de-formularios-basica-e-html5" class="chapter">Validação de formulários (básica e HTML5)</h2><p class="wp-block-paragraph">O <a href="https://www.superprof.com.br/blog/novas-funcionalidades-html5/">HTML5 trouxe algumas novidades</a> e uma dessas novidades é a possibilidade de <strong>validar formulários no client-side</strong>, sem a necessidade de utilizar o Javascript para isso. Isso permite que o desenvolvedor ganhe bastante tempo.</p><p class="wp-block-paragraph">A validação de um formulário garante que os usuários preencham todos os dados no formato correto, garantindo que depois esses dados funcionem nos aplicativos.</p><p class="wp-block-paragraph">São aquelas famosas <strong>mensagens de alerta</strong> apresentadas quando preenchemos algum dados errado em algum formulário. Por exemplo: "Por favor, insira um endereço de e-mail válido" quando a sua entrada for algo diferente do formato padrão de um e-mail (email@email.com).</p><figure class="wp-block-image size-full"><picture class="wp-image-182023"><source type="image/webp" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html.jpg.webp 1855w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-700x250.jpg.webp 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-980x350.jpg.webp 980w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-300x107.jpg.webp 300w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1536x548.jpg.webp 1536w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-110x39.jpg.webp 110w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-220x79.jpg.webp 220w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-288x103.jpg.webp 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-576x206.jpg.webp 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-340x121.jpg.webp 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-680x243.jpg.webp 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-373x133.jpg.webp 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-746x266.jpg.webp 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-432x154.jpg.webp 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-864x308.jpg.webp 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-600x214.jpg.webp 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1200x428.jpg.webp 1200w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1400x500.jpg.webp 1400w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-973x347.jpg.webp 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1060x378.jpg.webp 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1128x403.jpg.webp 1128w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1729x617.jpg.webp 1729w" sizes="(max-width: 1855px) 100vw, 1855px"><source type="image/jpg" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html.jpg 1855w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-700x250.jpg 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-980x350.jpg 980w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-300x107.jpg 300w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1536x548.jpg 1536w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-110x39.jpg 110w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-220x79.jpg 220w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-288x103.jpg 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-576x206.jpg 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-340x121.jpg 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-680x243.jpg 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-373x133.jpg 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-746x266.jpg 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-432x154.jpg 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-864x308.jpg 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-600x214.jpg 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1200x428.jpg 1200w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1400x500.jpg 1400w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-973x347.jpg 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1060x378.jpg 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1128x403.jpg 1128w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1729x617.jpg 1729w" sizes="(max-width: 1855px) 100vw, 1855px"><img src="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html.jpg" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html.jpg 1855w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-700x250.jpg 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-980x350.jpg 980w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-300x107.jpg 300w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1536x548.jpg 1536w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-110x39.jpg 110w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-220x79.jpg 220w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-288x103.jpg 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-576x206.jpg 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-340x121.jpg 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-680x243.jpg 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-373x133.jpg 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-746x266.jpg 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-432x154.jpg 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-864x308.jpg 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-600x214.jpg 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1200x428.jpg 1200w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1400x500.jpg 1400w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-973x347.jpg 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1060x378.jpg 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1128x403.jpg 1128w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2024/06/validar-formulario-html-1729x617.jpg 1729w" alt="Página de comentários da página da Superprof com uma mensagem de erro na validação do email." sizes="(max-width: 1855px) 100vw, 1855px"></picture><figcaption class="wp-element-caption">Exemplo de uma mensagem de validação de um formulário. | Imagem: reprodução blog Superprof</figcaption></figure><p class="wp-block-paragraph">A <strong>vantagem do HTML 5</strong> é que ele já permite essa validação sem necessidade de usar outra linguagem de programação. Isso é feito através do uso de atributos de validação nos elementos do formulário, permitindo especificar as regras para a entrada de dados e o padrão que aquele campo deve corresponder (se um número, um texto com no mínimo X caracteres, um endereço de e-mail...). Quando algum desses elementos for inválido, o navegador bloqueará o envio do formulário e exibirá uma mensagem de erro.</p><p class="wp-block-paragraph">Essa validação no HTML5 só é possível devido a novos atributos da tag <input>, são eles: <em>type</em>, <em>pattern</em> e <em>require</em>.</p><div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex"><div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><p class="wp-block-paragraph"><strong>Type:</strong> indica como os dados serão tratados.</p></div><div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><p class="wp-block-paragraph"><strong>Pattern:</strong> usa de expressões regulares para definir como o campo deve ser preenchido.</p></div><div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><p class="wp-block-paragraph"><strong>Require: </strong>indica a obrigatoriedade do preenchimento do campo.</p></div></div><p class="wp-block-paragraph">Se você ainda tem dúvidas sobre formulários HTML e todo o seu potencial de uso, que tal agendar uma aula particular de programação com um dos nossos professores. A Superprof pode te ajudar na busca pelo professor ideal para o seu objetivo.</p><h4 class="wp-block-heading">Nota de rodapé:</h4><ol class="wp-block-footnotes"><li id="70d6b89c-de5d-4dba-a432-55ccf0dec50b">GET: método padrão para envio de dados não sensíveis. Anexa os dados do formulário URL em pares e você consegue ver no navegador na barra de endereços. <a href="#70d6b89c-de5d-4dba-a432-55ccf0dec50b-link" aria-label="Ir para a referência 1 na nota de rodapé">↩︎</a></li><li id="91959c87-b924-42c5-bb58-6a00a7fa0e1a">POST: método mais adequado para envio de dados sensíveis, pois envia os dados como parte do corpo da solicitação HRRP. Não há limites para a extensão dos dados. <a href="#91959c87-b924-42c5-bb58-6a00a7fa0e1a-link" aria-label="Ir para a referência 2 na nota de rodapé">↩︎</a></li></ol><style class="advgb-styles-renderer">#advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4, .advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 {background-color: #e8f2ff;padding: 20px 20px 20px 20px;border: 0px solid #e8f2ff;border-radius: 0px;}#advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-icon-container, .advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-icon-container {background-color: #e8f2ff;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-icon-container i, .advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-icon-container i {color: #157dfe;font-size: 70px;display: block;}#advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-b9b4614a-90dc-4b0a-8c64-0acb51abf1a4 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}</style> </div> <div class="ai-summarize-mobile"> <div class="ai-summarize-wrapper"> <p class="ai-summarize-title">Resumir com IA:</p> <div class="ai-buttons-container"> <button class="ai-button" data-tool="chatgpt" aria-label="Resumir com ChatGPT" data-tooltip="Resumir com ChatGPT"> <span class="button-icon"> <svg width="100%" style="" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M 26.921875 11.871094 C 27.578125 9.894531 27.351562 7.730469 26.300781 5.933594 C 24.71875 3.179688 21.535156 1.761719 18.429688 2.429688 C 17.046875 0.871094 15.0625 -0.0117188 12.980469 0 C 9.804688 -0.0078125 6.988281 2.039062 6.011719 5.058594 C 3.972656 5.476562 2.210938 6.753906 1.179688 8.5625 C -0.414062 11.3125 -0.0507812 14.773438 2.078125 17.128906 C 1.421875 19.105469 1.648438 21.269531 2.699219 23.066406 C 4.28125 25.820312 7.464844 27.238281 10.570312 26.570312 C 11.949219 28.128906 13.9375 29.011719 16.019531 29 C 19.195312 29.007812 22.015625 26.960938 22.992188 23.9375 C 25.03125 23.519531 26.792969 22.242188 27.824219 20.433594 C 29.414062 17.683594 29.050781 14.222656 26.921875 11.867188 Z M 16.019531 27.105469 C 14.75 27.105469 13.519531 26.660156 12.542969 25.847656 C 12.585938 25.824219 12.664062 25.78125 12.710938 25.75 L 18.488281 22.414062 C 18.78125 22.246094 18.964844 21.933594 18.960938 21.59375 L 18.960938 13.453125 L 21.402344 14.859375 C 21.429688 14.875 21.445312 14.898438 21.449219 14.929688 L 21.449219 21.667969 C 21.445312 24.667969 19.019531 27.097656 16.019531 27.105469 Z M 4.34375 22.117188 C 3.707031 21.015625 3.476562 19.726562 3.695312 18.476562 C 3.738281 18.5 3.8125 18.546875 3.867188 18.578125 L 9.640625 21.914062 C 9.933594 22.085938 10.296875 22.085938 10.589844 21.914062 L 17.640625 17.84375 L 17.640625 20.660156 C 17.644531 20.691406 17.628906 20.71875 17.605469 20.734375 L 11.769531 24.105469 C 9.167969 25.601562 5.847656 24.714844 4.34375 22.117188 Z M 2.824219 9.511719 C 3.460938 8.410156 4.460938 7.566406 5.652344 7.128906 C 5.652344 7.179688 5.652344 7.265625 5.652344 7.328125 L 5.652344 14 C 5.648438 14.339844 5.828125 14.652344 6.125 14.820312 L 13.175781 18.890625 L 10.734375 20.300781 C 10.710938 20.316406 10.679688 20.320312 10.652344 20.308594 L 4.8125 16.933594 C 2.21875 15.429688 1.328125 12.113281 2.824219 9.511719 Z M 22.875 14.179688 L 15.828125 10.105469 L 18.265625 8.699219 C 18.292969 8.683594 18.324219 8.679688 18.351562 8.691406 L 24.1875 12.0625 C 26.785156 13.5625 27.679688 16.890625 26.175781 19.488281 C 25.539062 20.589844 24.539062 21.429688 23.347656 21.871094 L 23.347656 15 C 23.351562 14.660156 23.171875 14.347656 22.878906 14.179688 Z M 25.304688 10.523438 C 25.261719 10.496094 25.1875 10.449219 25.132812 10.421875 L 19.359375 7.085938 C 19.066406 6.914062 18.703125 6.914062 18.410156 7.085938 L 11.359375 11.15625 L 11.359375 8.335938 C 11.359375 8.308594 11.371094 8.28125 11.394531 8.261719 L 17.230469 4.894531 C 19.832031 3.394531 23.15625 4.289062 24.65625 6.886719 C 25.289062 7.988281 25.519531 9.273438 25.304688 10.523438 Z M 10.035156 15.546875 L 7.59375 14.136719 C 7.566406 14.125 7.550781 14.097656 7.546875 14.070312 L 7.546875 7.328125 C 7.546875 4.328125 9.980469 1.894531 12.984375 1.894531 C 14.253906 1.894531 15.480469 2.339844 16.457031 3.152344 C 16.414062 3.175781 16.335938 3.21875 16.289062 3.25 L 10.511719 6.585938 C 10.21875 6.753906 10.035156 7.066406 10.039062 7.40625 L 10.035156 15.542969 Z M 11.359375 12.6875 L 14.5 10.875 L 17.640625 12.6875 L 17.640625 16.3125 L 14.5 18.125 L 11.359375 16.3125 Z M 11.359375 12.6875 " fill="currentColor"/> </svg> </span> </button> <button class="ai-button" data-tool="claude" aria-label="Resumir com Claude" data-tooltip="Resumir com Claude"> <span class="button-icon"> <svg width="100%" style="" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M 5.691406 19.21875 L 11.394531 16.03125 L 11.488281 15.753906 L 11.394531 15.597656 L 11.117188 15.597656 L 10.160156 15.539062 L 6.902344 15.453125 L 4.074219 15.335938 L 1.335938 15.191406 L 0.644531 15.042969 L 0 14.195312 L 0.0664062 13.769531 L 0.644531 13.382812 L 1.476562 13.457031 L 3.3125 13.582031 L 6.0625 13.769531 L 8.0625 13.886719 L 11.019531 14.195312 L 11.488281 14.195312 L 11.554688 14.003906 L 11.394531 13.886719 L 11.269531 13.769531 L 8.421875 11.847656 L 5.335938 9.8125 L 3.722656 8.644531 L 2.847656 8.050781 L 2.40625 7.496094 L 2.21875 6.28125 L 3.011719 5.410156 L 4.074219 5.484375 L 4.347656 5.558594 L 5.425781 6.382812 L 7.730469 8.160156 L 10.742188 10.371094 L 11.179688 10.734375 L 11.359375 10.613281 L 11.378906 10.523438 L 11.179688 10.195312 L 9.542969 7.246094 L 7.796875 4.25 L 7.019531 3.003906 L 6.8125 2.261719 C 6.738281 1.953125 6.6875 1.695312 6.6875 1.382812 L 7.589844 0.160156 L 8.089844 0 L 9.292969 0.160156 L 9.800781 0.601562 L 10.550781 2.304688 L 11.761719 4.988281 L 13.640625 8.636719 L 14.191406 9.71875 L 14.484375 10.722656 L 14.59375 11.027344 L 14.785156 11.027344 L 14.785156 10.851562 L 14.941406 8.796875 L 15.226562 6.273438 L 15.503906 3.027344 L 15.601562 2.113281 L 16.054688 1.015625 L 16.960938 0.425781 L 17.664062 0.761719 L 18.246094 1.585938 L 18.164062 2.121094 L 17.820312 4.351562 L 17.144531 7.847656 L 16.703125 10.1875 L 16.960938 10.1875 L 17.253906 9.894531 L 18.441406 8.324219 L 20.4375 5.835938 L 21.320312 4.847656 L 22.347656 3.757812 L 23.007812 3.238281 L 24.257812 3.238281 L 25.175781 4.601562 L 24.765625 6.003906 L 23.480469 7.628906 L 22.414062 9.003906 L 20.886719 11.050781 L 19.933594 12.6875 L 20.019531 12.820312 L 20.25 12.796875 L 23.699219 12.066406 L 25.5625 11.730469 L 27.789062 11.351562 L 28.792969 11.816406 L 28.90625 12.292969 L 28.507812 13.265625 L 26.128906 13.851562 L 23.339844 14.40625 L 19.183594 15.386719 L 19.132812 15.421875 L 19.191406 15.496094 L 21.0625 15.671875 L 21.863281 15.714844 L 23.824219 15.714844 L 27.472656 15.988281 L 28.425781 16.617188 L 29 17.382812 L 28.90625 17.96875 L 27.4375 18.714844 L 25.453125 18.246094 L 20.828125 17.148438 L 19.242188 16.753906 L 19.023438 16.753906 L 19.023438 16.886719 L 20.34375 18.171875 L 22.765625 20.351562 L 25.800781 23.160156 L 25.953125 23.855469 L 25.5625 24.402344 L 25.152344 24.34375 L 22.488281 22.347656 L 21.460938 21.449219 L 19.132812 19.496094 L 18.976562 19.496094 L 18.976562 19.703125 L 19.515625 20.484375 L 22.347656 24.726562 L 22.496094 26.027344 L 22.289062 26.453125 L 21.554688 26.707031 L 20.746094 26.5625 L 19.089844 24.242188 L 17.378906 21.632812 L 15.996094 19.292969 L 15.828125 19.386719 L 15.015625 28.125 L 14.632812 28.574219 L 13.75 28.910156 L 13.015625 28.351562 L 12.628906 27.453125 L 13.015625 25.675781 L 13.488281 23.359375 L 13.867188 21.515625 L 14.214844 19.226562 L 14.417969 18.464844 L 14.40625 18.414062 L 14.234375 18.4375 L 12.503906 20.804688 L 9.867188 24.351562 L 7.78125 26.578125 L 7.28125 26.773438 L 6.417969 26.328125 L 6.496094 25.53125 L 6.980469 24.820312 L 9.867188 21.164062 L 11.605469 18.898438 L 12.730469 17.589844 L 12.722656 17.398438 L 12.65625 17.398438 L 4.992188 22.355469 L 3.625 22.53125 L 3.039062 21.984375 L 3.113281 21.085938 L 3.390625 20.792969 L 5.695312 19.210938 Z M 5.691406 19.21875" fill="currentColor"/> </svg> </span> </button> <button class="ai-button" data-tool="gemini" aria-label="Resumir com Gemini" data-tooltip="Resumir com Gemini"> <span class="button-icon"> <svg width="100%" style="" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M28.0344 14.6495C24.4936 14.8668 21.1544 16.3714 18.6459 18.8798C16.1375 21.3883 14.6329 24.7274 14.4156 28.2683H14.361C14.1441 24.7273 12.6396 21.3879 10.1311 18.8794C7.62252 16.3709 4.28315 14.8664 0.742188 14.6495L0.742188 14.5949C4.28315 14.378 7.62252 12.8735 10.1311 10.3649C12.6396 7.85641 14.1441 4.51704 14.361 0.976074L14.4156 0.976074C14.6329 4.51691 16.1375 7.85607 18.6459 10.3645C21.1544 12.873 24.4936 14.3776 28.0344 14.5949V14.6495Z" fill="currentColor"></path> </svg> </span> </button> <button class="ai-button" data-tool="grok" aria-label="Resumir com Grok" data-tooltip="Resumir com Grok"> <span class="button-icon"> <svg width="100%" style="" viewBox="0 0 58 56" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.9648 12.9502C21.1997 6.68496 30.3828 5.10525 38.0527 8.2793C39.7494 8.91308 41.2281 9.8148 42.3818 10.6533L35.9775 13.6279C30.0142 11.1121 23.1832 12.8235 19.0137 17.0166C13.4631 22.5936 12.2721 32.2006 18.54 38.5547L18.8389 38.8594L0.797852 55.0664C1.94204 53.4818 3.36261 51.984 4.77832 50.4873C8.77331 46.2649 12.7396 42.0821 10.3203 36.168C7.08169 28.2548 8.9677 18.9814 14.9648 12.9502ZM57.1934 0.868164C51.2544 9.0931 48.3555 13.1156 50.6826 23.1787L50.668 23.1641C52.2728 30.0143 50.5563 37.6106 45.0146 43.1836C38.0283 50.2142 26.8485 51.7795 17.6416 45.4512L24.0605 42.4619C29.9366 44.7827 36.365 43.7635 40.9854 39.1172C45.6059 34.4707 46.6435 27.7036 44.3213 22.0723C43.88 21.0044 42.5569 20.7364 41.6309 21.4238L22.7373 35.4512L49.7998 8.11328V8.1377L57.6152 0.277344C57.4746 0.477246 57.3338 0.673138 57.1934 0.868164Z" fill="currentColor"></path> </svg> </span> </button> <button class="ai-button" data-tool="perplexity" aria-label="Resumir com Perplexity" data-tooltip="Resumir com Perplexity"> <span class="button-icon"> <svg width="100%" style="" viewBox="0 0 27 31" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.91564 0.212311L12.4152 8.04339V8.04159V0.230381H14.0697V8.07843L22.6074 0.212311V9.1409H26.1126V22.0196H22.6181V29.97L14.0697 22.4596V30.0563H12.4152V22.5835L3.92527 30.0612V22.0196H0.419922V9.1409H3.91564V0.212311ZM11.1679 10.7752H2.07445V20.3852H3.9232V17.3539L11.1679 10.7752ZM5.57971 18.079V26.4143L12.4152 20.3938V11.8705L5.57971 18.079ZM14.1173 20.3142V11.8624L20.9548 18.0714V22.0196H20.9636V26.3292L14.1173 20.3142ZM22.6181 20.3852H24.4581V10.7752H15.4324L22.6181 17.2858V20.3852ZM20.9528 9.1409V3.9716L15.3422 9.1409H20.9528ZM11.1807 9.1409H5.57017V3.9716L11.1807 9.1409Z" fill="currentColor"></path> </svg> </span> </button> </div> </div></div> <div class="ratings-and-author-wrapper"> <div class="ratings-wrapper "> <p class="title"> <span class="first-part">Você curtiu esse artigo?</span> <span class="second-part">Deixe uma nota!</span> </p> <div class="wp-postratings-wrapper"><div id="post-ratings-181986" class="post-ratings" data-nonce="8ff6f8f912"><img id="rating_181986_1" src="https://www.superprof.com.br/blog/wp-content/plugins/wp-postratings/images/stars_svg/rating_on.svg" alt="" title="" onmouseover="current_rating(181986, 1, 'Aucune information ? Sérieusement ?');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_181986_2" src="https://www.superprof.com.br/blog/wp-content/plugins/wp-postratings/images/stars_svg/rating_on.svg" alt="" title="" onmouseover="current_rating(181986, 2, 'Ok, nous tacherons de faire mieux pour le prochain');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_181986_3" src="https://www.superprof.com.br/blog/wp-content/plugins/wp-postratings/images/stars_svg/rating_on.svg" alt="" title="" onmouseover="current_rating(181986, 3, 'La moyenne, ouf ! Pas mieux ?');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_181986_4" src="https://www.superprof.com.br/blog/wp-content/plugins/wp-postratings/images/stars_svg/rating_on.svg" alt="" title="" onmouseover="current_rating(181986, 4, 'Merci. Posez vos questions dans les commentaires.');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_181986_5" src="https://www.superprof.com.br/blog/wp-content/plugins/wp-postratings/images/stars_svg/rating_on.svg" alt="" title="" onmouseover="current_rating(181986, 5, 'Un plaisir de vous aider ! :)');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /> <span class="ratings-text">5,00 <span class="number-votes">(1 note(s))</span></span></div><div id="post-ratings-181986-loading" class="post-ratings-loading"><img src="https://www.superprof.com.br/blog/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" />Loading...</div></div> </div> <div class="author-wrapper-container"> <div class="author-wrapper"> <div class="author-avatar" data-responsive-background-image> <picture><source type="image/webp" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha.jpeg.webp 1152w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-281x500.jpeg.webp 281w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-394x700.jpeg.webp 394w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-113x200.jpeg.webp 113w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-864x1536.jpeg.webp 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-62x110.jpeg.webp 62w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-124x220.jpeg.webp 124w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-288x512.jpeg.webp 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-576x1024.jpeg.webp 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-340x604.jpeg.webp 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-680x1209.jpeg.webp 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-373x663.jpeg.webp 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-746x1326.jpeg.webp 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-432x768.jpeg.webp 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-600x1067.jpeg.webp 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-700x1244.jpeg.webp 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-973x1730.jpeg.webp 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-1060x1884.jpeg.webp 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-1128x2005.jpeg.webp 1128w"><source type="image/jpeg" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha.jpeg 1152w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-281x500.jpeg 281w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-394x700.jpeg 394w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-113x200.jpeg 113w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-864x1536.jpeg 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-62x110.jpeg 62w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-124x220.jpeg 124w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-288x512.jpeg 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-576x1024.jpeg 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-340x604.jpeg 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-680x1209.jpeg 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-373x663.jpeg 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-746x1326.jpeg 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-432x768.jpeg 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-600x1067.jpeg 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-700x1244.jpeg 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-973x1730.jpeg 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-1060x1884.jpeg 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-1128x2005.jpeg 1128w"><img src="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha.jpeg" srcset="https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha.jpeg 1152w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-281x500.jpeg 281w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-394x700.jpeg 394w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-113x200.jpeg 113w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-864x1536.jpeg 864w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-62x110.jpeg 62w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-124x220.jpeg 124w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-288x512.jpeg 288w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-576x1024.jpeg 576w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-340x604.jpeg 340w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-680x1209.jpeg 680w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-373x663.jpeg 373w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-746x1326.jpeg 746w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-432x768.jpeg 432w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-600x1067.jpeg 600w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-700x1244.jpeg 700w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-973x1730.jpeg 973w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-1060x1884.jpeg 1060w, https://cdn-blog.superprof.com/blog_br/wp-content/uploads/2025/01/camila-cunha-1128x2005.jpeg 1128w" alt="Foto Camila"></picture> </div> <p class="author-name">Camila Reis</p> <p class="author-description">Administradora, Mestre em Economia e Gestão da Inovação, mineira, mãe. Apaixonada por viagens e pela vida, me arrisco na cozinha, amo ler, conhecer pessoas e passear em dias frios com sol.</p> </div> </div> </div> </div> <div class="main-comments-wrapper"> <div class="comments-wrapper"> <div class="comments-inner"> <img class="illu-drawer" src="https://cdn-blog.superprof.com/blog_all/wp-content/themes/sp_blog/dist/images/drawer.svg" alt=">"> <div class="h2">Deixe um comentário</div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> <small><a href="https://www.superprof.com.br/blog/elabore-formulario-html/#respond" rel="nofollow" id="cancel-comment-reply-link" style="display:none;">Cancelar resposta</a></small></h3><form action="https://www.superprof.com.br/blog/wp-comments-post.php" method="post" id="commentform" class="row comment-form"><p class="column-sm-12 comment-form-comment"><label for="comment">O seu comentário</label> <textarea id="comment" name="comment" rows="8" maxlength="65525" required="required">

Nome *

E-mail *

Current ye@r *

Leave this field empty