logo oujood
🔍

L'attribut autofocus de la balise <input>

Placez le curseur automatiquement sur le bon champ dès l'ouverture de la page.

OUJOOD.COM

Qu'est-ce que l'attribut autofocus ?

LES ATTRIBUTS HTML

Quand un visiteur ouvre une page avec un formulaire, il doit normalement cliquer sur le premier champ avant de commencer à taper. L'attribut autofocus supprime cette étape : le curseur se place tout seul sur le champ ciblé dès le chargement de la page.

C'est un attribut booléen — sa seule présence suffit à l'activer. Pas besoin de lui donner une valeur particulière. Il est particulièrement utile sur les pages dont l'unique fonction est de saisir quelque chose : moteur de recherche, formulaire de connexion, champ de code de vérification.

Introduit avec HTML5, il est aujourd'hui pris en charge par tous les navigateurs modernes. Internet Explorer ne l'a jamais supporté, mais IE n'est plus maintenu depuis 2022 — ce point n'a donc plus d'importance en pratique.

Syntaxe — trois formes équivalentes

Les trois écritures ci-dessous produisent exactement le même résultat. La première est la plus courante car la plus concise :

  📋 Copier le code

<input autofocus>                    <!-- forme courte recommandée -->
<input autofocus="autofocus">        <!-- forme XML/XHTML -->
<input autofocus="">                  <!-- forme vide, aussi valide -->

Exemple : focus automatique sur le champ "Prénom"

Dans cet exemple, le champ Prénom reçoit le focus dès le chargement. L'utilisateur peut commencer à taper sans cliquer nulle part.

  📋 Copier le code

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

  <form action="traitement.php" method="post">
    <!-- autofocus place le curseur ici au chargement -->
    Prénom : <input type="text" name="prenom" autofocus><br>
    Nom : <input type="text" name="nom"><br>
    <input type="submit" value="Envoyer">
  </form>

</body>
</html>

Bonne pratique : un seul autofocus par page

Si plusieurs champs portent autofocus sur la même page, le navigateur ne retient que le dernier rencontré dans le code HTML — les précédents sont ignorés. Pour éviter tout comportement imprévisible, ne placez cet attribut que sur un seul élément par page.

  📋 Copier le code

<!-- ❌ À éviter : deux autofocus sur la même page -->
<input type="text" name="prenom" autofocus>
<input type="text" name="email" autofocus>  <!-- seul celui-ci sera actif -->

<!-- ✅ Correct : un seul autofocus -->
<input type="text" name="prenom" autofocus>
<input type="text" name="email">

Compatibilité navigateurs en 2026

L'attribut autofocus fonctionne dans Chrome, Firefox, Safari, Edge et Opera. Internet Explorer ne l'a jamais géré, mais ce navigateur est hors service depuis juin 2022. Sur mobile, le comportement peut varier : certains navigateurs iOS évitent d'ouvrir automatiquement le clavier virtuel pour ne pas gêner l'utilisateur.

Accessibilité : l'autofocus peut désorienter les utilisateurs qui naviguent au clavier ou avec un lecteur d'écran, car le focus est déplacé sans action de leur part. Utilisez-le uniquement quand la page a une seule action principale évidente, comme un champ de recherche ou un formulaire de connexion.

Retour à l'accueil du site

Par carabde | Mis à jour le 10 avril 2026