Você usa a tag select do HTML para criar menus suspensos para que os usuários selecionem os valores que eles querem. É uma funcionalidade essencial na coleta de dados a serem enviados para um servidor.

A tag select normalmente é usada dentro de um elemento de formulário (form), com os itens a serem escolhidos ficando dentro de outra tag, <option>. Ela também pode ser usada como um elemento sozinho, que ainda estaria associado com um formulário por meio de um de seus atributos especiais, form.

Neste tutorial, vou mostrar como criar um menu suspenso com a tag select para que você possa começar a coletar dados nos seus projetos de programação. Também vou mostrar um pouco sobre como estilizar a tag select, pois ela é notoriamente difícil de estilizar.

Aqui temos um Scrim interativo sobre como fazer um menu suspenso ou lista de opções em HTML (inglês)

Atributos da tag select

Antes de me aprofundar em como criar um menu suspenso com a tag select, precisamos discutir os atributos que a tag select recebe.

Os atributos são:

• name: você precisa atribuir um nome para cada elemento do formulário pois é usado para referenciar o dado depois que for submetido ao servidor.
• multiple: esse atributo deixa o usuário selecionar múltiplas opções do menu suspenso.
• required: esse é tipicamente usado para validação. Com ele, o formulário não será submetido a menos que o usuário selecione pelo menos uma opção do menu suspenso.
• disabled: esse atributo impede o usuário de interagir com as opções (deixando-as desabilitadas).
• size: expresso em números, o atributo size (tamanho) é usado para especificar quantas opções poderão ser vistas ao mesmo tempo.
• autofocus: esse atributo é usado em todos campos de entrada de formulário, incluindo a tag select, para especificar qual campo de entrada deverá estar focado quando a página carregar.

Como criar um menu suspenso com a tag select

