---
{
	"title": "Formulaire à étapes",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Converti automatiquement un formulaire en étapes.",
	"tag": "stepsform",
	"parentdir": "stepsform",
	"altLangPrefix": "stepsform",
	"dateModified": "2020-09-15"
}
---

<div lang="en" class="alert alert-warning">
	<h2>Unstable feature</h2>
	<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
	<p><small><a href="../../docs/ref/provisional-fr.html">Check other provisional features available.</a></small></p>
</div>

<section>
	<h2>But</h2>
	<p>Offre la possibilité de diviser un formulaire en différentes étapes (sans ou avec validation de formulaire).</p>
</section>

<section>
	<h2>Exemple pratique</h2>

	<div class="wb-frmvld provisional wb-steps">
		<form action="#" method="get" id="steps-example">
			<fieldset id="client">
				<legend>Informations du client</legend>
				<div>
					<div class="form-group">
						<label for="firstname" class="required"><span class="field-name">Prénom</span></label>
						<input class="form-control" id="firstname" name="firstname" type="text" data-rule-minlength="2" required="required" />
					</div>
					<div class="form-group">
						<label for="lastname" class="required"><span class="field-name">Nom de famille</span></label>
						<input class="form-control" id="lastname" name="lastname" type="text" data-rule-minlength="2" required="required" />
					</div>
					<div class="form-group">
						<label for="dateOfBirth" class="required"><span class="field-name">Date de naissance</span><span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span></label>
						<input class="form-control" id="dateOfBirth" name="dateOfBirth" type="date" required="required" />
					</div>
				</div>
			</fieldset>
			<fieldset id="contact">
				<legend>Informations de contact</legend>
				<div>
					<div class="form-group">
						<label for="preferredNumber" class="required">Principal&nbsp;: <span class="field-name">Numéro de téléphone</span></label>
						<input class="form-control" id="preferredNumber" name="preferredNumber" type="tel" data-rule-phoneUS="true" required="required" />
					</div>
					<div class="form-group">
						<label for="secondaryNumber">Secondaire&nbsp;: <span class="field-name">Numéro de téléphone</span></label>
						<input class="form-control" id="secondaryNumber" name="secondaryNumber" type="tel" data-rule-phoneUS="true" />
					</div>
					<div class="form-group">
						<label for="email"><span class="field-name">Adresse courriel</span> (test@domaine)</label>
						<input class="form-control" id="email" name="email" type="email" />
					</div>
				</div>
			</fieldset>
			<fieldset id="questionaire">
				<legend>Questionnaire éthique</legend>
				<div>
					<small>Pour chacun des exemples suivants, indiquez si vous sentez qu'il s'agit d'un cas de problème éthique ou pas.</small>
					<fieldset class="subfields">
						<legend><span class="field-name">Exemple 1</span>: Vous payez 10,00&nbsp;$ pour un achat, mais vous recevez de la monnaie comme s'il s'agissait de 20,00&nbsp;$. Garderiez vous la monnaie en surplus?</legend>
						<div class="radio">
							<label for="defNot-1"><input type="radio" name="ethics1" value="defNot-1" id="defNot-1"/>&#160;Absolument pas</label>&#160;
							<label for="probNot-1"><input type="radio" name="ethics1" value="probNot-1" id="probNot-1"/>&#160;Probablement pas</label>&#160;
							<label for="maybe-1"><input type="radio" name="ethics1" value="maybe-1" id="maybe-1"/>&#160;Peut-être (Incertain)</label>&#160;
							<label for="probably-1"><input type="radio" name="ethics1" value="probably-1" id="probably-1"/>&#160;Probablement</label>&#160;
							<label for="definitely-1"><input type="radio" name="ethics1" value="definitely-1" id="definitely-1"/>&#160;Définitivement</label>
						</div>
					</fieldset>
					<fieldset class="subfields">
						<legend><span class="field-name">Exemple 2</span>: Vous avez besoin d'un logiciel, mais vous ne pouvez pas attendre que la gestion prenne cette décision. Le téléchargeriez-vous sans avoir de licence?</legend>
						<div class="radio">
							<label for="defNot-2"><input type="radio" name="ethics2" value="defNot-2" id="defNot-2"/>&#160;Absolument pas</label>&#160;
							<label for="probNot-2"><input type="radio" name="ethics2" value="probNot-2" id="probNot-2"/>&#160;Probablement pas</label>&#160;
							<label for="maybe-2"><input type="radio" name="ethics2" value="maybe-2" id="maybe-2"/>&#160;Peut-être (Incertain)</label>&#160;
							<label for="probably-2"><input type="radio" name="ethics2" value="probably-2" id="probably-2"/>&#160;Probablement</label>&#160;
							<label for="definitely-2"><input type="radio" name="ethics2" value="definitely-2" id="definitely-2"/>&#160;Définitivement</label>
						</div>
					</fieldset>
				</div>
			</fieldset>
			<input type="submit" name="submit" value="Soumettre" class="btn btn-primary" />
		</form>
	</div>

	<details class="mrgn-tp-md mrgn-bttm-md">
		<summary>Visualiser le code</summary>
		<ol>
			<li>Créer un élément <code>&lt;div&gt;</code> avec la classe <code>wb-steps</code> (vous pouvez aussi ajouter la classe <code>wb-frmvld</code> pour intégrer la validation).
				<pre><code>&lt;div class=&quot;wb-frmvld wb-steps&quot;&gt;&lt;/div&gt;</code></pre>
			</li>
			<li>À l'intérieur de cet élément <code>&lt;div&gt;</code>, ajouter un élément <code>&lt;form&gt;</code>.
				<pre><code>&lt;form action="#" method="get" id="steps-example"&gt;&lt;/form&gt;</code></pre>
			</li>
			<li>À l'intérieur de cet élément <code>&lt;form&gt;</code>, ajouter un élément <code>&lt;fieldset&gt;</code> qui aura besoin d'une légende <code>&lt;legend&gt;</code> et d'un conteneur <code>&lt;div&gt;</code>.
				<small>Ces éléments <code>&lt;fieldset&gt;</code> deviendront les étapes du formulaire</small>
				<pre><code>&lt;fieldset&gt;<br/>&lt;legend&gt;Informations du client&lt;/legend&gt;<br/>&lt;div&gt;(Tout contenu situé à l'intérieur du div sera caché.)&lt;/div&gt;<br/>&lt;/fieldset&gt;</code></pre>
			</li>
		</ol>
	</details>

	<noscript>
		<p>Les formulaires à étapes ne devraient pas être utilisés sans JavaScript. Dans ce cas, les formulaires seront convertis en formulaires statiques et seront dépendant de la validation côté client et serveur (qui ne font pas parties de la WET-BOEW).</p>
	</noscript>
</section>
