Foehn Design System

Formulaire Prestation: Step 1 

<header class="header" role="banner">
    <nav class="container fixed-top access-nav d-print-none" aria-label="menu accessibilité">
        <ul class="list-unstyled mt-3">
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="1" href="#nav-primary" title="[Alt+1] Menu de navigation de la page">Menu de navigation de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="2" href="#main" title="[Alt+2] Debut du contenu de la page">Début du contenu de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="4" href="#" title="[Alt+4] Plan du site du Canton de Vaud">Plan du site</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="5" href="#search-form" title="[Alt+5] Accès au champ de recherche">Accès au champ de recherche</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="6" href="#" title="[Alt+6] Accès à l'index thématique">Thèmes</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="7" href="#" title="[Alt+7] Accès à la navigation par autorités">Autorités</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="8" href="#" title="[Alt+8] Page d'aide pour les personnes en situation de handicap">Page d'aide pour les personnes en situation de handicap</a>
            </li>
        </ul>
    </nav>

    <div class="vd-header-application container">
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD-alt.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>
        <span class="vd-header-application__title">e-ACO : Détermination / modification des acomptes</span>
    </div>
</header>

<section class="small container text-end mb-3">
    <h2 class="sr-only">Votre identité</h2>
    <p class="mb-0">
        <span class="fas fa-lock" aria-hidden="true"></span>

        <a href="#">Jean Villard Gilles</a>

    </p>

    <p class="mb-0">
        <a href="#">Se déconnecter</a>
    </p>

</section>

<main id="main">
    <div class="vd-bg-pattern-gray">
        <div class="container">
            <nav aria-label="Fil d'Ariane">
                <h2 class="sr-only">File d'Ariane</h2>
                <ol class="breadcrumb">

                    <li class="breadcrumb-item"><a href="">vd.ch</a></li>

                    <li class="breadcrumb-item"><a href="">Etat, Droit, Finances</a></li>

                    <li class="breadcrumb-item"><a href="">Impôts</a></li>

                    <li class="sr-only" aria-current="page">e-ACO : Détermination / modification des acomptes</li>

                </ol>
            </nav>

            <h1 class="mt-0">Information personnelles</h1>
        </div>
    </div>

    <div class="container">

        <p class="h3">Etape 1 sur 4</p>

        <div class="row">
            <div class="col-md-8">

                <form action="formulaire-prestation-confirmation">

                    <div class="form-group">
                        <label for="name">Nom</label>

                        <input class="form-control" type="text" id="name" name="testInput" value="" required aria-required="true">
                    </div>

                    <div class="form-group">
                        <label for="firstname">Prénom</label>

                        <input class="form-control" type="text" id="firstname" name="testInput" value="" required aria-required="true">
                    </div>

                    <fieldset aria-describedby="
    birthdayHelpText">
                        <legend>Quelle est votre date de naissance ?</legend>

                        <small id="birthdayHelpText" class="form-text text-secondary">Par exemple, 23 7 1979</small>
                        <div class="vd-form-flex">
                            <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                                <div class="form-group">
                                    <label for="inputDatesDay">Jour</label>

                                    <input class="form-control" type="number" id="inputDatesDay" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="31" size="2">
                                </div>
                            </div>
                            <div class="vd-form-flex__item vd-form-flex__item--2-char-width">
                                <div class="form-group">
                                    <label for="inputDatesMonth">Mois</label>

                                    <input class="form-control" type="number" id="inputDatesMonth" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1" max="12" size="2">
                                </div>
                            </div>
                            <div class="vd-form-flex__item vd-form-flex__item--4-char-width">
                                <div class="form-group">
                                    <label for="inputDatesYear">Année</label>

                                    <input class="form-control" type="number" id="inputDatesYear" name="testInput" value="" required aria-required="true" pattern="[0-9]*" min="1950" max="2017" size="4">
                                </div>
                            </div>
                        </div>

                    </fieldset>

                    <div class="form-group">
                        <label for="institution">Etablissement</label>

                        <input class="form-control" type="text" id="institution" name="testInput" value="" required aria-required="true">
                    </div>

                    <div class="form-group">
                        <label for="function">Fonction</label>

                        <input class="form-control" type="text" id="function" name="testInput" value="" required aria-required="true">
                    </div>

                    <div class="form-group">
                        <label for="exampleSelect1">Catégorie</label>
                        <select class="form-control" id="categorie">
                            <option>Curabitur</option>
                            <option>Maecenas vel</option>
                            <option>Suspendisse maximus velit non lacus</option>
                            <option>Sed maximus gohjyt</option>
                            <option>Aliquam cupiditate, vel!</option>
                            <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="exampleSelect1">Catégorie 2</label>
                        <select class="form-control" id="categorie2" multiple>
                            <option>Curabitur</option>
                            <option selected>Maecenas vel</option>
                            <option>Suspendisse maximus velit non lacus</option>
                            <option selected>Sed maximus</option>
                            <option>Aliquam cupiditate, vel!</option>
                            <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="testDataInput" id="testDataInputLabel">Quel est votre fruit favoris ?</label>
                        <datalist id="list">
                            <select class="form-control" name="testDataInput" aria-labelledby="testDataInputLabel">
                                <option>Abricot</option>
                                <option>Ananas</option>
                                <option>Citron</option>
                                <option>Fruit de la passion</option>
                                <option>Grenade</option>
                                <option>Groseille</option>
                                <option>Kaki</option>
                                <option>Kiwi</option>
                            </select> <small id="testDataInputfallbackLabel" class="form-text">Merci de le spécifier s&#39;il ne figure pas dans la liste</small>
                        </datalist>
                        <input id="testDataInput" class="form-control" name="state" list="list" aria-labelledby="testDataInputfallbackLabel">
                    </div>

                    <div class="form-group">
                        <label for="address">Adresse</label>

                        <input class="form-control" type="text" id="address" name="testInput" value="" required aria-required="true">
                    </div>

                    <div class="form-group">
                        <label for="email">Courriel</label>

                        <input class="form-control" type="email" id="email" name="testInput" value="" required aria-required="true">
                    </div>

                    <fieldset>
                        <legend>Radio</legend>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="option1" id="exampleOption1" name="exampleOptions">
                            <label class="form-check-label" for="exampleOption1">
                                This is an option
                            </label>
                        </div>

                    </fieldset>

                    <fieldset>
                        <legend>Checkbox</legend>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="exampleOption1">
                            <label class="form-check-label" for="exampleOption1">
                                Consectetur adipisicing elit
                            </label>
                        </div>

                    </fieldset>

                    <div class="form-group">
                        <label for="testTextarea">
                            Example textarea <span aria-hidden="true">(facultatif)</span>
                        </label><textarea class="form-control" id="testTextarea"></textarea>
                    </div>

                    <nav class="vd-pagination" aria-label="Pagination">
                        <ul class="vd-pagination__list">
                            <li class="vd-pagination__item vd-pagination__item--next">
                                <a href="formulaire-prestation--step-2" class="vd-pagination__link">
                                    <span class="vd-pagination__title">
                                        Suivant
                                        <span class="fas fa-chevron-right" aria-hidden="true"></span>
                                    </span><span class="sr-only">:</span>
                                    <span class="vd-pagination__label">Nom de l&#39;étape</span></a>
                            </li>
                        </ul>
                    </nav>

                </form>

            </div>
        </div>
    </div>
