Validação de formulários usando atributos
Ao criar formulários em HTML, a validação é uma etapa crucial para garantir que os dados enviados pelos usuários estejam corretos e consistentes.
Felizmente, o HTML5 oferece alguns atributos que facilitam a validação dos formulários de maneira simples e eficaz.
- Atributo required: O atributo
required
é usado para especificar que um campo de entrada é obrigatório. Quando esse atributo está presente, o usuário é impedido de enviar o formulário até que o campo seja preenchido. Isso ajuda a garantir que informações importantes não sejam deixadas em branco. - Atributo type: O atributo
type
é usado para definir o tipo de dado que é esperado em um campo de entrada. Por exemplo, podemos usartype="email"
para garantir que o campo aceite apenas endereços de e-mail válidos outype="number"
para aceitar apenas valores numéricos. - Atributos min e max: Esses atributos são usados com campos numéricos, como
type="number"
etype="range"
, para especificar os valores mínimo e máximo aceitos pelo campo, ajudando a limitar a faixa de valores válidos. - Atributo pattern: O atributo
pattern
permite que você defina uma expressão regular que o valor do campo de entrada deve corresponder. É útil quando se deseja validar formatos específicos, como números de telefone ou códigos postais. - Atributo maxlength: O atributo
maxlength
é usado para limitar o número máximo de caracteres que um campo de entrada pode conter, útil quando se deseja restringir o tamanho máximo de um texto ou senha, por exemplo.
Exemplo de código para aplicar validação em um formulário:
<form> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" required> <label for="email">E-mail:</label> <input type="email" id="email" name="email" required> <label for="idade">Idade:</label> <input type="number" id="idade" name="idade" min="18" max="120" required> <label for="telefone">Telefone:</label> <input type="text" id="telefone" name="telefone" pattern="[0-9]{2}-[0-9]{4,5}-[0-9]{4}" required> <small>Formato esperado: xx-xxxxx-xxxx</small> <label for="senha">Senha:</label> <input type="password" id="senha" name="senha" minlength="6" maxlength="12" required> <small>Mínimo de 6 caracteres e máximo de 12 caracteres.</small> <input type="submit" value="Enviar"> </form>
Neste exemplo, utilizamos os atributos required
, type
, min
, max
, pattern
, maxlength
e minlength
para aplicar diferentes tipos de validação nos campos de entrada.
O usuário será impedido de enviar o formulário até que todos os campos obrigatórios sejam preenchidos corretamente e dentro dos critérios especificados.
Esses atributos tornam a validação de formulários uma tarefa fácil e ajudam a proporcionar uma experiência mais consistente e confiável aos usuários.