Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Sections du formulaire

Un formulaire avec des sections qui utilise des accordéons pour offrir un affichage progressif.

Conseils

Les formulaires complexes ou longs peuvent être divisés en sections plus petites et plus faciles à gérer.

Vous pouvez utiliser des accordéons pour ne montrer à vos utilisateurs qu’une section à la fois sur une même page. Cela leur permet de se concentrer sur une section à la fois et de bénéficier d’une expérience utilisateur simplifiée et moins contraignante.

États des sections du formulaire

Cet exemple montre les différents états disponibles pour chaque section :

  • .complete: une section qui est remplie. Si vous avez intégré une fonction d’enregistrement dans chaque section, vous pouvez montrer à l’utilisateur les données qu’il a saisies et lui proposer un bouton lui permettant d’apporter des modifications, le cas échéant.
  • .not-complete: une section qui n’est pas encore remplie.
  • .current: la section active dans laquelle l’utilisateur travaille.
  • .disabled: une section qui n’est pas encore remplie et à laquelle l’utilisateur ne peut pas accéder tant qu’une autre section n’a pas été remplie. Cette fonction est utile si votre formulaire comporte une procédure logique grâce à laquelle les données d’une section peuvent modifier les champs d’une autre section.

  1. Coordonnées

    John Smith
    john.smith@gmail.com
    (506) 555-5555

  2. Adresse

    Adresse postale

  3. Préférences

    Langue

    Choisissez la langue dans laquelle vous souhaitez communiquer sur votre application.

    Mode de contact

    Choisissez la méthode de contact avec vous au sujet de votre application.

  4. Section formulaire

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

HTML

	<!-- Sections formulaire-->
		<div class="gnb-accordion-pane">
		<ol class="gnb-accordion-form-sections" data-aria-accordion data-multi>
			<!-- États des section: section qui est remplie -->
			<li class="gnb-accordion-container complete">
				<div class="gnb-accordion-heading">
					<h3>Titre du section</h3>
				</div>
				<div class="gnb-accordion-panel">				
					<h4>Titre</h4>
					<form>
					Contenu du formulaire
					</form>
				</div>
			</li>
			<!-- États des section: section active dans laquelle l’utilisateur travaille -->
			<li class="gnb-accordion-container current">
				<div class="gnb-accordion-heading">
					<h3>Titre du section</h3>
				</div>
				<div class="gnb-accordion-panel show" aria-hidden="false">
					<h4>Titre</h4>
					<form>
					Contenu du formulaire
					</form>
				</div>
			</li>
			<!-- États des section: section qui n’est pas encore remplie -->
			<li class="gnb-accordion-container not-complete">
				<div class="gnb-accordion-heading">
					<h3>Titre du section</h3>
				</div>
				<div class="gnb-accordion-panel">			
					<h4>Titre</h4>
					<form>
					Contenu du formulaire
					</form>
				</div>
			</li>		
			<!-- État des section: section qui n’est pas encore remplie et à laquelle l’utilisateur ne peut pas accéder tant qu’une autre section n’a pas été remplie -->
			<li class="gnb-accordion-container disabled not-complete">
				<div class="gnb-accordion-heading">
					<h3>Titre du section</h3>
				</div>
				<div class="gnb-accordion-panel">
					<h4>Titre</h4>
					<form>
					Contenu du formulaire
					</form>
				</div>
			</li>
		</ol>
		</div>