Processus de saisie en plusieurs étapes pour l’inscription des bénévoles
Dans le scénario d’inscription des bénévoles, finalisez un processus de saisie en plusieurs étapes : il inclut du contenu réel, des contrôles exploitables, un retour d’état clair et une mise en page adaptative selon les tailles d’écran.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Processus de saisie en plusieurs étapes pour l’inscription des bénévoles</title>
<style>
:root { --ink:#17241d; --paper:#f3f0e7; --accent:#af4f45; --secondary:#9eb49f; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.stack{display:flex;flex-direction:column;gap:18px}.panel{padding:28px;border-left:7px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.action{min-height:46px;padding:11px 18px;border:0;border-bottom:3px solid var(--ink);background:transparent;font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.metric{font:900 clamp(32px,7vw,64px)/1 ui-monospace,monospace}.status{min-height:22px;padding-top:12px;border-top:1px dashed var(--line)}.muted{color:color-mix(in srgb,var(--ink) 62%,transparent)}.chip{display:inline-block;padding:5px 8px;background:var(--secondary)}.meter{height:12px;border:1px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.stepper{display:grid;grid-template-columns:220px 1fr;gap:28px}.steps{display:grid;gap:8px;padding:0;margin:0;list-style:none}.steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px;border-radius:12px}.steps b{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:50%}.steps li[aria-current="step"]{background:var(--ink);color:var(--paper)}.step-panels{min-height:240px}.step-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--line)}.field{display:grid;gap:8px}.field input{padding:11px;border:1px solid var(--line);border-radius:9px}@media(max-width:700px){.stepper{grid-template-columns:1fr}.steps{grid-template-columns:repeat(3,1fr)}.steps li{grid-template-columns:1fr;text-align:center}.steps span{font-size:12px}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="editorial" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">editorial / processus de saisie en plusieurs étapes / ADVANCED</span><h1>Processus de saisie en plusieurs étapes pour l’inscription des bénévoles</h1><p class="intro">Dans le scénario d’inscription des bénévoles, finalisez un processus de saisie en plusieurs étapes : il inclut du contenu réel, des contrôles exploitables, un retour d’état clair et une mise en page adaptative selon les tailles d’écran.</p></div><span class="scenario">Inscription des bénévoles</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive du processus d’inscription des bénévoles en plusieurs étapes"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Inscription des bénévoles DISPATCH</span><h2>Tableau de bord de planification des bénévoles</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Guide d’enregistrement</option><option>Organisation du matériel</option><option>Aide sur place</option></select></label><label>Durée de service<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="21"><span>heure</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Accepter les créneaux</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Guide d’enregistrement</option><option value="2">Organisation du matériel</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:forms-input-multi-step --><div class="stepper panel"><ol class="steps" aria-label="Progression du processus"><li data-step-label="0" aria-current="step"><b>1</b><span>Choisir un plan</span></li><li data-step-label="1"><b>2</b><span>Informations complémentaires</span></li><li data-step-label="2"><b>3</b><span>Vérification terminée</span></li></ol><div class="step-panels"><section data-step-panel="0" tabindex="-1"><span class="eyebrow">STEP 1</span><h2>Inscription des bénévoles · Choisir un plan</h2><p class="muted">Déterminez une orientation à partir de plusieurs options claires.</p><div class="row"><button class="action is-active" type="button">Solution standard</button><button class="action" type="button">Solution flexible</button></div></section><section data-step-panel="1" hidden tabindex="-1"><span class="eyebrow">STEP 2</span><h2>Inscription des bénévoles · Informations complémentaires</h2><p class="muted">Complétez les informations nécessaires ; le contenu reste uniquement sur la page actuelle.</p><label class="field"><span>Remarques</span><input id="stepNote" autocomplete="off"></label></section><section data-step-panel="2" hidden tabindex="-1"><span class="eyebrow">STEP 3</span><h2>Volontariat · vérification terminée</h2><p class="muted">Après avoir vérifié le résumé, vous pouvez terminer cet exercice.</p><div class="metric">READY</div></section></div><div class="step-actions"><button id="stepBack" class="action" type="button" disabled>Étape précédente</button><span id="stepCounter">1 / 3</span><button id="stepNext" class="action primary" type="button" data-core-bridge="forms-input-multi-step">Suivant</button></div></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:forms-input-multi-step */
let currentStep = 0; const panels = [...document.querySelectorAll('[data-step-panel]')]; const labels = [...document.querySelectorAll('[data-step-label]')]; const back = document.querySelector('#stepBack'); const next = document.querySelector('#stepNext');
function renderStep() { panels.forEach((panel,index) => { panel.hidden = index !== currentStep; }); labels.forEach((label,index) => { if (index === currentStep) label.setAttribute('aria-current','step'); else label.removeAttribute('aria-current'); }); back.disabled = currentStep === 0; next.textContent = currentStep === panels.length - 1 ? 'Terminé' : 'Suivant'; document.querySelector('#stepCounter').textContent = (currentStep + 1) + ' / ' + panels.length; panels[currentStep].focus(); announce('Étape actuelle : choisir un plan, compléter les informations, vérifier et terminer'.split('、')[currentStep]); }
back.addEventListener('click', () => { currentStep = Math.max(0,currentStep - 1); renderStep(); }); next.addEventListener('click', () => { if (currentStep === panels.length - 1) { announce('Le processus d’inscription des bénévoles est terminé'); return; } currentStep += 1; renderStep(); });
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"forms-input-multi-step","selector":"[data-core-bridge=\"forms-input-multi-step\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Guide d’enregistrement","amount":12,"priority":"normal","touches":0}],["2",{"label":"Organisation du matériel","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' heure · '+bridge.summary;announce('Tâche en cours de planification des bénévoles :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' heure · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>