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?

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

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.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.