Comment on place le curseur automatiquement dans un champ texte HTML ?

Pour placer automatiquement le curseur dans un champ texte dès que la page se charge, vous pouvez utiliser l'attribut autofocus dans la balise input.

Voici un exemple pour placer automatiquement le curseur dans un champ texte input du type text :

<input type="text" name="test" autofocus>

Le champ texte ci-dessus dispose de l'attribut autofocus ce qui signifie que dès que la page se charge dans le navigateur, le curseur est automatiquement positionné dans le champ texte.

Si vous placez plusieurs attributs autofocus dans un formulaire HTML le comportement peut varier selon les navigateurs ; mais généralement la plupart des navigateurs sélectionneront automatiquement le premier champ de formulaire avec l'attribut autofocus lorsqu'ils chargent la page ; les champs autofocus suivants seront ignorés.

Pour éviter toute ambiguïté ou comportement inattendu il est recommandé de n'utiliser qu'un seul attribut autofocus par formulaire.

Si vous devez contrôler l'ordre de tabulation des champs, il est préférable d'utiliser l'attribut tabindex avec des valeurs numériques pour spécifier explicitement l'ordre souhaité.

<form>
	<label for="nom">Nom :</label>
	<input type="text" id="nom" name="nom" tabindex="1" autofocus><br><br>
	
	<label for="prenom">Prénom :</label>
	<input type="text" id="prenom" name="prenom" tabindex="2"><br><br>
	
	<label for="email">Email :</label>
	<input type="email" id="email" name="email" tabindex="3"><br><br>
	
	<label for="message">Message :</label><br>
	<textarea id="message" name="message" rows="4" cols="50" tabindex="4"></textarea><br><br>
	
	<input type="submit" value="Envoyer">
</form>

Dans l'exemple ci-dessus chaque champ du formulaire a un attribut tabindex avec une valeur numérique qui détermine l'ordre de tabulation. Lorsque vous appuyez sur la touche Tab sur votre clavier pour naviguer à travers les champs du formulaire, le navigateur suit l'ordre spécifié par ces valeurs tabindex. Plus le nombre est petit plus le champ a la priorité dans l'ordre de tabulation.