Boîtes de recherche

Ces informations s'adressent aux webmasters.

Principes

Les fonctions d'hyperappels peuvent facilement être utilisées pour insérer, dans la conception de pages web, des boîtes de recherche personnalisées, permettant aux utilisateurs de votre site d'accéder facilement et directement au dictionnaire en ligne, en tapant un mot dans une zone de saisie.

Ceci n'a bien sûr de sens que si les utilisateurs de votre site ont de leur côté, au moment où ils vont consulter vos pages, un accès possible au dictionnaire. Nous conseillons donc son intégration, par exemple, dans le portail d'un établissement universitaire ou institutionnel qui a souscrit à un abonnement au dictionnaire en ligne.

Note : si vous souhaitez intégrer une boîte de recherche à votre site, merci de toujours utiliser le logo suivant :

Utilisation

Les boîtes de recherche sont des formulaires HTML simples constitués d'une zone de saisie et d'une action associée à la touche Entrée ou à un bouton. Pour que cette action déclenche une recherche dans le dictionnaire voulu, il suffit d'utiliser la syntaxe par URL.

Les exemples ci-dessous donnent le code de base à utiliser, que vous pourrez ensuite personnaliser pour l'intégrer dans vos pages HTML.

Petit Robert

Voici un exemple de boîte de recherche simple, qui permet de chercher un mot dans le Petit Robert en ligne, et d'afficher le résultat dans une nouvelle fenêtre du navigateur :

<form action='https://petitrobert.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://petitrobert.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Petit Robert' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>

Notez que la variable de la zone de saisie doit s'appeler forme afin que la recherche fonctionne aussi en appuyant sur la touche Entrée.

Le Grand Robert & Collins

De même, voici un exemple de boîte de recherche simple, qui permet de chercher un mot ou bien n'importe quelle expression dans le Grand Robert & Collins, et d'afficher le résultat dans une nouvelle fenêtre :

<form action='https://grc.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #0073A8;border-radius:5px;width:250px;'>
<div style='padding:0; background:none; border:none;'>
<a href='https://grc.lerobert.com' target='_blank' style='display:block;background:transparent url(statics/img/GRCE-logo.svg) no-repeat 5px 6px;height:90px;align:left;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='mot' placeholder='Rechercher dans le Grand Robert & Collins' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>

Vous pouvez bien sûr adapter facilement ces exemples à vos pages web. À noter que, pour le Robert & Collins, il est également possible de faire des boîtes de recherches qui ouvrent par défaut le dictionnaire en interface anglaise, en utilisant la syntaxe d'URL adaptée.

Dictionnaire utilisé Code utilisé
Le Petit Robert <form action='https://petitrobert.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://petitrobert.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Petit Robert' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>
Le Petit Robert de la langue française et des noms propres <form action='https://petitrobert12.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://petitrobert12.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Petit Robert de la langue française et des noms propres' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>
Le Grand Robert <form action='https://grandrobert.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://grandrobert.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Grand Robert' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>
Le Grand Robert & Collins <form action='https://grc.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #0073A8;border-radius:5px;width:250px;'>
<div style='padding:0; background:none; border:none;'>
<a href='https://grc.lerobert.com' target='_blank' style='display:block;background:transparent url(statics/img/GRCE-logo.svg) no-repeat 5px 6px;height:90px;align:left;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='mot' placeholder='Rechercher dans le Grand Robert & Collins' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>
Le Robert Collège <form action='https://college.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://college.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Robert Collège' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>
Le Robert Junior <form action='https://junior.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://junior.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Robert Junior' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>
Le Robert illustré <form action='https://robertillustre.lerobert.com' role='search' method='get' target='_blank'>
<div style='font:400 10px Calibri, Helvetica, sans-serif;background:#fff;border: solid 3px #D7191B;border-radius:5px;width:250px;'>
<a href='https://robertillustre.lerobert.com' target='_blank' style='display:block;align:center;background:transparent url(statics/img/LOGO_DLR.jpg) no-repeat 5px 6px;height:70px;'></a>
</div>
<div style='width:232px;background:none;border:none;padding:10px;display:flex'>
<input type='text' name='forme' placeholder='Rechercher dans le Robert illustré' style='padding:0 10px;border-radius:5px 0 0 5px;background:#fff;outline:none;height:36px;line-height:36px;border:solid 1px #c0c0c0;cursor:text;flex-grow:2;' autocapitalize='off' autocomplete='off' autocorrect='off' spellcheck='false' title='Rechercher un mot' />
<button type='submit' style='width:36px;color:#227DAB;padding:6px;border-radius:0 5px 5px 0;background:#ddd;outline:none;height:36px;line-height:36px;border:none;cursor:pointer;'>
<svg focusable='false' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'></path>
</svg>
</button>
</div>
</div>
</form>