5568 sujets

Sémantique web et HTML

[Résolu] Propriété tabindex ne fonctionne pas

Bonjour à tous,

pourquoi le champ email ne prend pas le focus à l'ouverture de la page ?
Voici le code :
<form action="notification.php" method="post" class="cadre">

	<!-- Votre nom -->
	<p>
		<label for="id-input-nom">Votre nom :</label><br />
		<input type="text" id="id-input-nom" name="nom" class="champs" tabindex="4" />
	</p>
	
	<!-- Votre e-mail -->
	<p>
		<label for="id-input-email">Votre e-mail :</label><br />
		<input type="text" id="id-input-email" name="email" class="champs" tabindex="1" />
	</p>
	
	<!-- Remarques -->
	<p>
		<label for="id-textarea-remarques">Vos remarques :</label><br />
		<textarea id="id-textarea-remarques" name="remarques" tabindex="2"></textarea>
	</p>

	<!-- Le bouton SUBMIT -->
	<p id="bouton">
		<input type="submit" name="envoyer" value="Envoyer" tabindex="3" />
	</p>

</form>


Merci d'avance
@ bientôt

Smiley murf
Modifié par Tchupacabra (14 Aug 2009 - 10:04)
Salut,

Parce que, comme le nom de l'attribut l'indique, il faut appuyer sur la touche "tab".
Pour que le champ email prenne le focus à l'ouverture de la page, il faut utiliser une méthode Javascript des objets de formulaires : focus().
En passant, l'utilisateur risque de se demander ce qu'il se passe s'il passe du champ 2 au 3 puis au 4, avant de revenir au 1 (?).
a écrit :
En passant, l'utilisateur risque de se demander ce qu'il se passe s'il passe du champ 2 au 3 puis au 4, avant de revenir au 1 (?).


Oui, pourquoi ne pas construire ses raccourcis de manière logique, après tout ?
Administrateur
Voilà, et le plus simple est de ne jamais utiliser tabindex mais de laisser faire le navigateur ... Je dis ça pour celui qui n'aura pas été lire le lien que tu as donné Smiley smile
Merci à tous...

j'ai choisi de forcer le focus car la page ne comporte qu'un formulaire...
J'ai réglé mon problème avec un ptit peu de js :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="general.css" />

<script type="text/javascript">
	<!--
	function donner_focus(chp){
		document.getElementById(chp).focus();
	}
	//-->
</script>

</head>
<body onload="donner_focus('id-input-nom')">
[...]
</body>
</html>


Pour l'ordre des tabindex : c'était juste pour tester. Smiley langue

@+ Smiley cligne
Sujet clos
Aller à