Para criar um menu suspenso com a tag select, você primeiro precisará de um elemento de formulário (tag form). Isso ocorre porque você também terá um botão de envio nele (no elemento de formulário) para enviar os dados para o servidor.

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Eu adicionei um CSS simples para centralizar o menu suspenso e o botão, e dar um fundo cinza claro para o corpo da página (body):

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Para torná-lo mais elaborado e acessível, você também pode anexar a caixa de seleção a um elemento de rótulo (label), para que fique focado quando o rótulo for clicado. Você pode fazer isso com este código:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Eu coloquei o símbolo da cerquilha (#) como valor do atributo action para você não receber um 404 ao clicar no botão de enviar.

Agora, porém, temos que fazer uma pequena alteração no CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

No final, este é o resultado:

Não termina aqui. Um dos itens do menu suspenso aparece por padrão e será selecionado se o usuário clicar no botão de enviar assim que acessar a página.

Essa, no entanto, não é uma boa experiência para o usuário. Você pode se livrar disso colocando "Select a language" (selecione uma linguagem) como o primeiro elemento do menu.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Quando o usuário clicar para selecionar um item, o menu suspenso cobrirá o botão de enviar – outra coisa que afeta negativamente a experiência do usuário.

Você pode alterar isso com o atributo size (tamanho), que mostrará um certo número de itens por padrão e adicionará uma rolagem para os outros itens do menu.

Isso também deixa você remover o primeiro item falso, pois alguns itens estarão visíveis para o usuário automaticamente.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Com o atributo multiple (múltiplo), você pode permitir que o usuário selecione vários itens do menu.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Isso faz com que 4 itens estejam visíveis por padrão. Para selecionar mais de um item, o usuário precisa segurar a tecla Shift ou Control e, então, selecionar com o mouse.

Você pode fazer mais ainda com as tags <select> e <option>. Você também pode fazer uma caixa de seleção com agrupamentos com o elemento <optgroup> dentro da tag <select>.

Você pode converter o menu que já foi feito para ter agrupamentos assim:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Como estilizar o elemento select

Estilizar o elemento select geralmente é confuso e renderizado de maneira inconsistente entre os navegadores. Você, contudo, sempre pode tentar o seguinte:

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

Nesse exemplo de código CSS acima, eu dei ao texto na caixa de seleção a seguinte aparência:

• uma família de fonte cursiva e cor branca,
• um contorno (outline) de 0 para remover o contorno feio quando está em foco,
• um fundo esverdeado,
• uma borda carmesim (vermelha) de 1 pixel,
• um raio de borda de 4 pixels para obter uma borda ligeiramente arredondada em todos os lados
• e um preenchimento de 4 pixels para espaçar um pouco as coisas.

A caixa de seleção agora parece melhor:

Conclusão

A tag select é muito útil quando você está fazendo menus suspensos ou listas de opções (pré-definidas) em HTML. É como um botão de opção (radio button, em inglês) e uma caixa de seleção (checkbox, em inglês), tudo em um único lugar.

Lembre-se de que, com o botão de opção, você só consegue selecionar um item de uma lista. Com a caixa de seleção, porém, você pode selecionar vários itens. Select é mais flexível, pois você consegue configurá-lo para que aceite um único item ou diversos itens.

Um problema com a tag select é a grande dificuldade para estilizá-la. Uma solução razoável é utilizar uma biblioteca do CSS que ofereça ótimas classes utilitárias para estilizar um formulário junto com o elemento select.

Eu espero que este tutorial tenha deixado você mais familiarizado com a tag select para que você possa começar a usá-la em seus projetos.

Obrigado pela leitura e continue programando.

Nos primeiros dias da web, os elementos HTML, como a tag blink, eram maneiras nativas de adicionar alguns efeitos de animação para animar uma página da web. Como podemos usar essas animações hoje para adicionar brilho aos nossos sites e aplicações?

• O que é a tag blink do HTML?
• Como se usa a tag blink?
• Você ainda pode usar a tag blink?
• Recriando a tag blink com animações em CSS

O que é a tag blink do HTML?

A tag blink (<blink>) é uma tag HTML obsoleta, que faz o conteúdo da tag piscar lentamente.

Ela, juntamente com outras tags obsoletas, como a tag marquee (<marquee>), eram uma maneira fácil de adicionar efeitos de animação simples no seu site.

Como se usa a tag blink?

Como a tag blink era um elemento HTML simples, você a usaria diretamente com o seu conteúdo.

Por exemplo, se você quisesse que a palavra "blink" em blink-182 piscasse, você escreveria o seguinte código HTML:

<p>
  <blink>blink</blink>-182
</p>

Você ainda pode usar a tag blink?

Como você deve ter notado no gif acima, essa tag está obsoleta.

Isso significa que você não pode usar a tag blink do HTML por si só. No entanto, isso não deve nos impedir de refazer seus efeitos em toda sua glória piscante.

Observação: a tag blink foi depreciada devido a preocupações com acessibilidade. Faça sua pesquisa (em inglês) antes de tentar usar uma solução que traga o mesmo efeito, pois todos devemos nos esforçar para fazer nossos projetos o mais inclusivos possível.

Recriando a tag blink com animações em CSS

Hoje, no mundo do desenvolvimento para a web, animações geralmente são tratadas com CSS ou JavaScript. Usando animações em CSS, conseguimos recriar a tag blink com apenas algumas linhas e a temos funcionando de novo.

Com o seguinte CSS:

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Você pode adicionar a classe .blink a qualquer elemento HTML para fazê-lo piscar.

<p>
  <span class="blink">blink</span>-182
</p>

Modernizando a tag blink

Se quiséssemos algo um pouco mais suave, o que poderíamos fazer?

Bom, para começar, podemos fazer a animação desaparecer gradualmente removendo os steps (passos, em português) da definição da animação.

.blink {
  animation: blink 1s infinite;
}

Se quiséssemos fazê-la desaparecer gradualmente como um efeito de ficção científica, seria possível?

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

Também podemos usar um efeito de crescimento e desaparecimento bem legal.

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  51% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Controlando as animações com CSS

Embora você não possa mais usar a tag blink, você ainda tem várias opções. O CSS fornece diversas opções de animação nativamente. Então, se você deseja recriar seu passatempo favorito em HTML  ou recriar a sequência do título de "Alien, o oitavo passageiro", pratique. As possibilidades são virtualmente infinitas.

• Siga o autor no Twitter
• Inscreva-se no canal do autor no YouTube
• ✉️ Assine a newsletter do autor

O Flutter é uma tendência em tecnologia. Este artigo vai sugerir algumas formas gratuitas e pagas de como aprender a desenvolver aplicações do iOS e do Android com Flutter.

Você tem interesse em desenvolvimento de aplicações para dispositivos móveis?

Se a sua resposta é sim, você está lendo o artigo correto! Talvez você não conheça sobre Flutter ainda, mas não se preocupe – eu escrevi um artigo sobre o que o Flutter é e por que você deveria aprender sobre ele.

O Flutter é um framework de interface gratuito e de código aberto criado pelo Google e lançado em maio de 2017. Em poucas palavras, ele permite que você crie aplicações móveis nativas com um único código. Isso significa que você pode usar uma linguagem de programação e uma base de código para criar duas aplicações diferentes (para iOS e para Android). – What is Flutter and Why You Should Learn It in 2020 (em inglês)

Neste texto, eu compartilho com você dois tipos de conteúdo, gratuito e pago. Eu tentei achar recursos excelentes para apoiar cada tipo de aluno (vídeos, cursos, livros, tutoriais e assim por diante).

Antes de começarmos, eu também escrevi um artigo sobre como e por que aprender a programar com conteúdo pago ou gratuito (em inglês). Se você não sabe que tipo de conteúdo é melhor para você, eu recomendo que você leia esse artigo antes de ler este.

Então, vamos começar. Eu tentei explicar cada recurso com um pequeno parágrafo. Todas as informações vieram da descrição do site associado. Como você pode imaginar, eu não tentei todos esses métodos. Se precisar de mais detalhes, eu convido você a visitar o site vinculado.

Conteúdo gratuito

Vídeos/cursos

• Dart Programming Tutorial - Full Course (em inglês)

Um curso completo do freeCodeCamp sobre Dart.

Aprenda a linguagem de programação Dart neste tutorial completo para iniciantes. O Dart é uma linguagem de programação fortemente tipada que é usada no framework Flutter para desenvolvimento de aplicações para dispositivos móveis multiplataforma.

• Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps) (em inglês)

