Un seul formulaire HTML pour accéder à plusieurs moteurs de recherche
2018-04-06

Il y a peine deux jours, j'avais éliminé la barre de recherche du haut de chaque page de ce site. Je voulais avoir plus d'un moteur de recherche et je ne trouvais pas une façon compacte de le faire. Puis j'ai pensé à une boîte de saisie pour les mots recherchés suivie de trois boutons pour chacun des moteurs de recherche, comme on peut voir ci-dessus.

Toutefois, je ne voulais de Javascript pour gérer les boutons. Je préfère éviter le recours aux scripts qui peuvent être désactivés. Évidemment, d'autres avaient déjà trouvé la façon de faire, il ne fallait que trouver la bonne incantation magique pour obtenir deux bonnes références des moteurs de recherche.

Form submitting data to new window and to two different pages
sur plus2net avant le 27 juin 2014.
Separate Form Submit Buttons That Go To Different URLs
de Chris Coyier sur CSS-TRICKS le 2 août 2017.

Voici la leçon tirée de cette lecture: un formulaire assez simple.

<form name="sf" method="get" target="_blank" action="https://duckduckgo.com"> <input type="text" name="q" value="" size=25 onclick="this.value='';" placeholder="..." > <button type='submit' name="sites" value="sigmdel.ca/michel">DuckDuckGo</button> <button type='submit' name="sitesearch" value="sigmdel.ca/michel" onclick="sf.action='https://www.google.com/search'; return true;">Google</button> <button type='submit' name="q1" value="site:sigmdel.ca/michel" onclick="sf.action='https://www.bing.com/search'; return true;">Bing</button> </form>

Les trois premières lignes correspondent à peu près à un formulaire de recherche typique. En fait, c'est comme le premier qu'on retrouve ici à la page des Archives. Les deux autres lignes définissant les boutons associés aux autres moteurs sont sensiblement les mêmes sauf pour l'addition d'un attribut onclick que redéfinit l'action du formulaire. C'est ainsi que l'URL est modifiée pour atteindre le moteur de recherche visé. Les différences des valeurs des attributs name et value correspondent aux exigences différentes des moteurs:

       https://duckduckgo.com/?q=arduino&sites=sigmdel.ca/michel
  https://www.google.ca/search?q=arduino&sitesearch=sigmdel.ca/michel
   https://www.bing.com/search?q=arduino&q1=site:sigmdel.ca/michel

C'est simple, c'est astucieux et je n'y serais pas arrivé sans l'aide des autres. Encore une fois, merci à toutes les personnes qui partagent leur savoir aussi généreusement.