HTML: tag input

Toda vez que uma página precisa receber alguma informação do usuário, por exemplo um nome, um e-mail, uma senha, começa-se usando a tag form. Ela funciona como um container: é dentro dela que ficam todos os campos que vão coletar os dados.

<form>...</form>

Dentro do form, existem diferentes elementos para entrada de dados. Um dos mais utilizados é o input.

O tipo de campo é definido pelo atributo type:

• text — texto simples;
• email — endereço de e-mail;
• password — senha (esconde os caracteres digitados);
• date — data;
• file — para anexar arquivos.

<form>
  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome" placeholder="Digite seu nome" />

  <label for="email">E-mail</label>
  <input type="email" id="email" name="email" placeholder="Digite seu e-mail" />

  <label for="senha">Senha</label>
  <input type="password" id="senha" name="senha" placeholder="Digite sua senha" />

  <label for="nascimento">Data de nascimento</label>
  <input type="date" id="nascimento" name="nascimento" />

  <label for="arquivo">Anexar arquivo</label>
  <input type="file" id="arquivo" name="arquivo" />
</form>

Breve explicação:

• placeholder: dica que aparece dentro do campo antes do usuário digitar qualquer coisa;
• <label>: associado ao id do input dá nome ao campo e melhora a acessibilidade;
• name: identifica o campo no momento do envio dos dados.

Veja abaixo como ficam os diferentes tipos de input no navegador: text, email, password, date e file.

Assim, a tag form organiza os campos do formulário, enquanto o input permite criar diferentes tipos de entrada de dados.