Validação de Formulário

Este artigo explica a validação de formulário.

Explica a validação de formulário em HTML.

YouTube Video

Validação de Formulário em HTML

Visão Geral da Validação de Formulário em HTML

• A validação de formulário em HTML é um mecanismo para garantir que os dados atendam a determinadas condições antes que o usuário os envie. Isso reduz erros no lado do servidor e melhora a experiência do usuário.

Atributo required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• O atributo required especifica que os campos de entrada devem ser preenchidos antes de enviar o formulário.

Atributo pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• O atributo pattern é usado para verificar se a entrada do formulário corresponde a um padrão regex específico. Por exemplo, isso verifica se o nome de usuário contém apenas caracteres alfanuméricos.

Atributos min e max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Os atributos <min> e <max> são usados para especificar os valores mínimo e máximo permitidos para um elemento de entrada. Eles são comumente usados com tipos de entrada como number, range e date.
• Neste exemplo, você pode inserir um número entre 18 e 99.

Atributos minlength e maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• O atributo minlength especifica o número mínimo de caracteres necessários para um campo de entrada, enquanto o atributo maxlength define o número máximo de caracteres permitidos.
• Neste exemplo, você pode inserir um texto entre 4 e 12 caracteres.

O atributo type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• O atributo type="email" é usado para garantir que a entrada esteja em um formato válido de endereço de e-mail. Este atributo fornece uma funcionalidade de validação integrada para campos de entrada de endereço de e-mail.

O atributo type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> fornece um campo de entrada que exige um formato de URL correto. O navegador verifica automaticamente se a entrada é válida como uma URL.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video