Validation de formulaire

Cet article explique la validation des formulaires.

Il explique la validation des formulaires en HTML.

YouTube Video

Validation de formulaire HTML

Aperçu de la validation de formulaire HTML

• La validation de formulaire HTML est un mécanisme qui garantit que les données répondent à certaines conditions avant qu'un utilisateur ne les soumette. Cela réduit les erreurs côté serveur et améliore l'expérience utilisateur.

Attribut 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>

• L'attribut required spécifie que les champs doivent être remplis avant de soumettre le formulaire.

Attribut 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>

• L'attribut pattern est utilisé pour valider si la saisie dans le formulaire correspond à un motif regex spécifique. Par exemple, cela vérifie si le nom d'utilisateur contient uniquement des caractères alphanumériques.

Attributs min et 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>

• Les attributs <min> et <max> sont utilisés pour spécifier les valeurs minimale et maximale autorisées pour un élément de saisie. Ils sont couramment utilisés avec des types de saisie comme number, range et date.
• Dans cet exemple, vous pouvez entrer un nombre entre 18 et 99.

Attributs minlength et 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>

• L'attribut minlength spécifie le nombre minimum de caractères requis pour un champ de saisie, tandis que l'attribut maxlength définit le nombre maximum de caractères autorisés.
• Dans cet exemple, vous pouvez saisir un texte entre 4 et 12 caractères.

L'attribut 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>

• L'attribut type="email" est utilisé pour s'assurer que la saisie est dans un format d'adresse e-mail valide. Cet attribut offre une fonctionnalité de validation intégrée pour les champs de saisie d'adresses e-mail.

L'attribut 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"> fournit un champ de saisie qui requiert un format URL correct. Le navigateur vérifie automatiquement si la saisie est valide en tant qu'URL.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video