Um tutorial completo do freeCodeCamp para iniciantes. Este tutorial foi uma das minhas referências quando comecei com Flutter. É uma excelente introdução e ajuda você a entender os conceitos básicos que serão úteis para você.

Aprenda Flutter, o framework de desenvolvimento multiplataforma para dispositivos móveis inovador do Google, para criar aplicações para Android e iOS. Neste curso, Nick Manning do FlutterCrashCourse ensina como começar a usar o Flutter de maneira rápida e eficaz. Nick é engenheiro do Flutter desde 2017 e resumiu esse conhecimento do mundo real em um curso intensivo direto, realista e passo a passo.

• Flutter Crash Course (em inglês)

Curso intensivo de Flutter, da Traversy Media.

Neste curso intensivo, vamos ver Flutter para a construção de aplicações para dispositivos móveis nativas. Veremos o que é o Flutter, como configurá-lo, construir widgets, widgets stateless e stateful, roteamento e mais.

• Flutter Tutorial for Beginners (em inglês)

Uma lista de vídeos do YouTube sobre Flutter para iniciantes criada por The Net Ninja.

Você vai descobrir como usar o Flutter (e o Dart) para criar aplicações para Android e iOS do zero. Você vai aprender tudo sobre widgets, pacotes, assets e código assíncrono para criar a aplicação de Horário Mundial (World Time), assim como outras duas miniaplicações para colocar suas habilidades de Flutter em bom uso!

• Flutter & Firebase App Build (em inglês)

Uma lista de vídeos do YouTube sobre Flutter e Firebase criada por The Net Ninja. Quando eu quis usar Firebase na minha primeira aplicação, eu fiz este curso pela primeira vez. Ele era amplo e me deu um bom entendimento sobre como integrar essa ferramenta com o Flutter.

Você vai aprender como criar uma aplicação em Flutter do zero, usando o Firebase Firestore (um banco de dados sincronizado em tempo real) e a Firebase Authentication. Essa lista é para pessoas que já sabem Flutter.

• Reso Coder (em inglês)

Um canal no YouTube dedicado ao Flutter. Reso Coder criou diversos tutoriais explicando como o framework funciona. Diversas ferramentas que você pode usar com Flutter são explicadas para que você possa integrá-las ao seu projeto. Existem inclusive lições sobre arquitetura de código para Flutter.

O Flutter está mudando a cena do desenvolvimento de aplicações. Não fique para trás! Aprenda como desenvolver para multiplataformas móveis e para a web. Aprenda através de lições orientadas a projetos cuidadosamente elaboradas e aplique imediatamente o que aprender nas suas próprias aplicações.

• FilledStacks (em inglês)

Um canal do YouTube dedicado ao Flutter. Você descobrirá diversos tutoriais sobre Flutter, como por exemplo Firebase, interfaces (UI), arquitetura e outros. Também existem aulas de Flutter para celular e para a web.

Aprenda a criar aplicações para dispositivos móveis de alta qualidade e prontas para produção usando o Flutter.

• Code With Andrea (em inglês)

Tutoriais sobre aprender Flutter. Vídeos regulares cobrindo todas as coisas relacionadas ao Flutter, incluindo gerenciamento de estado, leiautes, testes, e mais. Este canal vai ajudar você a se tornar melhor em Flutter.

Google Codelabs

Você também pode aprender Flutter com o site Google Codelabs. O site fornece uma experiência prática de programação, baseada em tutoriais. Eu acabo de descobrir este site. Você pode até usá-lo para outras coisas além do Flutter. Ele faz referência a todas as tecnologias do Google com muitos tutoriais para ajudar você a usá-las.

A maior parte dos codelabs (tutoriais da plataforma) guiarão você em um processo de criar uma pequena aplicação ou adicionar uma nova funcionalidade a uma aplicação existente. Eles cobrem uma grande variedade de tópicos como Android Wear, Google Compute Engine, Projeto Tango e Google APIs no iOS.

Documentação

