[Resolu] Position formulaire de recherche + ancre/focus

jpv a écrit :
Oui donc, tu à implémenté deux id "identiques" pour l'ancre et l'input du formulaire, changes celui de l'ancre et tout rentrera dans l'ordre

jpv a écrit :
Par ailleurs tu n'à pas de bouton "envoyer" dans ton formulaire, bien que entrée lance automatiquement le formulaire, c'est quand-même fortement conseillé de mettre un bouton "envoyer"...
Ca te permettra de garantir l'envoi du formulaire "dans tout les cas".

jpv a écrit :
ps: Joli site

<form action="search.php" method="get">
 	<fieldset>	
           <a name="rech" onfocus="document.getElementById('q').focus()"></a>
	     <label for="q">Recherche :</label>
	      <input class="recherche" accesskey="4" type="text" size="15" name="q" value="" id="q" />
              <input class="submit" type="submit" value="ok" name="s" id="search-s" />
         </fieldset>
 

dominique a écrit :
Bonjour et merci beaucoup pour toutes ces explications jpv

Je viens de faire des essais, avec firefox, aucun soucis, par contre, avec ie6, lorsque je clique sur le lien vers le moteur de recherche + une tab, je me retrouve sur le premier lien de la page ?

knarf a écrit :

La question est le lien vide?

<a id="foo" name="foo"></a>
<a name="foo"></a>
<a id="foo"></a>
<a id="foo" name="foo" href="#"></a>

	<a href="#recherche" accesskey="4">Aller à la recherche</a>

<form action="machin" method="get">
	<fieldset>
		<a href="#" name="recherche" id="recherche" onfocus="document.getElementById('q').focus()"></a>
		<h2><label for="q">Rechercher</label></h2>
		<p>
		    <input name="q" id="q" type="text" size="7" value="truc" title="Saisir les mots clés pour votre recherche" />
		    <input type="submit" class="submit" value="ok" />
		</p>
   </fieldset>
</form>

<div id="search">
		<form action="/dotclear/index.php" method="get">
		
			<h2><label for="q">Rechercher</label></h2>
			<p class="field"><input name="q" id="q" type="text" size="10"
			value="" accesskey="4" />
			<input type="submit" class="submit" value="ok" /></p>
		
		</form>
	</div>

Vero a écrit :
Pour être sûre que nous parlons de la même chose, je vous invite à relire le topic à partir de là

Vero a écrit :

Tu mets l'accesskey dans l'input ???

jpv a écrit :
Bonsoir,

Le problème d'utiliser l'Id comme cible d'une ancre est de désynchroniser le focus du couple pointeur souris/tabulation.

Avec cette méthode, le pointeur souris ne renvois pas de prise de focus, dés lors les deux actions click souris+tabulation+tabulation et tabulation+entrée+tabulation ne renvoie pas le même résultat.

Conserver synchrone le focus du pointeur de la souris et de la tabulation est très bénéfique car il permet d'utiliser indifféremment les deux méthodes.

Donc, de préférence, il vaut mieux utiliser des ancres que des ID comme cible.

Après, dans le cas d'un formulaire de recherche simple, l'ancre peut-être avant ou après le fieldset ou directement sur le label, le résultat sera identique : les deux séquences click souris+tabulation+tabulation et tabulation+entrée+tabulation renverrons une prise de focus sur l'input de recherche, asurant la cohérence de la navigation.

JP

<a href="#mon_ancre" onclick="document.getElementById('recherche').focus();return false">aller à la recherche</a>
<form id="recherche2">
	<a href="#" name="mon_ancre" ></a>
  <fieldset>
     <legend>Formulaire de recherche</legend>
     <label for="recherche">Rechercher<label>
     <input type="text"  id="recherche" name="recherche" title="Tapez votre recherche" accesskey="4"/>
     <input type="submit" class="submit" value="ok" />
  </fieldset>
</form>

<a href="#mon_ancre" id="lien_recherche">aller à la recherche</a>

<form id="recherche2">

	<a href="#" name="mon_ancre" ></a>

  <fieldset>

     <legend>Formulaire de recherche</legend>

     <label for="recherche">Rechercher<label>

     <input type="text"  id="recherche" name="recherche" title="Tapez votre recherche" accesskey="4"/>

     <input type="submit" class="submit" value="ok" />

  </fieldset>

</form>

function go_recherche() {

document.getElementById('recherche').focus();

}

window.onload=function() {      

document.getElementById('lien_recherche').href="javascript:go_recherche()";

}

agilis a écrit :

Pour ce qui est de la position du moteur de recherche, j'ai lu à plusieurs reprises (je ne sais plus bien où) qu'il fallait le placer en haut à droite de la page car, inconsciemment, c'est là que le visiteur le cherche.