Campos de texto: input text, password e email

Os campos de texto são a espinha dorsal de qualquer formulário. Eles permitem que o usuário digite informações como nomes, endereços, senhas e e-mails. A tag principal para criar esses campos é <input>, e o que a diferencia é o seu atributo type.

Nesta lição, vamos focar nos tipos mais comuns de campos de texto: text, password e email.

A tag <input>: o campo de entrada

A tag <input> é um dos elementos mais versáteis do HTML. Ela é usada para criar diversos tipos de controles interativos para formulários. A chave para seu funcionamento é o atributo type.

Atributos comuns a todos os <input>:

• id: Identificador único para o campo (importante para o label).
• name: Nome do campo que será enviado ao servidor (crucial para o backend).
• value: O valor inicial do campo.
• placeholder: Um texto de dica que aparece no campo antes do usuário digitar.
• required: Um atributo booleano que indica que o campo é obrigatório.
• disabled: Um atributo booleano que desabilita o campo (não pode ser editado).
• readonly: Um atributo booleano que torna o campo somente leitura (não pode ser editado, mas o valor é enviado).

type="text": texto livre

Este é o tipo de campo mais básico e comum. Ele permite que o usuário digite qualquer tipo de texto em uma única linha.

Exemplo:

<form>
  <label for="nome">Nome Completo:</label><br>
  <input type="text" id="nome" name="nome_completo" placeholder="Digite seu nome" required><br><br>

  <label for="endereco">Endereço:</label><br>
  <input type="text" id="endereco" name="endereco_rua" placeholder="Rua, número, bairro"><br><br>

  <label for="cidade">Cidade:</label><br>
  <input type="text" id="cidade" name="cidade_usuario" value="São Paulo">
</form>

Quando usar type="text":

• Para qualquer informação de texto genérica que não se encaixe em tipos mais específicos (ex: nome, sobrenome, endereço, título).

type="password": senha oculta

Este tipo de campo é usado para senhas. O texto digitado pelo usuário é ocultado (geralmente com asteriscos ou pontos) para proteger a privacidade.

Exemplo:

<form>
  <label for="usuario">Usuário:</label><br>
  <input type="text" id="usuario" name="nome_usuario" required><br><br>

  <label for="senha">Senha:</label><br>
  <input type="password" id="senha" name="senha_usuario" placeholder="Mínimo 8 caracteres" required>
</form>

Considerações de segurança:

• Nunca armazene senhas em texto puro: No servidor, as senhas devem ser sempre armazenadas de forma criptografada (hash).
• autocomplete="new-password": Para navegadores sugerirem senhas fortes.
• autocomplete="current-password": Para navegadores preencherem a senha salva.

type="email": endereço de e-mail

Este tipo de campo é projetado especificamente para endereços de e-mail. Ele oferece algumas vantagens:

• Validação nativa: O navegador tenta validar se o texto digitado tem o formato básico de um e-mail (contém "@" e um domínio). Se não tiver, o formulário não será enviado e uma mensagem de erro será exibida.
• Teclado otimizado: Em dispositivos móveis, o teclado pode mudar para incluir caracteres comuns de e-mail (como "@" e ".com").

Exemplo:

<form>
  <label for="email">Seu E-mail:</label><br>
  <input type="email" id="email" name="email_contato" placeholder="seu.email@exemplo.com" required><br><br>

  <label for="confirmar-email">Confirmar E-mail:</label><br>
  <input type="email" id="confirmar-email" name="confirmar_email" required>
</form>

Quando usar type="email":

• Sempre que precisar coletar um endereço de e-mail. A validação nativa e a otimização do teclado móvel são grandes benefícios.

Conectando label e input

É uma boa prática de acessibilidade conectar cada <label> ao seu <input> correspondente. Isso é feito de duas maneiras:

1. O atributo for do <label> deve ter o mesmo valor do atributo id do <input>.
2. O texto do label descreve o propósito do input.

<!-- Conexão correta -->
<label for="nome_usuario">Nome de Usuário:</label>
<input type="text" id="nome_usuario" name="username">

<!-- Benefícios: -->
<!-- - Ao clicar no texto do label, o campo de input é focado. -->
<!-- - Leitores de tela leem o label para descrever o campo, melhorando a acessibilidade. -->

Resumindo

• A tag <input> é usada para criar campos de formulário, com o atributo type definindo seu comportamento.
• type="text": Para texto livre de uma única linha.
• type="password": Para senhas (texto oculto).
• type="email": Para endereços de e-mail, com validação nativa e teclado otimizado em dispositivos móveis.
• Sempre conecte o <label> ao seu <input> usando os atributos for e id para melhorar a acessibilidade.
• O atributo name é crucial para o servidor receber os dados do campo.