Uma coisa que eu adoro no Flutter é a documentação (em inglês). Ela é completa e pode ser muito útil enquanto você está aprendendo ou desenvolvendo uma aplicação.

A documentação passa por vários tópicos como:

• Como começar com Flutter
• Todas as widgets disponíveis
• Documentação da API (documentação de bibliotecas)
• Um guia passo a passo com diversos tutoriais
• Alguns exemplos de aplicações
• O canal do Flutter no YouTube

Livros

• Flutter Succinctly (em inglês)

Pesquisando na documentação do Flutter, eu achei este livro. O autor cria uma aplicação completamente funcional, que permite entender claramente o framework. Esse livro é acessível independentemente de você ter ou não a experiência com desenvolvimento móvel.

• Flutter Tutorials Handbook (em inglês)

Este livro contém receitas que demonstram como solucionar problemas comuns enquanto se escreve aplicações com o Flutter. Cada método é individual e pode ser usado como referência para ajudar a construir uma aplicação. Pode ser usado em adição à documentação do Flutter. Diversos exemplos são listados aqui.

HereWeCode

Eu planejo criar tutoriais de Flutter em breve. Para ficar sabendo, você pode me seguir no meu canal do Youtube e no Twitter. Fique à vontade para me falar quais tópicos e tutoriais você quer ver.

Conteúdo pago

Cursos

• The Complete 2020 Flutter Development Bootcamp with Dart (em inglês)

Este Bootcamp de Flutter foi criado oficialmente com a colaboração do time de Flutter do Google. Você vai aprender do zero e criar algumas aplicações. O curso inclui mais de 27 horas de tutoriais em vídeo e projetos. Mesmo que tenha zero de experiência com programação, você pode começar aqui.

• Learn Flutter & Dart to Build iOS & Android Apps [2020] (em inglês)

Um guia completo sobre o SDK do Flutter e o sobre o framework do Flutter para criar aplicações nativas para iOS e Android. Conhecimento básico em linguagem de programação ajuda, mas não é obrigatório. Com este curso, você aprenderá Flutter não somente na teoria, mas também construindo uma aplicação completa e realista. Ela usará recursos como o Google Maps, câmera, animações e mais.

• Dart and Flutter: The Complete Developer's Guide (em inglês)

Tudo o que você precisa saber para construir aplicações para dispositivos móveis com Flutter e Dart, incluindo RxDart e animações! Experiência prévia com JavaScript, Java, Python ou similar é requerida. Neste curso, você vai entender como projetar, criar animações e arquitetura de uma aplicação com Flutter. Este curso parece ser mais avançado que outros. Você vai aprender habilidades como usar o armazenamento off-line, otimizar solicitações de rede, usar padrões de design avançados, e mais.

• Flutter & Firebase: Build a Complete App for IOS & Android (em inglês)

Neste curso, você vai construir uma aplicação completa e real para iOS e Android, usando Dart, Flutter e Firebase. Aqui, você começa com o básico. O curso inclui uma introdução completa ao Dart e ao Flutter. Conforme for progredindo, o curso apresentará tópicos mais avançados, com ênfase especial em escrever código pronto para produção, para que você aprenda a construir aplicações robustas que escalem. Conceitos importantes são explicados com diagramas claros. Ao final deste curso, você será uma pessoa desenvolvedora de Flutter competente.

Mais livros

• Learn Google Flutter Fast: 65 Example Apps (em inglês)

Um livro completo sobre Flutter. Aprenda Flutter através de 65 miniaplicações de exemplo. Você aprenderá a criar tudo, desde a aplicação mais básica até a avançada com arquitetura complexa. No final do livro, o autor explica como publicar sua aplicação nas lojas.

• Beginning Flutter: A Hands-On Guide to App Development 1st Edition (em inglês)

Esta é uma excelente introdução ao Flutter para que você possa começar rápido e aprender os princípios fundamentais. Se você prefere aprender através dos livros, não hesite!

Beginning Flutter: A Hands-On Guide to App Development 1st Edition é um recurso essencial tanto para desenvolvedores experientes quanto para novatos interessados em começar com Flutter. É uma introdução ao Flutter, passo a passo. Este livro foi escrito por Marco L. Napoli, CEO da Pixolini Inc. e experiente desenvolvedor de aplicações para dispositivos móveis, web e desktop. Ele tem um forte histórico comprovado no desenvolvimento de sistemas visualmente elegantes e simples de usar.

Conclusão

Você conhece outros recursos para aprender Flutter? Envie uma mensagem para o autor pelo Twitter para que ele os adicione por lá.

Fique à vontade para compartilhar este artigo se gostou dele.

Se quiser mais conteúdo do gênero, pode seguir o autor no Twitter, onde ele escreve sobre desenvolvimento para a web, autoaperfeiçoamento e minha jornada como desenvolvedor full-stack!