11548 sujets

JavaScript, DOM et API Web HTML5

Position curseur au chargement d'un formulaire

Bonjour à tous,

Quelqu'un sait il comment dans un formulaire indiquer que le curseur doit être positionné dans la première zone à remplir lors du chargement du formulaire ?
D'avance merci pour ce précieux conseil

Françoise
Il n'y a pas des problèmes d'accessibilité à positionner le curseur dans un champs du formulaire?
OK pour un javascript, mais où puis je trouver un tutorial adapté ?

d'autre part y a t il des problèmes d'accessibilité comme le demande Patidou ?
Bonjour Françoise,

A priori ce qui suit devrait fonctionner : (je balbutie en js.... Smiley lol )

<form name="tonformulaire" action="#">
<p><label for="nom">Nom:</label><input type="text" name="nom"/></p>
<p><label for="prenom">Prénom:</label><input type="text" name="prenom" /></p>
etc...
</form>



<script type="text/javascript">
document.tonformulaire.nom.focus();
</script>

Non ?
En ce qui concerne l'accessibilité, je ne sais pas trop Smiley ohwell
Merci pour votre aide à tous,

j'ai testé le script que j'ai mis dans la balise Head, mais bon cela ne semble pas concluant, lorsque je charge mon formulaire quelque soit le navigateur (IE Netscape ou Firefox) je n'ai pas de curseur positionné, et cela me gêne car on a du mal à atteindre la zone "enseigne" avec la souris
je pense que cela vient du fait qu'au dessus de mon formulaire, j'ai un menu déroulant vertical en flash
il faut donc vraiment s'appliquer pour arriver à mettre le curseur dans la première zone, voilà la raison de ma demande

je joins le code du formulaire dans une page classique sans menu pour vérification de mes dires

d'avance merci à ceux qui voudront bien se pencher sur ce petit souci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST FORMULAIRE</title>

<script type="text/JavaScript">
<!--
document.contact.enseigne.focus();
//-->
</script>
</head>

<body>
<form name="contact" action="http://lwserv1.com/cgi-bin/blate/blat.exe" method="post" " target="_blank">
            <div align="center">
              <input type="hidden" size="50" name="Sender" value="contact@artstick.fr" />
              <input type="hidden" size="50" name="TO" value="contact@artstick.fr" />
              <input type="hidden" size="50" name="Blat_Subject" value="Formulaire de demande internet" />
              <input type="hidden" size="50" name="SERVER" value="lwserv1.com" />
              <input type="hidden" name="Blat_success" value="http://www.artstick.fr/merci.html" />
              <input type="hidden" name="Blat_failure" value="http://www.artstick.fr/erreur.html" />
              <input type="hidden" name="Blat_Mime" value="Y" />
  <span class="Style11">Ce formulaire de contact est r&eacute;serv&eacute; aux Professionnels </span>            </div>
            <p align="center" class="Style15">les champs marqu&eacute;s d'une (*) sont obligatoires </p>
            <p align="left" class="Style2"><font face="Arial, Helvetica, sans-serif" size="3">Enseigne* :
              <input name="enseigne" type="text" id="enseigne" onblur="MM_validateForm('enseigne','','R');return document.MM_returnValue" size="50" />
            </font></p>
            <p align="left" class="Style2"><font face="Arial, Helvetica, sans-serif" size="3">
              Nom* :
              <input name="Nom" type="text" id="Nom" onblur="MM_validateForm('Nom','','R');return document.MM_returnValue" size="30" />
              Prenom* :
              <input name="Pr&eacute;nom" type="text" id="Pr&eacute;nom" onblur="MM_validateForm('Pr&eacute;nom','','R');return document.MM_returnValue" size="30" />
              <br />
              <br />
              Fonction* :
              <input name="Fonction" type="text" id="Fonction" onblur="MM_validateForm('Fonction','','R');return document.MM_returnValue" size="70" />
            </font></p>
            <p align="left" class="Style2"><font face="Arial, Helvetica, sans-serif" size="3">Localisation du rayon :
              <input name="Rayon" type="text" id="Rayon" size="50" />
            </font></p>
            <p align="left" class="Style2"><font face="Arial, Helvetica, sans-serif" size="3">Coordonn&eacute;es :</font></p>
            <p align="left" class="Style2"><font face="Arial, Helvetica, sans-serif" size="3">Adresse* : <font face="Arial, Helvetica, sans-serif" size="3">
              <input name="Adresse" type="text" id="Adresse" size="70" />
            </font></font></p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Code postal* :
              <input name="Code Postal" type="text" id="Code Postal" size="6" />
              Ville* :
              <input name="Ville" type="text" id="Ville" onblur="MM_validateForm('Adresse','','R','Code Postal','','R','Ville','','R');return document.MM_returnValue" size="30" />
              Pays :
              <input name="Pays" type="text" id="Pays" value="FRANCE" size="25" />
            </font></p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Tel* :
              <input name="Tel" type="text" id="Tel" size="15" />
              Fax :
              <input name="fax" type="text" id="fax" size="15" />
            </font></p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Email* :
              <input name="Email" type="text" id="Email" size="25" />
            </font></p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Demande de catalogue :
              <input name="Catalogue" type="checkbox" id="Catalogue" value="OUI" />
            </font></p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Demande de contact : <font size="3" face="Arial, Helvetica, sans-serif">
              <input name="Demande de contact" type="checkbox" id="Demande de contact" value="OUI" />
              </font> cr&eacute;neau horaire d'appel :
              <input name="cr&eacute;neau horaire" type="text" id="cr&eacute;neau horaire" size="25" />
            </font></p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Comment avez-vous connu notre site* :</font>
                <input name="connaissance site" type="text" id="connaissance site" size="50" />
            </p>
            <p align="left" class="Style2"><font size="3" face="Arial, Helvetica, sans-serif">Commentaires :</font>
              <textarea name="Commentaires" cols="70" id="Commentaires"></textarea>
              <br />
              <br /><p align="center"><input name="Submit" type="submit" value="Envoyer le formulaire" /></p>
</form>
</body>
</html>


Françoise
Bonjour,

6l20 t'as donné une partie de la réponse (il utilise juste une ancienne écriture d'accès aux nœuds).

Par exemple, tu peux utiliser directement l'identifiant (id) de ton élément pour lui fournir le focus soit :

document.getElementById('elementid').focus()


Et comme le dit Patidou cette pratique peut déranger certains utilisateurs ...
Sans parler d'un éventuel problème d'accessibilité, un problème d'ergonomie se pose.
Précision : déclencher ce code une fois la page chargée.
Pour cela, le mettre par exemple sur l'événement "onload" du "body" :
<body onload="document.getElementById('Nom').focus();">

Modifié par chadom (01 Sep 2008 - 23:59)
Sujet clos
Aller à