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?

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

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.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.