Sélecteur 1000 langues en HTML

Pour créer des questionnaires ou formulaires relatifs à des projets de recherche en linguistique, il est parfois nécessaire de proposer à l’utilisateur/utilisatrice de renseigner une ou plusieurs langue(s) : par exemple pour indiquer quelle(s) langue(s) lui sont connues, lister les langues présentes dans son environnement à une période donnée, spécifier quelle(s) langue(s) elle ou il utilise selon les contextes, renseigner dans quelle(s) langue(s) est rédigé un document donné, etc. Il est beaucoup plus simple, notamment pour analyser ensuite les réponses fournies, de disposer d’une liste de référence affichée sous forme de liste déroulante plutôt que de recueillir une réponse sous forme de texte libre.

Je vous présente ici un sélecteur prêt à l’emploi, au format HTML, qui permet de faire un choix parmi une liste de 1193 langues différentes.

Télécharger le sélecteur

Démo en ligne
Vous pouvez cliquer ici pour tester directement le sélecteur sur la page qui lui est consacrée. Le code source est également disponible sur Github et Gitlab, en utilisant respectivement les deux boutons ci-dessous.

Comme indiqué dans les différents entrepôts où les fichiers sont mis à disposition, je ne suis pas l’auteur de la liste ni de la classification par familles, toutes deux ont été extraites de l’article Liste de langues de Wikipédia en français (auteurs). Contenu soumis à la licence CC-BY-SA.

Utiliser le sélecteur

Je vous conseille de d’abord passer par la page de démonstration afin de vérifier si ce sélecteur est proche de ce que vous recherchez, puis de télécharger le code source que vous pourrez ensuite soit réutiliser tel quel, soit modifier pour l’adapter au mieux à votre projet.

Tester avec la démonstration

La page de démonstration vous permet d’essayer le sélecteur en deux versions : avec et sans indication des familles de langue (la classification ne fait manifestement pas l’unanimité1).

Il est à noter qu’elle est hébergée sur un site Github Pages, qui par conséquent ne peut être que statique. Puisqu’il n’est techniquement pas possible d’envoyer un formulaire, je n’ai pas inclus de bouton. Lorsqu’une langue a été sélectionnée, un check s’affiche sur la ligne correspondante, comme ceci :

Bien sûr, le but étant d’inclure ce sélecteur dans un “vrai” formulaire, si vous l’intégrez dans votre formulaire pourvu d’un bouton d’envoi, il fonctionnera en renvoyant comme valeur la chaîne de caractères correspondant à la langue choisie2.

Réutiliser le code source

Le code source est disponible sur Github et Gitlab. Il se présente sous forme d’une page HTML minimale affichant uniquement le sélecteur. Si vous ne voulez récupérer que le code qui correspond strictement au sélecteur afin de l’ajouter à votre propre document HTML, il est délimité par deux commentaires, <!-- Début du sélecteur --> et <!-- Fin du sélecteur -->.

Prérequis : La raison pour laquelle j’ai intégré le sélecteur dans une page, en dehors du fait que c’est assez pratique de pouvoir l’afficher telle quelle dans un navigateur, est que Bootstrap 4 et bootstrap-select sont requis pour qu’il fonctionne correctement3. Le code source mis à disposition comporte déjà les feuilles de style et scripts nécessaires au bon fonctionnement du sélecteur (ils se trouvent dans <head> et juste avant la balise fermante </body>). Si passer par les CDN ne vous dérange pas, vous pouvez les reprendre tels quels4.

Adapter le code

En fonction de votre projet, il faudra peut-être adapter le code pour qu’il corresponde pleinement à vos besoins. Voici quelques suggestions de modifications et comment les mettre en place :

Inclure la liste d’options en PHPLa liste étant très longue, l’ajouter directement dans une page HTML produit un code de plusieurs milliers de lignes (en particulier si vous voulez proposer plusieurs sélecteurs sur la même page). Si votre page est hébergée sur un serveur qui supporte le PHP, vous pouvez par exemple enregistrer la liste d’options5 dans un fichier séparé, intitulé par exemple liste_options.php. Il suffira ensuite de l’inclure avec une ligne de type <?php include('chemin/vers/liste_options.php'); ?> à la place des lignes correspondantes dans votre document HTML, qui sera alors bien plus lisible.
Recherche par initialeEn l’état, quand on tape une chaîne de caractères dans le champ de recherche lorsque la liste est déroulée, les résultats renvoyés correspondent aux options qui contiennent cette chaîne, peu importe à quelle position elle se situe. Pour ne rechercher que les options qui commencent par la chaîne de caractères entrée, il faut ajouter l’attribut data-live-search-style="startsWith" à select.
En résumé, remplacer la ligne :
<select id="selectlanguage1" class="custom-select form-control selectpicker show-tick" data-lang="fr_FR" data-live-search="true">
Par la suivante :
<select id="selectlanguage1" class="custom-select form-control selectpicker show-tick" data-lang="fr_FR" data-live-search="true" data-live-search-style="startsWith">
Suppression de languesPour retirer une langue de la liste, il faut simplement supprimer la ligne <option>...</option> correspondante.
À titre informatif, les langues mortes sont signalées par le caractère †. Si vous voulez conserver uniquement les langues vivantes, vous pouvez supprimer toutes les lignes <option>...</option> comportant ce caractère.
Ajout de languesLa liste proposée est certes étendue mais pas exhaustive. Pour ajouter une langue, il suffit d’ajouter une ligne ayant la forme <option value="nom de la langue">nom de la langue</option>. Attention, l’attribut value est indispensable.
Sélectionner plusieurs itemsPar défaut il n’est possible de sélectionner qu’une seule option dans la liste. Si vous voulez autoriser les réponses multiples, il faut ajouter l’attribut multiple à select.
C’est-à-dire, remplacer la ligne :
<select id="selectlanguage1" class="custom-select form-control selectpicker show-tick" data-lang="fr_FR" data-live-search="true">
Par :
<select id="selectlanguage1" class="custom-select form-control selectpicker show-tick" data-lang="fr_FR" data-live-search="true" multiple>
Citer ce billet : “Sélecteur 1000 langues en HTML”, par Alexander Delaporte. Publié sur Tekipaki le 03/11/2020. Lien : https://tekipaki.hypotheses.org/1159.
  1. Pour rappel, celle-ci est issue de cette page Wikipédia. []
  2. Vous en avez notamment un aperçu dans la bannière qui illustre cet article. []
  3. Je ne détaille pas davantage la mise en place de Bootstrap et bootstrap-select (vous trouverez toutes les informations nécessaires dans leurs documentations respectives). []
  4. En vérifiant éventuellement s’ils sont bien à jour, en fonction de la date à laquelle vous les utilisez. []
  5. C’est-à-dire les lignes de type <option>...</option> du code. []

Auteur/autrice : Alexander Delaporte

Ingénieur d'études au Centre de recherches linguistiques sur l'Asie Orientale et chercheur associé BnF 2019-2021

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.