Vantagens e desvantagens de labels flutuantes em formulários \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 09 Min 21 Seg Tempo restante da oferta: 07 09 21 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Vantagens e desvantagens de labels flutuantes em formulários [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) # Vantagens e desvantagens de labels flutuantes em formulários Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo? [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/vantagens-e-desvantagens-de-labels-flutuantes-em-formularios.jpg) Olá, Web Developers! Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo? [ ![UX/UI - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Curso UX/UI - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/ux-ui-introducao) Nesse artigo eu vou listar as vantagens e as desvantagens que considero pertinentes. ![](https://d2m498l008ebpa.cloudfront.net/2017/08/giphy.gif) ## Vantagens Algumas das vantagens de utilizá-los: **Os formulários ficam menores:** Nós enxergamos os elementos no navegador por blocos. Na imagem abaixo, enxergamos quatro blocos: dois labels e dois inputs. ![](https://d2m498l008ebpa.cloudfront.net/2017/08/HEOHeml.png) Já na imagem abaixo, percebemos apenas dois blocos. Isso passa a impressão de um formulário menor. ![](https://d2m498l008ebpa.cloudfront.net/2017/08/BRlfydr.png) Já foram realizados testes com esses estilos de formulários e, no segundo estilo, os usuários realmente pensaram estar preenchendo um formulário com metade do número de campos. **Sem problemas com alinhamento:** Essa não é uma vantagem tão grande. Qualquer CSS bem feito resolve. Mas, realmente, não precisamos ficar nos preocupando com o alinhamento dos elementos e labels, o que já dá uma pequena facilitada. **Separação entre campos:** Quando temos campos como os da imagem abaixo, precisamos dar um espaço em branco ou separar com uma linha para que o usuário saiba qual campo determinado label pertence. Nesta imagem sabemos que `senha` pertence ao campo de baixo porque temos apenas dois campos. Agora, já imaginou um formulário maior? É preciso deixar um espaço bom para podermos perceber melhor a separação e agrupamento de elementos. ![](https://d2m498l008ebpa.cloudfront.net/2017/08/HEOHeml.png) Já na imagem abaixo, não precisamos nos preocupar com separação e agrupamento. Mesmo que a gente diminua os espaços entre os inputs, saberemos qual input cada label pertence. ![](https://d2m498l008ebpa.cloudfront.net/2017/08/BRlfydr.png) **Leitura mais rápida:** Como o label estará dentro dos inputs, e também poderemos diminuir os espaços em branco, como visto no item anterior, a leitura será mais rápida. Isso porque os olhos do usuário precisam passar pelas linhas em branco e pensar na ligação entre elementos quando eles estão separados. ## Desvantagens Agora eu listarei algumas desvantagens. **Nada de labels compridos!** ![](https://d2m498l008ebpa.cloudfront.net/2017/08/dHtmeLJ.png) Você tem que pensar bem no que escrever no label para que ele seja bem curto e direto. Do contrário, seu texto pode acabar sendo cortado em dispositivos com telas menores. No exemplo acima, ao invés de **Há quanto tempo trabalha com desenvolvimento?**, poderíamos escrever algo como **Tempo de experiência**, mas nem sempre vamos conseguir deixar claro o que queremos. **Campos preenchidos podem dificultar a leitura:** ![](https://d2m498l008ebpa.cloudfront.net/2017/08/ylwc2dI.png) Quando preenchemos um campo, o label diminui de tamanho, dando espaço ao valor preenchido. Dependendo do novo tamanho da fonte do label, pode dificultar a leitura, caso o usuário queira revisar os campos do formulário. Lembre-se que podemos ter usuário com problemas de visão usando dispositivos com telas pequenas. [ ![Desenvolvedor PHP Júnior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/php.svg) Formação Desenvolvedor PHP Júnior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-php-junior) **Labels dentro do input podem ser confundidos com campos preenchidos:** ![](https://d2m498l008ebpa.cloudfront.net/2017/08/dHtmeLJ.png) Sim, isso é um problema que também pode acontecer com placeholders. O usuário pode simplesmente passar o olho e pensar que aquele campo já está preenchido. Mesmo que a gente os deixe com uma cor diferente, é sempre bom considerar essa possibilidade, ademais, diferentes usuários, diferentes formas de visualizar e entender o contexto. **Sem consistência de localização:** ![](https://d2m498l008ebpa.cloudfront.net/2017/08/5IheEik.png) Não temos uma consistência de localização dos labels quando precisamos de campos que não sejam de texto, como combo boxes, radio buttons e checkboxes. ## Concluindo E você? Usa em seus formulários? É a favor ou contra? Compartilhe com a gente aí nos comentários! :) - [ #UX Design ](https://www.treinaweb.com.br/blog/tag/ux-design) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/praticas-que-todo-desenvolvedor-que-nao-trabalha-em-uma-equipe-deveria-seguir-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 9 anos atrás ## [ Práticas que todo desenvolvedor que não trabalha em uma equipe deveria seguir ](https://www.treinaweb.com.br/blog/praticas-que-todo-desenvolvedor-que-nao-trabalha-em-uma-equipe-deveria-seguir) Falaremos nesse artigo das vantagens, desvantagens e práticas importantes para nos mantermos em alto nível mesmo quando não trabalhamos em uma equipe. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/spa-e-ssr-quais-as-diferencas-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ SPA e SSR: quais as diferenças? ](https://www.treinaweb.com.br/blog/spa-e-ssr-quais-as-diferencas) Confira neste artigo as diferenças entre SPA e SSR, as vantagens e desvantagens de cada uma, além de quando utilizá-las. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/hospedage-e-dominio-1-400x280.png) [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 10 anos atrás ## [ Os tipos mais comuns de hospedagem de sites ](https://www.treinaweb.com.br/blog/os-tipos-mais-comuns-de-hospedagem-de-sites) Conheça os principais tipos de hospedagem de sites, passando pelas vantagens e desvantagens de cada modelo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/18095832/capa-elton-symfony-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Symfony Componentes: o que são e qual sua importância para o ecossistema PHP ](https://www.treinaweb.com.br/blog/symfony-componentes-o-que-sao-e-qual-sua-importancia-para-o-ecossistema-php) Entenda o que são os componentes do Symfony, o que eles fazem, quais as vantagens e desvantagens de utilizá-los. Além disso falaremos da importância deles para o ecossistema PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/MONGO-DB-400x280.png) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 6 anos atrás ## [ O que é MongoDB? ](https://www.treinaweb.com.br/blog/o-que-e-mongodb) Certamente você já ouviu falar sobre o uso do MongoDB em projetos. Por isso, veremos neste artigo o que vem a ser o MongoDB e as vantagens que temos ao utilizá-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/MUDANCA-CARREIRA-TI-1-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 6 anos atrás ## [ Por que investir em uma carreira de tecnologia? ](https://www.treinaweb.com.br/blog/por-que-investir-em-uma-carreira-de-tecnologia) Para você que está pensando investir em uma carreira de tecnologia, porém ainda tem algumas dúvidas, vale a pena dar uma conferida neste artigo! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/wordpress-background-1-400x280.jpg) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 10 anos atrás ## [ Conheça o tipo de plugin Must-use do WordPress ](https://www.treinaweb.com.br/blog/conheca-o-tipo-de-plugin-must-use-do-wordpress) No tipo mu-plugin do WordPress os plugins ficam sempre ativos e devem ser usados para funções essenciais do projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/SQLMODEL-400x280.jpg) [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 3 anos atrás ## [ SQLModel: Simplificando o Mapeamento de Objetos para Bancos de Dados em Python ](https://www.treinaweb.com.br/blog/sqlmodel-simplificando-o-mapeamento-de-objetos-para-bancos-de-dados-em-python) Desvende o SQLModel: Simplificando o Mapeamento de Objetos Python para Bancos de Dados Relacionais. Domine o CRUD de forma eficaz! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Entendendo ponteiros na Golang ](https://www.treinaweb.com.br/blog/entendendo-ponteiros-na-golang) Neste artigo veremos sobre os ponteiros na Golang. Vamos entender o que são ponteiros, quais suas vantagens e desvantagens e como utilizá-los. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/o-que-e-programacao-reativa-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ O que é programação reativa? ](https://www.treinaweb.com.br/blog/o-que-e-programacao-reativa) Confira neste artigo o que vem a ser programação reativa, um princípio de desenvolvimento de software que vem ganhando espaço entre os desenvolvedores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/IDE-CSHARP-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Principais IDEs para desenvolvimento C# ](https://www.treinaweb.com.br/blog/principais-ides-para-desenvolvimento-c) Veja neste artigo as principais IDEs para desenvolvimento C#. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/IDE-PHP-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Principais IDEs para desenvolvimento PHP ](https://www.treinaweb.com.br/blog/principais-ides-para-desenvolvimento-php) Veja neste artigo as principais IDEs para desenvolvimento PHP. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 09min 21s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58