Verzoeken Indienen

Component preview opent in nieuw tabblad

There are no notes for this item.

<main>
    <form>
        <div class="dso-app-heading">

            <h1>Object Laan van Eik en Duinen 125, Den Haag</h1>

            <h2 class="dso-steps-indicator">
                7. Verzoeken indienen

                <span class="dso-step">
                    Stap 7/7
                </span>

            </h2>

        </div>

        <div class="dso-accordion form-horizontal">
            <div class="dso-accordion-section dso-open">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="true">Verzoek 1: Object Laan van Eik en Duinen 125, &#39;s-Gravenhage 1

                    </button>
                </h3>
                <div class="dso-section-body">

                    <dl>

                        <dt>Indienen bij:</dt>
                        <dd>Gemeente Den Haag</dd>
                        <dt>Soort:</dt>
                        <dd>Aanvraag vergunning</dd>
                        <dt>Bevat:</dt>
                        <dd>Milieubelastende activiteit - Vergunning (Gemeente)</dd>
                        <dt>Doel:</dt>
                        <dd>Definitief verzoek</dd>
                    </dl>

                    <fieldset>
                        <legend>Verzoek</legend>

                        <div class="form-group dso-textarea">
                            <div class="dso-label-container">
                                <label for="toelichting" class="control-label">
                                    Ruimte om uw verzoek toe te lichten
                                </label>

                            </div>
                            <div class="dso-field-container">
                                <textarea class="form-control" id="toelichting" rows="5"></textarea>

                            </div>

                        </div>

                    </fieldset>

                    <fieldset class="form-group dso-files">
                        <div class="dso-description dso-rich-content">

                        </div>
                        <legend class="sr-only">Vraag om bijlage</legend>
                        <div class="dso-label-container">
                            <label for="documenten1" class="control-label" aria-hidden="true">
                                Vraag om bijlage
                            </label>

                            <button type="button" class="btn dso-info-button" aria-expanded="false">
                                <span class="sr-only">Toelichting bij Vraag om bijlage</span>
                            </button>

                        </div>
                        <div class="dso-field-container">
                            <ul class="dso-filelist">

                                <li>
                                    <div class="dso-filename" id="documenten1-file-filename-0">
                                        Bestand.pdf
                                    </div>
                                    <div class="dso-selectable dso-confidential">
                                        <input type="checkbox" id="documenten1-input-confirm-0" name="selectable--default" aria-describedby="documenten1-file-filename-0">
                                        <label for="documenten1-input-confirm-0">
                                            Vertrouwelijk
                                        </label>

                                    </div>

                                    <button type="button" aria-describedby="documenten1-file-filename-0" class="btn btn-link dso-remove"><span>Verwijder document</span></button>
                                </li>

                            </ul>

                            <!-- To use an input type="file" element -->
                            <div class="dso-file-upload">
                                <input type="file" id="documenten1-file-upload" />
                                <label class="btn btn-default" for="documenten1-file-upload">
                                    <dso-icon icon="plus"></dso-icon><span>Document toevoegen</span>
                                </label>
                            </div>

                        </div>

                        <!-- Or to trigger the upload using a button element (not recommended) -->
                        <!--
    <button type="button"
  class="btn btn-link"><dso-icon icon="plus"></dso-icon><span >Document toevoegen</span></button>

  -->
                    </fieldset>

                    <fieldset>
                        <legend>Vragengroep titel</legend>

                        <div class="form-group dso-input">
                            <div class="dso-label-container">
                                <label for="classificatie" class="control-label">
                                    Vraag met classificatie &#39;verzoek&#39;
                                </label>

                            </div>
                            <div class="dso-field-container">

                                <input type="" id="classificatie" class="form-control">

                            </div>

                        </div>

                    </fieldset>

                    <div class="dso-form-buttons">

                        <button type="button" class="btn btn-primary"><span>Volgende</span></button>

                    </div>

                </div>
            </div>
            <div class="dso-accordion-section">
                <h3 class="dso-section-handle"><button type="button" aria-expanded="false">Verzoek 2: Object Laan van Eik en Duinen 125, &#39;s-Gravenhage 2

                    </button>
                </h3>
            </div>
        </div>

        <dso-highlight-box>
            <div class="dso-rich-content">
                <h3>Kosten</h3>
                <p>De kosten van een aanvraag zijn verschillend. Kijk op de website van uw gemeente, waterschap of provincie voor de precieze kosten.</p>
            </div>
        </dso-highlight-box>

        <form>

            <div class="form-group dso-confirm">
                <div class="dso-field-container">
                    <div class="dso-selectable">
                        <input type="checkbox" id="confirm" name="confirm">
                        <label for="confirm">
                            Hierbij verklaar ik alle vragen naar waarheid te hebben ingevuld.
                        </label>

                    </div>

                </div>
            </div>

            <div class="dso-form-buttons">

                <div class="dso-aside">

                    <button type="button" class="btn btn-link">
                        <dso-icon icon="chevron-left"></dso-icon><span>Vorige</span>
                    </button>

                </div>

                <button type="button" class="btn btn-link">
                    <dso-icon icon="download"></dso-icon><span>Downloaden</span>
                </button>

                <button type="submit" class="btn btn-primary"><span>Indienen</span></button>

            </div>

        </form>

    </form>
</main>
<main>
  <form>
    {% render '@application-heading', appheading %}
    {% render '@accordion', accordion %}
    <dso-highlight-box>
      <div class="dso-rich-content">
        <h3>Kosten</h3>
        <p>De kosten van een aanvraag zijn verschillend. Kijk op de website van uw gemeente, waterschap of provincie voor de precieze kosten.</p>
      </div>
    </dso-highlight-box>
    {% render '@form', form %}
  </form>
</main>
appheading:
  title: Object Laan van Eik en Duinen 125, Den Haag
  subtitle: 7. Verzoeken indienen
  step: Stap 7/7
accordion:
  modifiers: form-horizontal
  sections:
    - title: 'Verzoek 1: Object Laan van Eik en Duinen 125, ''s-Gravenhage 1'
      id: panel1
      open: true
      definitions:
        - term: Indienen bij
          descriptions:
            - description: Gemeente Den Haag
        - term: Soort
          descriptions:
            - description: Aanvraag vergunning
        - term: Bevat
          descriptions:
            - description: Milieubelastende activiteit - Vergunning (Gemeente)
        - term: Doel
          descriptions:
            - description: Definitief verzoek
      fieldsets:
        - legend: Verzoek
          groups:
            - id: toelichting
              inputType: textarea
              rows: 5
              label: Ruimte om uw verzoek toe te lichten
        - groups:
            - id: documenten1
              label: Vraag om bijlage
              inputType: files
              infoOpen: false
              infoButtonLabel: Toelichting bij Vraag om bijlage
              infoText: none
              files:
                - filename: Bestand.pdf
        - legend: Vragengroep titel
          groups:
            - id: classificatie
              inputType: input
              label: Vraag met classificatie 'verzoek'
      buttons:
        - type: button
          modifier: primary
          label: Volgende
    - title: 'Verzoek 2: Object Laan van Eik en Duinen 125, ''s-Gravenhage 2'
      id: panel2
form:
  fieldsets:
    - modifier: form-vertical
      groups:
        - id: confirm
          inputType: confirm
          label: Hierbij verklaar ik alle vragen naar waarheid te hebben ingevuld.
  asideButtons:
    - type: button
      modifier: link
      label: Vorige
      icon: chevron-left
  buttons:
    - type: button
      modifier: link
      label: Downloaden
      icon: download
    - type: submit
      modifier: primary
      label: Indienen