logo oujood
🔍

L'attribut required de la balise <input>

À quoi sert l'attribut required ?

LES BALISES HTML

Quand un internaute remplit un formulaire et clique sur « Envoyer », comment s'assurer qu'il n'a pas laissé un champ vide ? Avant HTML5, il fallait écrire du JavaScript pour vérifier ça. Aujourd'hui, l'attribut required fait ce travail directement dans le navigateur, sans une seule ligne de script.

C'est un attribut booléen : sa simple présence suffit à activer la validation. Si le champ est vide au moment de la soumission, le navigateur bloque l'envoi et affiche un message d'erreur automatique.

Types d'input compatibles : text, search, url, tel, email, password, date, number, checkbox, radio et file.

Syntaxe :

<input required>

Les trois formes suivantes sont équivalentes — la première est la plus courante en HTML5 :

  • <input required>
  • <input required="required">
  • <input required="">

Exemple : formulaire avec champs obligatoires

Dans cet exemple, les champs Nom et Email sont tous les deux obligatoires. Si l'un d'eux est vide, le formulaire ne s'envoie pas et le navigateur indique quel champ manque.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Formulaire obligatoire</title>
</head>
<body>

<form action="traitement.php" method="post">
  <!-- L'attribut required bloque l'envoi si le champ est vide -->
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom"
         placeholder="Votre nom complet" required><br><br>

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

  <input type="submit" value="Envoyer">
</form>

</body>
</html>

Exemple : case à cocher obligatoire

On peut aussi forcer l'acceptation des conditions d'utilisation avec required sur une checkbox :

  📋 Copier le code

<form action="inscription.php" method="post">
  <label for="cgu">
    <input type="checkbox" id="cgu" name="cgu" required>
    J'accepte les conditions d'utilisation
  </label><br><br>
  <input type="submit" value="S'inscrire">
</form>

Support navigateur en 2026

L'attribut required est reconnu par tous les navigateurs modernes : Chrome, Firefox, Edge et Safari (depuis la version 10.1). Le problème de compatibilité avec Safari signalé à l'origine en 2014 n'existe plus.

Important : la validation côté navigateur est pratique, mais elle ne remplace pas une vérification côté serveur. Un utilisateur malveillant peut contourner le HTML. Validez toujours vos données en PHP (ou dans votre langage serveur) avant de les utiliser.

Nouveauté HTML5

L'attribut required n'existe pas en HTML 4.01. Il a été introduit avec HTML5 pour permettre la validation native des formulaires sans JavaScript.

Retour à l'accueil du site

Par carabde 10 mars 2014 | Mis à jour le 12 avril 2026