Thème Paris.fr
<@cForm name='info' >
<@cStepGroup title='Groupe 1' iterable=true iteration=0 iterationMax=10 >
<@cFieldset legend='Informations personelles' showLabel=false >
<@cRow>
<@cCol>
<@cField label='Nom' for='name' labelData='<small class="text-muted">(Nom de famille)</small>'>
<@cInput name='name' placeholder='Exemple: Durand' helpMsg='Saisir votre nom de famille' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname'>
<@cInput name='firstname' required=false helpMsg='Saisir votre prénom' />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
</@cStepGroup>
<@cRow>
<@cCol>
<@cLabel label='Activité'>
<@cSelect name='activite' helpMsg='Choisir une activité' >
<@cOption label='' value='0' />
<@cOptgroup label='Sport collectifs' />
<@cOption label='Football' value='1' />
<@cOption label='Basket' value='2' />
<@cOptgroup label='Sport Nautiques' />
<@cOption label='Voile' value='3'/>
<@cOption label='Pédalo' value='4'/>
</@cSelect>
</@cLabel>
</@cCol>
<@cCol cols='4'>
<@cLabel label='Date du jour' for='date_info' />
<@cFormHelp id='date_info' label='Aide ?' />
<@cInputDate name='date_info' label='Date du jour' value=.now?date?iso_utc options={"todayButton":false} />
</@cCol>
<details id="help_date_info" style="position: relative;z-index: 100;" ><summary>Aide ?</summary><ul style="width: 32rem; border: 1px solid black;background-color:white; padding:var(--spacing-1) var(--spacing-5); position: absolute;"><li>show ↓ (ArrowDown) Show the picker</li><li>hide N/A Hide the picker</li><li>toggle Esc (Escape) Toggle the deisplay of the picker</li><li>prevButton Ctrl/Meta + ← (ArrowLeft) Perform the Prev button action</li><li>nextButton Ctrl/Meta + → (ArrowRight) Perform the Next button action</li><li>viewSwitch Ctrl/Meta + ↑ (ArrowUp) Perform the View switch action</li><li>clearButton Ctrl/Meta + Backspace Perform the Clear button action</li><li>todayButton Ctrl/Meta + . Perform the Today button action</li><li>exitEditMode Ctrl/Meta + ↓ (ArrowDown) Exit edit mode</li></ul></details>' value=.now?date?iso_utc options={"todayButton":false}
</@cRow>
<@cRow>
<@cCol cols='6'>
<@cInputDateRange name='date_range' label='Créneaux' />
</@cCol>
</@cRow>
<@cFieldset legend='Justificatif de domicile' showLabel=false >
<@cRow>
<@cCol>
<div class="position-absolute p-3" style="z-index:5;top:0;right:0" >
<div id="liveFileToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="me-auto">Attention</strong>
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white text-dark">Pas d'upload possible sur la démo</div>
</div>
</div>
<@cInputDropFiles label='Justificatif de domicile' required=true nbUplodadedFiles=2 name='files_domicile2' id='domicile2' handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} hasFiles=true formSubmitButtonName='doSaveForm'>
<@cInputDropFilesItem name='file_Upload_1' label='Mon attestation.docx' idx=1 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} fileSize=3000 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
<@cInputDropFilesItem name='file_Upload_2' label='Justificatif.docx' idx=1 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} fileSize=60 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
</@cInputDropFiles>
</@cCol>
</@cRow>
</@cFieldset>
<@cFieldset legend='Conservation des données' showLabel=false >
<@cRow>
<@cCol params='aria-describedby="mydata"'>
<@cField>
<@cLabel label='Conserver ces données' for='mydata' />
<@cRow>
<@cCol role="radiogroup" params="aria-label='choix de la conservation des données'">
<@cRadio name='mydata' id='md2' label='Oui' value='1' inline=true />
<@cRadio name='mydata' id='md1' label='Non' value='2' inline=true />
</@cCol>
</@cRow>
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cRow>
<@cCol>
<@cField class='mt-m'>
<@cBtn label='Annuler' class='tertiary'>
<@parisIcon name='close' />
</@cBtn>
<@cBtn label='Valider' class='primary' id='doSaveForm' />
<@parisIcon name='check' />
</@cBtn>
</@cField>
</@cCol>
</@cRow>
</@cForm>
<form method="post" name="info">
<section class="step step-current " id="current_step">
<section class="step-title">
<div class="container">
<h3 class="title" data-step="1" title="Formulaire de test - current step" aria-current="step">
<span class="step-number">
1</span>
<span>
Formulaire de test</span>
</h3>
</div>
</section>
<div class="container">
<section class="step-content">
<p class="mandatory-warning visually-hidden">
Fields followed by an asterisk * are mandatory.</p>
<div class="row ">
<div class="col ">
<div class="container">
<fieldset class="w-100 flex-fill row step-group " id="fieldset-id-87151647728261" role="group" aria-labelledby="legend-id-87151647728261"'>
<legend class="col-12 " >
<span class="h3 group-title">
Groupe Etat-civil
<button class="btn btn-primary ms-auto" type="submit"name="action_addIteration" value="add_0">
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Add</span>
</button>
</span>
</legend>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand" aria-describedby="help_name">
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="" aria-describedby="help_firstname">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="container">
<fieldset class="w-100 flex-fill row step-group " id="fieldset-id-93924053031401" role="group" aria-labelledby="legend-id-93924053031401"'>
<legend class="col-12 d-flex justify-content-between align-items-center" >
<span class="h3 group-title">
Groupe Etat-civil (2)
<div class="btn btn-group ms-auto mt-0">
<button class="btn btn-danger me-sm ms-auto mt-0" type="submit"name="action_removeIteration" value="rm_1">
<svg class="paris-icon paris-icon-trash"data-mce-svg="paris-icon paris-icon-trash" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-trash"></use>
</svg>
<span class="btn-label">
Delete</span>
</button>
<button class="btn btn-primary ms-auto" type="submit"name="action_addIteration" value="add_1">
<svg class="paris-icon paris-icon-plus"data-mce-svg="paris-icon paris-icon-plus" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Add</span>
</button>
</div>
</span>
</legend>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand" aria-describedby="help_name">
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="" aria-describedby="help_firstname">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row ">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Fields followed by an asterisk * are mandatory.</p>
</div>
</div>
<div class="row ">
<div class="col-12 d-flex justify-content-center justify-content-sm-end">
<ul class="list-unstyled d-flex justify-content-end flex-column flex-sm-row align-items-center" >
</ul>
</div>
</div>
</section>
</div>
</section>
<div class="modal cmodal fade" id="reset-stepModal" role="dialog" aria-labelledby="modalreset-stepTitle" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h5 main-color" id="modalreset-stepTitle">
Supprimer la sauvegarde</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-tertiary m-1" type="button"data-bs-dismiss="modal">
<span class="btn-label ">Non revenir sur ma démarche</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Oui supprimer les informations</span></button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const saveStep = document.getElementById('save-step-status');
if(saveStep){
const at = saveStep.querySelector('.alert-title');
const btnReset = document.createElement('button');
btnReset.classList.add('btn', 'btn-tertiary', 'ms-sm');
btnReset.innerHTML = 'Supprimer la sauvergarde';
btnReset.setAttribute('type', 'button');
btnReset.setAttribute('data-bs-target', '#reset-stepModal');
btnReset.setAttribute('data-bs-toggle', 'modal');
at.appendChild(btnReset);
const btnModalReset = document.querySelector('#modal-reset-backup');
btnModalReset.addEventListener('click', (e) => {
const resetBackup = document.getElementById('');
resetBackup.click();
});
}
});
</script>
<fieldset id="fieldset-id-104082660986111" role="group" aria-labelledby="legend-id-104082660986111"'>
<legend class=" visually-hidden" id="legend-id-104082660986111" >Informations personelles</legend>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand" aria-describedby="help_name">
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="" aria-describedby="help_firstname">
</div>
</div>
</div>
<div class="row ">
<div class="col-8 ">
<div class="mb-xs">
<label class="form-label" for="password">
Mot de passe
</label>
<label class="form-label" for="password">
<span class="main-danger-color" tabindex="0" title="Mandatory">*</span>
</label>
<p class="form-text " id="help_password">
Please enter your new password. It must contain at least 8 characters, and consist of at least 1 lowercase, 1 uppercase, 1 number and 1 special character.</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="password" id="password" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#password" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color"data-mce-svg="paris-icon paris-icon-eye-off" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</fieldset>
<div class="row ">
<div class="col-4 ">
<label class="form-label" for="activite">
Activité
</label>
<p class="form-text " id="help_activite">
Choisir une activité</p>
<select name="activite" class="form-select" aria-describedby="help_activite">
<option value="0"></option>
<optgroup label="Sport collectifs" >
</optgroup>
<option value="1">Football</option>
<option value="2">Basket</option>
<optgroup label="Sport Nautiques" >
</optgroup>
<option value="3">Voile</option>
<option value="4">Pédalo</option>
</select>
</div>
<div class="col-4 ">
<label class="form-label" for="date_info">
Date du jour
</label>
<p class="form-text " id="help_date_info">
La date du jour !</p>
<div class="input-group">
<input type="text" class=" form-control" name="date_info" id="date_info" value="2025-07-03">
<span class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = {todayButton : false, };
const themeOptions = {daysOfWeekDisabled: [0,6],};
let showFormat=getDatePickerDateFormat( navigator.language );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdate_info = document.querySelector('#date_info')
const dtOptionsdate_info = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdate_info = new themeParisFrDatepicker( elemdate_info, dtOptionsdate_info );
});
</script>
</div>
</div>
<div class="row ">
<div class="col-6 ">
<div class="daterange " id="dtRange">
<label class="form-label" for="dtRange_range_start">
Créneaux
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date_range" id="dtRange_range_start" value="">
<label class="form-label visually-hidden" for="dtRange_range_end">
Créneaux
</label>
<input type="text" class=" form-control" name="date_range_range_end" id="dtRange_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda"data-mce-svg="paris-icon paris-icon-agenda" focusable="false" role="img">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {daysOfWeekDisabled: [0,6],};
let showFormat=getDatePickerDateFormat( navigator.language );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|', // Delimiter for mutlidate
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeOptionsdtRange = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRange = document.getElementById( 'dtRange' );
const rangepickerdtRange = new DateRangePicker( elDtPickerWrapperdtRange, dtRangeOptionsdtRange);
rangepickerdtRange.inputs.forEach((input) => {
let isoInput = null;
input.addEventListener('changeDate', (ev) => {
const {date} = ev.detail;
const dtIso = `${date.toISOString()}`;
if( isoInput === null ){
isoInput = input.cloneNode(true);
input.removeAttribute('name');
isoInput.type = 'hidden';
isoInput.id = input.id + '_hidden';
elDtPickerWrapperdtRange.append( isoInput );
}
isoInput.value = dtIso ;
});
});
});
</script>
</div>
</div>
<fieldset id="fieldset-id-117627471592391" role="group" aria-labelledby="legend-id-117627471592391"'>
<legend class=" visually-hidden" id="legend-id-117627471592391" >Justificatif de domicile</legend>
<div class="row ">
<div class="col ">
<div id="toastContainer1" class="toast-container position-static p-3 ml-l w-100 d-flex justify-content-end" style="position-static">
<div id="toastFile1" class="toast" role="alert" data-autohide="true" data-delay="2000" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Attention</strong>
<button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="Close">×</button>
</div>
<div class="toast-body">
Pas d'upload possible sur la démo
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Récupérer le conteneur spécifique par son identifiant
var container = document.getElementById('toastContainer1');
var toastElList = [].slice.call(container.querySelectorAll('.toast'));
var option = { delay: 0, animation: true, autohide: false };
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl, option);
});
// Afficher les toasts au chargement si showAll est vrai
toastList.forEach(function(toast) {
toast.show();
});
});
</script>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="row group-files dropzone ">
<div class="col">
<label id="lbdomicile2" class="" for="domicile2">Justificatif de domicile <span class="main-danger-color" tabindex="0" title="Mandatory">*</span></label>
<div id="group-domicile2" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs is-required formsAsynchronousUploadHandler"aria-required="true" data-nbuploadedfiles="2" name="files_domicile2" id="domicile2" multiple="multiple">
<svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<p class="flex-1 text-left ms-sm mb-0">Drop your files here or <span class="main-info-color text-underline">Select</span></p>
</div>
<div id="_file_error_box_domicile2"></div>
<div id="progress_domicile2" class="progress" style="display:none;">
<div id="progress-bar_domicile2" class="progress-bar progress-bar-success progress-bar-striped"></div>
</div>
<div class="form-files-group" id="_file_deletion_label_domicile2">
<ul id="_file_deletion_domicile2" class="files-group">
<li class="files-item" id="_file_uploaded_file_Upload_11">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_11">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_1&field_index=1&fileName=Mon attestation.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Download Mon attestation.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Mon attestation.docx</span>
<span class="file-item-info">3 Ko</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_file_Upload_11" fieldName="file_Upload_1" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Mon attestation.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
<li class="files-item" id="_file_uploaded_file_Upload_21">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_21">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_2&field_index=1&fileName=Justificatif.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Download Justificatif.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Justificatif.docx</span>
<span class="file-item-info">60 o</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_file_Upload_21" fieldName="file_Upload_2" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Justificatif.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="fieldset-id-122013674243961" role="group" aria-labelledby="legend-id-122013674243961"'>
<legend class=" visually-hidden" id="legend-id-122013674243961" >Conservation des données</legend>
<div class="row ">
<div class="col " aria-describedby="mydata">
<div class="mb-xs">
<label class="form-label" for="mydata">
Sauvegarder ces données
</label>
<div class="row ">
<!-- Warning : wrong or deprecated argument(s) : role, ... -->
<div class="col " aria-label='Choix de la sauvegarde des données'>
<div class="form-check form-check-inline">
<input type="radio" id="md2" name="mydata" class="form-check-input" value="1">
<label class="form-label form-check-label" for="md2">
Oui
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="md1" name="mydata" class="form-check-input" value="2">
<label class="form-label form-check-label" for="md1">
Non
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="form-label" for="datatype">
Type de sauvegarde
</label>
<div class="row ">
<div class="col " aria-label='Choix du type de sauvegarde des données'>
<div class="form-check">
<input type="checkbox" id="dta" name="datatype" class="form-check-input" value="a">
<label class="form-label form-check-label" for="dta">
Quotidienne
</label>
</div>
<div class="form-check">
<input type="checkbox" id="dtb" name="datatype" class="form-check-input" value="b">
<label class="form-label form-check-label" for="dtb">
hebdomadaire
</label>
</div>
<div class="form-check">
<input type="checkbox" id="dtc" name="datatype" class="form-check-input" value="c">
<label class="form-label form-check-label" for="dtc">
mensuelle
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="row ">
<div class="col ">
<div class="mt-m d-flex justify-content-center">
<button class="btn btn-tertiary" type="submit">
<svg class="paris-icon paris-icon-close"data-mce-svg="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-close"></use>
</svg>
<span class="btn-label ">Annuler</span>
</button>
<button class="btn btn-primary" type="submit" id="doSaveForm">
<svg class="paris-icon paris-icon-check"data-mce-svg="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#paris-icon-check"></use>
</svg>
<span class="btn-label ">Valider</span>
</button>
</div>
</div>
</div>
</form>
<script src="js/plugins/asynchronousupload/config.js"></script>
<script>
/* Maps to manage files field errors */
var mapFileErrors = new Map();
var mapFilesNumber = new Map();
var mapFilesNumber = new Map();
</script>
<script src="jsp/site/plugins/asynchronousupload/GetMainUploadJs.jsp?handler=formsAsynchronousUploadHandler" ></script>
<script>
// Demo only
document.addEventListener('click', function(event) {
if (event.target.classList.contains('deleteSingleFile')) {
event.preventDefault();
const currInput = document.getElementById('domicile2');
let nbInputFiles = currInput.getAttribute('data-nbuploadedfiles') - 1;
currInput.setAttribute('data-nbuploadedfiles', nbInputFiles);
event.target.closest('.files-item').setAttribute('hidden', 'hidden');
}
});
document.getElementById('domicile2').addEventListener('click', function(event) {
event.preventDefault();
const toast = new bootstrap.Toast(document.getElementById('toastFile1'));
toast.show();
const hiddenFiles = document.querySelectorAll('[hidden]');
hiddenFiles.forEach(function(hf) {
hf.removeAttribute('hidden');
});
});
const form = document.querySelector('form');
form.addEventListener('submit', (ev) => {
ev.preventDefault();
const formData = new FormData(form);
const aData = new URLSearchParams(formData).toString().replaceAll('&', '<br>');
document.querySelector('#liveFormToast .toast-body').innerHTML = `<code>${aData}</code>`;
const toast = new bootstrap.Toast(document.getElementById('liveFormToast'));
toast.show();
});
</script>L'exemple propose plusieurs champs dans un même formulaire. Pour plus d'informations consulter les composants préfixés par "form:" dans la page composants
Le plugin Forms permet de créer des formulaires à étapes par paramétrage.
Le plugin Forms
Voir un exemple de formulaires construit avec le plugin forms