Formulários permitem que o usuário envie informações para um site. Eles são usados para login, cadastro, contato, pesquisa e muito mais.

Nesta aula, vamos entender a estrutura básica de um formulário em HTML.

A tag <form>

Todo formulário começa com a tag <form>. Ela indica onde o formulário começa e termina. 

 <form> </form>

Dentro dela ficam os campos que o usuário preenche.

Campos de entrada com <input>

A tag <input> cria campos de entrada de dados.

Ela também é uma tag vazia. 

 <input>

O comportamento do <input> depende do atributo type.

Tipos comuns de <input>

  • text — texto comum
  • email — e-mail
  • password — senha
  • submit — envio do formulário
   
<input type="text"> 
<input type="email"> 
<input type="password"> 
<input type="submit" value="Enviar">

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML

Rótulos com <label>

O <label> serve para identificar um campo. Ele melhora muito a acessibilidade. 

   
    <label>Nome</label> 
    <input type="text">

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML

O ideal é ligar o <label> ao campo usando o atributo for. 

 <label for="nome">Nome</label> <input type="text" id="nome">

O valor presente no parâmetro "for", do campo label, precisa ser exatamente igual ao valor do parâmetro "id" do input. Isso promove o vínculo entre eles.

Clicar no texto do label também ativa o campo.

Exemplo completo de formulário simples


  <form> 
    <label for="email">E-mail</label> 
    <input type="email" id="email">
    <br /> <br />
    <label for="senha">Senha</label>
    <input type="password" id="senha">
    <br /> <br />
    <input type="submit" value="Entrar">
  </form>

O código acima resultará na seguinte página sendo criada:

Exemplo de página HTML

Lembrando que a tag <br /> insere uma quebra de linha.

Neste momento, o formulário ainda não envia dados de verdade. Vamos aprender isso depois.

Formulários são estrutura, não validação

Nesta fase do curso, o foco é:

  • Estrutura correta
  • Semântica
  • Acessibilidade

Validação e comportamento vêm depois, com HTML5 e JavaScript.

💾🧠 Resumo da aula para nunca mais esquecer

  • <form> define um formulário
  • <input> cria campos de entrada
  • O atributo type define o tipo do campo
  • <label> identifica campos e melhora acessibilidade

Na próxima aula, vamos aprender sobre campos modernos de formulário (HTML5) e validação nativa do navegador.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.