</main>

<footer class="mt-5">

    <div class="container">
        <div class="text-end">
            <a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <nav class="row" aria-label="pied de page">

                        <div class="col-sm">

                            <ul class="list-unstyled ">
                                <li><a href="">Contact</a></li>
                                <li><a href="">Pourquoi créer un compte</a></li>
                                <li><a href="">Mentions légales</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-2">
                    <div class="d-flex align-items-end flex-column h-100">
                        <div class="mt-auto w-100 end">
                            <a href="#" class="d-inline-block">
                                <span class="sr-only">Retour à la page d'accueil</span>
                                <img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
 
{% extends '@espace-securise--form' %}
{% block main %}

  <form action="formulaire-prestation-confirmation">

    {% render '@input--default', {label: "Nom", id: "name"}, true %}

    {% render '@input--default', {label: "Prénom", id: "firstname"}, true %}

    {% render '@dates' %}

    {% render '@input--default', {label: "Etablissement", id: "institution"}, true %}

    {% render '@input--default', {label: "Fonction", id: "function"}, true %}

    {% render '@select--default', {label: "Catégorie", id: "categorie"}, true %}

    {% render '@select--multitple', {label: "Catégorie 2", id: "categorie2"}, true %}

    {% render '@datalist' %}

    {% render '@input--default', {label: "Adresse", id:"address"}, true %}

    {% render '@input--email', {id: "email"}, true %}

    <fieldset>
      <legend>Radio</legend>
      {% render '@radio' %}
    </fieldset>

    <fieldset>
      <legend>Checkbox</legend>
      {% render '@checkbox--default' %}
    </fieldset>

    {% render '@textarea' %}

    {% render '@pagination', pagination, true %}

  </form>
{% endblock %}
 
{
  "header": {
    "applicationTitle": "e-ACO : Détermination / modification des acomptes"
  },
  "pageTitle": {
    "pageTitle": {
      "text": "Information personnelles"
    },
    "breadcrumb": {
      "breadcrumb": [
        {
          "page": "vd.ch"
        },
        {
          "page": "Etat, Droit, Finances"
        },
        {
          "page": "Impôts"
        },
        {
          "page": "e-ACO : Détermination / modification des acomptes",
          "url": "https://www.vd.ch/prestation-detail/prestation/modifier-ses-acomptes-avec-e-aco-pour-les-individus-personnes-physiques/"
        }
      ]
    }
  },
  "stepTitle": "Titre de l'étape",
  "stepNumber": "Etape 1 sur 4",
  "pagination": {
    "pages": {
      "previous": false,
      "next": {
        "url": "formulaire-prestation--step-2",
        "title": "Suivant",
        "label": "Nom de l'étape"
      }
    }
  }
}

No notes defined.