Un seul formulaire HTML pour accéder à plusieurs moteurs de recherche

2018-04-06
mise à jour : 2018-10-07

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 à la page des Archives de l'ensemble du site. 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 de la valeur de l'attribut name et de la valeur de l'attribut value correspondent aux exigences différentes des moteurs de recherche:

       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.

Comme le passage barré l'indique, j'espérais avoir trouvé une approche qui était indépendante de JavaScript. Or l'événement onclick qui est utilisé pour modifier l'action du formulaire quand le bouton Google ou Bing est activé exécute une fonction JavaScript. Donc si JavaScript est désactivé par l'utilisateur, la substitution ne se fait pas et c'est l'action par défaut qui est exécutée. Ainsi la requête est acheminée vers DuckDuckGo qu'importe le bouton activé. Parce que l'attribut pour spécifier le site où limité la recherche n'est pas ce que demande DuckDuckGo, la recherche faite quand on clique sur Google ou Bing et que JavaScript est désactivé sera faite par DuckDuckGo dans l'ensemble de l'internet.

Si quelqu'un pouvait me fournir une solution qui n'utilise que le HTML/CSS, j'en serais très reconnaissant.

2018-10-07