Validação de Entrada de Dados

6.1 Atributo required

A validação de dados em formulários é um aspecto importante do desenvolvimento web, que ajuda a garantir a correção e integridade das informações inseridas. O HTML fornece muitos atributos embutidos para verificação de entrada de dados, como required, pattern, min, max, além dos atributos placeholder e value, que melhoram a interação do usuário com o formulário.

O atributo required indica que o campo de entrada é obrigatório. O navegador não permitirá enviar o formulário se o campo marcado como required não estiver preenchido.

Sintaxe

    
      <input type="text" name="username" required>
    
  

Exemplo de uso

    
      <form action="/" method="post">
        <label for="username">Nome de usuário:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Enviar</button>
      </form>
    
  

Explicação

Se o atributo required for especificado, o usuário deve preencher o campo antes de enviar o formulário. Se o campo estiver vazio, o navegador mostrará uma mensagem de erro e não enviará o formulário.

6.2 Atributo pattern

O atributo pattern permite definir uma expressão regular para verificar a entrada de dados. Se os dados inseridos não corresponderem ao padrão especificado, o navegador mostrará uma mensagem de erro e não enviará o formulário.

Sintaxe

    
      <input type="text" name="username" pattern="[A-Za-z]{3,}">
    
  

Exemplo de uso

O atributo pattern define uma expressão regular que os dados inseridos devem corresponder. Neste exemplo, o nome de usuário deve conter apenas letras e ter pelo menos três caracteres.

    
      <form action="/" method="post">
        <label for="username">Nome de usuário (apenas letras, no mínimo 3 caracteres):</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
        <button type="submit">Enviar</button>
      </form>
    
  

6.3 Atributos min e max

Os atributos min e max são usados para definir os valores mínimos e máximos permitidos para campos numéricos e de data.

Sintaxe

    
      <input type="number" name="age" min="18" max="99">
    
  

Exemplo de uso

Campo numérico

• min: define o valor mínimo permitido. Neste exemplo, a idade mínima é 18 anos
• max: define o valor máximo permitido. Neste exemplo, a idade máxima é 99 anos

    
      <form action="/" method="post">
        <label for="birthday">Data de nascimento (de 1900-01-01 a 2024-12-31):</label>
        <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
        <button type="submit">Enviar</button>
      </form>
    
  

6.4 Atributo placeholder

O atributo placeholder define um texto de preenchimento que aparece dentro do campo de entrada até que o usuário comece a digitar. Esse atributo ajuda os usuários a entender quais dados são esperados no campo.

Sintaxe

    
      <input type="text" name="username" placeholder="Digite o nome de usuário">
    
  

Exemplo de uso

O atributo placeholder exibe um texto dentro do campo de entrada até que o usuário comece a digitar. Neste exemplo, o texto de preenchimento é "Digite o nome de usuário".

    
      <form action="/" method="post">
        <label for="username">Nome de usuário:</label>
        <input type="text" id="username" name="username" placeholder="Digite o nome de usuário" required>
        <button type="submit">Enviar</button>
      </form>
    
  

6.5 Atributo value

O atributo value define um valor inicial para o elemento de entrada. Este valor será exibido no campo ao carregar a página ou ao resetar o formulário.

Sintaxe

    
      <input type="text" name="username" value="default user">
    
  

Exemplo de uso

O atributo value define o valor inicial do campo de entrada. Neste exemplo, o nome de usuário padrão é "default user".

    
      <form action="/" method="post">
        <label for="username">Nome de usuário:</label>
        <input type="text" id="username" name="username" value="default user" required>
        <button type="submit">Enviar</button>
      </form>
    
  

1

Pesquisa/teste

Formulários em HTML, nível 8, lição 6

Indisponível

Formulários em HTML

Formulários em HTML

Abrir