{"id":124649,"date":"2022-11-16T17:42:09","date_gmt":"2022-11-16T16:42:09","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-data-list-with-radio-buttons\/"},"modified":"2025-02-03T16:44:52","modified_gmt":"2025-02-03T15:44:52","slug":"how-to-create-a-data-list-with-radio-buttons","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/comment-selectionner-lignes-liste-donnees-boutons-radio","title":{"rendered":"Comment s\u00e9lectionner les lignes d&rsquo;une liste de donn\u00e9es \u00e0 l&rsquo;aide de boutons radio ?"},"content":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 utiliser des boutons radio pour s\u00e9lectionner une ligne de donn\u00e9es.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73206547\/index.html\" width=\"820px\" height=\"350px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3><strong>Voir&nbsp;<\/strong><\/h3>\n<ul>\n<li>Allez dans la palette des ma\u00eetres de donn\u00e9es et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour cr\u00e9er un nouveau \u00ab\u00a0ma\u00eetre de donn\u00e9es\u00a0\u00bb, nommez-le \u00ab\u00a0\u00c9chantillon\u00a0\u00bb, cr\u00e9ez deux attributs : \u00ab\u00a0Nom\u00a0\u00bb et \u00ab\u00a0Nom de famille\u00a0\u00bb, cliquez sur \u00ab\u00a0Ok\u00a0\u00bb.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-1.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-1.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-1.png\" alt=\"Cr\u00e9er une base de donn\u00e9es\">Cr\u00e9er une base de donn\u00e9es<\/source><\/video><\/li>\n<li>Cliquez avec le bouton droit de la souris sur la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous venez de cr\u00e9er et s\u00e9lectionnez \u00ab\u00a0Afficher et modifier les enregistrements\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-2.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<li>Inscrivez vos donn\u00e9es d&rsquo;exemple, puis appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-3.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-la sur le canevas, la fen\u00eatre \u00ab\u00a0Nouvelle liste de donn\u00e9es\u00a0\u00bb sera activ\u00e9e, et vous serez invit\u00e9 \u00e0 nommer votre liste, puis \u00e0 choisir la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous avez cr\u00e9\u00e9e et \u00e0 s\u00e9lectionner tous les attributs. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de la liste. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\" alt=\"Cr\u00e9er une liste de donn\u00e9es\">Cr\u00e9er une liste de donn\u00e9es<\/source><\/video><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">Dans la biblioth\u00e8que des widgets de base, formulaires et entr\u00e9es, s\u00e9lectionnez un \u00ab\u00a0bouton radio\u00a0\u00bb, maintenez la touche commande (Mac) ou contr\u00f4le (Windows) enfonc\u00e9e et faites-le glisser \u00e0 l&rsquo;int\u00e9rieur de la premi\u00e8re rang\u00e9e. Vous verrez une teinte bleue lorsque vous tirez un \u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur.<br \/>\n<\/span><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-5.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-4.png\" alt=\"Ins\u00e9rer un bouton radio\">Ins\u00e9rer un bouton radio<\/source><\/video><\/li>\n<li><span style=\"font-weight: 400;\">Placez deux \u00ab\u00a0textes\u00a0\u00bb \u00e0 c\u00f4t\u00e9 de votre \u00ab\u00a0liste de donn\u00e9es\u00a0\u00bb, \u00e9crivez \u00ab\u00a0Nom\u00a0\u00bb et \u00ab\u00a0Pr\u00e9nom\u00a0\u00bb, puis placez deux \u00ab\u00a0champs de texte de saisie\u00a0\u00bb \u00e0 c\u00f4t\u00e9 de chaque texte.<br \/>\n<\/span><\/li>\n<li><span style=\"font-weight: 400;\">S\u00e9lectionnez le \u00ab\u00a0champ de texte de saisie\u00a0\u00bb et, dans la palette Propri\u00e9t\u00e9s, s\u00e9lectionnez la bordure inf\u00e9rieure pour la rendre visible dans la simulation, puis r\u00e9p\u00e9tez l&rsquo;op\u00e9ration pour le deuxi\u00e8me \u00ab\u00a0champ de texte de saisie\u00a0\u00bb.<\/span><\/li>\n<li>L&rsquo;en-t\u00eate de la \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb peut \u00eatre modifi\u00e9 \u00e0 partir de la palette des propri\u00e9t\u00e9s pour changer l&rsquo;arri\u00e8re-plan et la couleur du texte.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-6.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">S\u00e9lectionnez le \u00ab\u00a0bouton radio\u00a0\u00bb et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb dans la palette des \u00e9v\u00e9nements.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-7.png\" alt=\"\" width=\"792\" height=\"337\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set value to an element\u00a0\u00bb et cliquez sur le nom \u00ab\u00a0Input text field\u00a0\u00bb.<\/span><\/li>\n<li>S\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb pour la valeur et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71239\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-data-list-radio-buttons-8.png\" alt=\"\" width=\"792\" height=\"337\"><\/li>\n<li>Glissez et d\u00e9posez l&rsquo;entr\u00e9e [Sample .Name] dans le champ du constructeur d&rsquo;expression. <span style=\"font-size: inherit;\"><span style=\"font-size: inherit;\">Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767359228\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Retournez dans la palette \u00c9v\u00e9nements, avec le bouton radio s\u00e9lectionn\u00e9, et cliquez sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter un nouvel \u00e9v\u00e9nement.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Set value to an element\u00a0\u00bb et cliquez sur le dernier nom \u00ab\u00a0Input Text Field\u00a0\u00bb.<\/span><\/li>\n<li>S\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb pour la valeur et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<\/li>\n<li>Faites glisser et d\u00e9posez l&rsquo;entr\u00e9e [Sample .Last name] dans le champ du constructeur d&rsquo;expression. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767359256\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet exemple, vous apprendrez \u00e0 utiliser des boutons radio pour s\u00e9lectionner une ligne de donn\u00e9es. Voici comment le construire : Voir&nbsp; Allez dans la palette&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8426,8428],"tags":[],"class_list":["post-124649","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-formulaires-et-donnees-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124649"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124649"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124649\/revisions"}],"predecessor-version":[{"id":126209,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124649\/revisions\/126209"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}