Version complète: sur le forum Webmaster Hub : Moteur de recherche
Webmaster Hub > Création et exploitation de Sites Internet > Accessibilité et Ergonomie Web
petit-ourson
lundi 4 octobre 2004 à 09:29
Bonjour,

J'ai un moteur de recherche à mettre sur un de mes sites. Celui-ci est composé d'une liste déroulante proposant la liste des catégories de mes produits, et d'un champ texte me permettant d'indiquer le nom du produit (ou un mot clef).

Je me demandais si je devais plutôt d'abord mettre la liste déroulante, ou plutôt le champ de texte ?

Actuellement, on retrouve souvent le champ libre avant la liste, une raison ?

Des suggestions ?

Merci
Monique
lundi 4 octobre 2004 à 12:49
Bonjour,

Un champ texte, avec l'utilisation de l'élément label est facilement accessible
HTML
<div>
<label for="recherche">Rechercher sur ce site&nbsp;:</label>
<input name="recherche" id="recherche" onfocus="this.value=''">
<input name="Submit" value="Ok" class="valid" type="submit">
</div>


Par contre, comme une liste déroulante utilise du JavaScript elle est plus complexe à mettre en place :
- la présence d'un bouton "envoyer" est indispensable
- les liens doivent être repris en dur dans la balise noscript

Un exemple : Formulaire et JavaScript
petit-ourson
lundi 4 octobre 2004 à 13:11
En fait c'est sur un autre point que je me pose des questions ;o)

CODE
<div>
<label for="recherche">Produit recherché&nbsp;:</label>
<input name="recherche" id="recherche" onfocus="this.value=''">
<label for="liste">Catégories&nbsp;:</label>
<select id="liste" name="liste">
<option>Livres</option>
<option>Disques</option>
</select>
<input name="Submit" value="Ok" class="valid" type="submit">
</div>


ou

CODE
<div>
<label for="recherche">Catégories&nbsp;:</label>
<select id="liste" name="liste">
<option></option>
<option></option>
</select>
<label for="recherche">Produit recherché&nbsp;:</label>
<input name="recherche" id="recherche" onfocus="this.value=''">
<input name="Submit" value="Ok" class="valid" type="submit">
</div>


Enfin ce n'est peut etre pas un sujet de débat ...
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.