Elementos de formulários de diferentes tipos

7.1 Campo de texto

O HTML oferece muitos tipos de entrada de dados para elementos de formulário, que permitem aos usuários inserir dados em vários formatos, como texto, e-mail, datas e muito mais. Vamos ver em detalhes os diferentes tipos de entrada de dados e seu uso.

O elemento <input type="text"> é usado para inserir texto em uma única linha. Este é o tipo de entrada mais básico e mais frequentemente usado.

Exemplo de uso:

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

Atributos

• maxlength: restringe o número máximo de caracteres
• placeholder: texto substituto que aparece dentro do campo de entrada até que o usuário comece a digitar
• required: indica que o campo é obrigatório

Exemplo com atributos:

    
      <label for="username">Nome de usuário:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Digite o nome de usuário" required>
    
  

7.2 Campos para números

O elemento <input type="number"> é usado para entrada de valores numéricos. Ele permite limitar a entrada apenas para números e pode incluir setas para aumentar ou diminuir o valor.

Exemplo de uso:

    
      <label for="quantity">Quantidade:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Atributos

• min: define o valor mínimo permitido
• max: define o valor máximo permitido
• step: determina o passo de incremento ou decremento
• value: define o valor inicial

7.3 Campos para e-mails

O elemento <input type="email"> destina-se à entrada de endereços de e-mail. Ele verifica se o texto inserido está no formato de endereço de e-mail.

Exemplo de uso:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="exemplo@exemplo.com">
    
  

Atributos

• multiple: permite inserir múltiplos endereços de e-mail separados por vírgulas
• pattern: define uma expressão regular para validação adicional dos dados inseridos

Exemplo com atributos:

    
      <label for="emails">Emails (separados por vírgulas):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="exemplo1@exemplo.com, exemplo2@exemplo.com">
    
  

7.4 Campos para número de telefone

O elemento <input type="tel"> é usado para entrada de números de telefone. Ele não verifica o formato do número, mas permite configurar uma máscara de entrada através do atributo pattern.

Exemplo de uso:

    
      <label for="phone">Telefone:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Atributos

pattern: define uma expressão regular para verificar o formato do número inserido.

Exemplo com atributos:

    
      <label for="phone">Telefone:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Campos para datas

O elemento <input type="date"> é usado para entrada de datas. Em navegadores compatíveis, aparece um widget de calendário para facilitar a seleção da data.

Exemplo de uso:

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

Atributos

• min: define a data mínima permitida
• max: define a data máxima permitida

Exemplo com atributos:

    
      <label for="appointment">Data do encontro:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Campos para entrada de tempo

O elemento <input type="time"> é usado para entrada de tempo. Em navegadores compatíveis aparece um widget de seleção de tempo.

Exemplo de uso:

    
      <label for="meeting_time">Hora da reunião:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Atributos

• min: define o horário mínimo permitido
• max: define o horário máximo permitido
• step: determina o passo de incremento ou decremento do tempo

Exemplo com atributos:

    
      <label for="alarm">Alarme:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Campos para entrada de URL

O elemento <input type="url"> é usado para entrada de endereços web (URL). Ele verifica se o texto inserido está no formato de URL.

Exemplo de uso:

    
      <label for="website">Site:</label>
      <input type="url" id="website" name="website" placeholder="https://exemplo.com">
    
  

Atributos

pattern: define uma expressão regular para validação adicional dos dados inseridos.

Exemplo com atributos:

    
      <label for="personal_website">Site pessoal:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://exemplo.com">
    
  

7.8 Campos para entrada de senhas

O elemento <input type="password"> é usado para entrada de senhas. Os dados inseridos são ocultos, substituídos por símbolos (como asteriscos ou pontos).

Exemplo de uso:

    
      <label for="password">Senha:</label>
      <input type="password" id="password" name="password">
    
  

Atributos

• maxlength: restringe o número máximo de caracteres
• placeholder: texto substituto
• required: indica que o campo é obrigatório

Exemplo com atributos:

    
      <label for="new-password">Nova senha:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Digite a senha" required>
    
  

7.9 Campos para faixa de valores

O elemento <input type="range"> é usado para entrada de valores em uma faixa determinada. Ele é exibido como um controle deslizante.

Exemplo de uso:

    
      <label for="volume">Volume:</label>
      <input type="range" id="volume" name="volume">
    
  

Atributos

• min: define o valor mínimo permitido
• max: define o valor máximo permitido
• step: determina o passo para alteração do valor
• value: define o valor inicial

Exemplo com atributos:

    
      <label for="brightness">Brilho:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Campos para escolha de cor

O elemento <input type="color"> é usado para escolha de cor. Em navegadores compatíveis aparece um widget de seleção de cor.

Exemplo de uso:

    
      <label for="favcolor">Escolha sua cor favorita:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Atributos

• value: define a cor inicial.

7.11 Campos para pesquisa

O elemento <input type="search"> é usado para entrada de consultas de pesquisa. Na maioria dos navegadores ele possui estilos embutidos e funcionalidade para limpar o texto inserido.

Exemplo de uso:

    
      <label for="search">Pesquisa:</label>
      <input type="search" id="search" name="search" placeholder="Digite a consulta de pesquisa">