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

Conteneur de formulaire

Les conteneurs de formulaire peuvent améliorer la mise en page de votre application ou service.

Conseils


Conteneur de formulaire avec colonne de navigation de progression

Informations de contact

Entrez vos informations de contact et sélectionnez votre langue préférée.

Langue préférée

Choisissez votre langue préférée pour la communication concernant votre demande.*obligatoire

HTML

<div class="container overflow-hidden">
    <div class="row">
        <div class="col-sm-12 col-md-4 margin-top-block-xl">
            <aside class="gnb-progress-steps-nav">
                <h2>Comment postuler</h2>
                <ul class="gnb-progress-steps-circle">
                    <li class="complete">
                        <div><a href="#">1. Lire et accepter les termes</a></div>
                    </li>
                    <li class="current">
                        <div>2. Coordonnées</div>
                    </li>
                    <li>
                        <div>3. Demande de subvention</div>
                    </li>
                    <li>
                        <div>4. Examiner et soumettre</div>
                    </li>
                </ul>
            </aside>
        </div>
        <div class="col margin-top-block-xl">
            <article class="form-column margin-top-0 ">
                <form class="gnb-form-container-gray">
                    <h2>Coordonnées</h2>
                    <p>Entrez vos coordonnées et sélectionnez votre langue préférée.</p>
                    <div class="row row-cols-1 margin-bottom-md">
                        <div class="col">
                            <label for="firstname">Prénom<span class="required">*</span><span
                                    class="sr-only">obligatoire</span></label>
                            <input type="text" required name="firstname" id="firstname" />
                        </div>
                        <div class="col">
                            <label for="lastname">Nom de famille<span class="required">*</span><span
                                    class="sr-only">obligatoire</span></label>
                            <input type="text" required name="lastname" id="lastname" />
                        </div>
                        <div class="col">
                            <label for="email">Adresse e-mail<span class="required">*</span><span
                                    class="sr-only">obligatoire</span></label>
                            <input type="email" required name="email" id="email" />
                        </div>
                        <div class="col">
                            <label for="emailconfirmation">Confirmer l'adresse e-mail<span
                                    class="required">*</span><span
                                    class="sr-only">obligatoire</span></label>
                            <input type="email" required name="email" id="emailconfirmation" />
                        </div>
                        <div class="col">
                            <label for="phone">Numéro de téléphone</label>
                            <input type="text" style="max-width: 10em;" id="phone" />
                        </div>
                    </div>
                    <h3>Langue préférée</h3>

                    <fieldset class="gnb-radio-buttons-expanded">
                        <legend>Choisissez votre langue préférée pour la communication concernant votre
                            demande.<span class="required">*</span><span
                                class="sr-only">obligatoire</span></legend>
                        <div class="set">
                            <div class="row">
                                <div class="col-sm-6"><label for="english"><input id="english"
                                            type="radio" name="languagepreference" required
                                            value="English"><span
                                            class="label-title">English</span></label>
											</div>
                                <div class="col-sm-6"><label for="francais"><input id="francais"
                                            type="radio" name="languagepreference" required
                                            value="Français"><span
                                            class="label-title">Français</span></label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <hr />
                    <button class="gnb-button">Suivant</button> 
					<button type="button" class="gnb-btn-secondary">Retour en arrière</button>
                </form>
            </article>
        </div>
    </div>
</div>