<@cForm name='info' >
<@cStepCurrent step=1 title='Formulaire de test' >
<@cStepGroup title='Groupe Etat-civil' iterable=true iteration=0 iterationMax=10 >
<@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>
</@cStepGroup>
<@cStepGroup title='Groupe Etat-civil' iterable=true iteration=1 iterationMax=10 >
<@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>
</@cStepGroup>
</@cStepCurrent>
<@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>
<@cRow>
<@cCol cols='8'>
<@cField label='Mot de passe' for='password' labelData=''>
<@cInputPassword name='password' passwordMeter=true />
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cRow>
<@cCol cols='4'>
<@cLabel label='Activité' for='activite' />
<@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>
</@cCol>
<@cCol cols='4'>
<@cLabel label='Date du jour' for='date_info' />
<@cInputDate name='date_info' helpMsg='La date du jour !' value=.now?date?iso_utc options={"todayButton":false} />
</@cCol>
</@cRow>
<@cFieldset legend='Justificatif de domicile' showLabel=false >
<@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>
</@cFieldset>
<@cFieldset legend='Conservation des données' showLabel=false >
<@cRow>
<@cCol params='aria-describedby="mydata"'>
<@cField>
<@cLabel label='Sauvegarder ces données' for='mydata' />
<@cRow>
<@cCol role="radiogroup" params="aria-label='Choix de la sauvegarde 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>
<@cCol>
<@cField>
<@cLabel label='Type de sauvegarde' for='datatype' />
<@cRow>
<@cCol params="aria-label='Choix du type de sauvegarde des données'">
<@cCheckbox name='datatype' id='dta' label='Quotidienne' value='a' />
<@cCheckbox name='datatype' id='dtb' label='hebdomadaire' value='b' />
<@cCheckbox name='datatype' id='dtc' label='mensuelle' value='c' />
</@cCol>
</@cRow>
</@cField>
</@cCol>
</@cRow>
</@cFieldset>
<@cRow>
<@cCol>
<@cField class='mt-m d-flex justify-content-center'>
<@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">
<div 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>
</div>
<div class="step-content">
<div class="container ">
<p class="mandatory-warning visually-hidden">
Fields followed by an asterisk * are mandatory.</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-147609014048391" role="group" aria-labelledby="legend-id-147609014048391">
<legend id="legend-id-147609014048391"">
<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 href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Add</span>
</button>
</span>
</legend>
<div class="row ">
<div class="col ">
<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 class="col ">
<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>
</fieldset>
</div>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-166504192171731" role="group" aria-labelledby="legend-id-166504192171731">
<legend class="d-flex justify-content-between align-items-center" id="legend-id-166504192171731"">
<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 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 href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Add</span>
</button>
</div>
</span>
</legend>
<div class="row ">
<div class="col ">
<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 class="col ">
<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>
</fieldset>
</div>
</div>
</div>
<div class="step-footer">
<div class="container ">
<p class="mandatory-warning">
Fields followed by an asterisk * are mandatory.</p>
<div class="step-current-toolbar 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" >
<li class="order-4 visually-hidden" id="reset-backup">
<button class="btn btn-tertiary ms-sm" type="submit" id="Reset" name="Reset" formnovalidate>
<span class="btn-label ">Delete progress</span>
</button>
</li>
</ul>
</div>
</div>
</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">
Remove the saved step</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 ">No save, return to my process</span>
</button>
<button class="btn btn-primary" id="modal-reset-backup" type="button"><span class="btn-label">Yes remove those 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 = 'Remove the saved step';
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('Reset');
resetBackup.click();
});
}
});
</script>
<fieldset id="fieldset-id-168146959356741" role="group" aria-labelledby="legend-id-168146959356741">
<legend class=" visually-hidden" id="legend-id-168146959356741" >Informations personelles</legend>
<div class="row ">
<div class="col ">
<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 class="col ">
<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 class="row ">
<div class="col-8 ">
<label class="form-label" for="password">
Mot de passe
</label>
<label class="form-label" for="password">
<span class="main-danger-color ms-xxs" 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 href="#paris-icon-eye-off"></use>
</svg>
</button>
</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-10-28">
<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 href="#paris-icon-agenda"></use>
</svg></span>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = {todayButton : false, };
const themeOptions = {};
const dtLocale = navigator.language.split('-')[0] == 'en' ? 'en' : navigator.language.split('-')[0];
let showFormat=getDatePickerDateFormat( dtLocale );
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>
<fieldset id="fieldset-id-169789726541751" role="group" aria-labelledby="legend-id-169789726541751">
<legend class=" visually-hidden" id="legend-id-169789726541751" >Justificatif de domicile</legend>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="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-start ms-xs my-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 mt-sm" 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>
</fieldset>
<fieldset id="fieldset-id-170337315603421" role="group" aria-labelledby="legend-id-170337315603421">
<legend class=" visually-hidden" id="legend-id-170337315603421" >Conservation des données</legend>
<div class="row ">
<div class="col " aria-describedby="mydata">
<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 class="col ">
<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>
</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 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 href="#paris-icon-check"></use>
</svg><span class="btn-label ">Valider</span>
</button>
</div>
</div>
</div>
</form>
<div id="toastContainer1" class="toast-container position-fixed p-3 bottom-0 start-50 translate-middle-x" style="position-fixed">
<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>
<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