Formular: Block

Formblöcke erfüllen 2 Aufgaben:

Sie teilen größere Bereiche innerhalb eines Formulars visuell durch Abstände und optional durch eine Hintergrundfarbe.
Sie erlauben das Duplizieren von gesamten Blöcken oder Teilen von Blöcken.

Varianten

Formular: Block

Ein Block beinhaltet üblicherweise ein oder mehrere Formularelemente, Text oder Meldungen.

Vorschau

Personendaten - Typ

Den Antrag stellt

Natürliche Person

Vertretung einer natürlichen Person

Natürliche Person ist eine Privatperson, der Mensch selbst.

Vertretung kann eine natürliche Person oder auch eine juristische Person sein. Es muss eine Vertretungsbefugnis nachgewiesen werden können oder diese von Rechts wegen bestehen. Beispiele: Vollmacht oder Obsorgebefugnis.

Code

<wm-formblock>
  <div>
    <h2>Personendaten - Typ</h2>

    <fieldset>
      <legend>Den Antrag stellt</legend>

      <div>
        <div>
          <input type="radio" name="typ" id="person" checked>
          <label for="person">Natürliche Person</label>
        </div>
        <div>
          <input type="radio" name="typ" id="vertretung">
          <label for="vertretung">Vertretung einer natürlichen Person</label>
        </div>
      </div>
    </fieldset>

    <wm-notification type="info">
      <p>
        <strong>Natürliche Person</strong> ist eine Privatperson, der Mensch selbst.
      </p>
      <p>
        <strong>Vertretung</strong> kann eine natürliche Person oder auch eine juristische Person sein. Es muss eine Vertretungsbefugnis nachgewiesen werden können oder diese von Rechts wegen bestehen. Beispiele: Vollmacht oder Obsorgebefugnis.
      </p>
    </wm-notification>
  </div>
</wm-formblock>

Formular: Block mit Text

Vorschau

Halten Sie bitte folgende Unterlagen bereit:

Zulassungsschein
Zugangsdaten/Bankkarte/Kreditkarte im Falle elektronischer Bezahlung
Bei Änderungen: bisherige Geschäftszahl des derzeit gültigen Parkpickerls

Code

<wm-formblock type="text">
  <div>
    <p>Halten Sie bitte folgende Unterlagen bereit:</p>

    <ul>
      <li>Zulassungsschein</li>
      <li>Zugangsdaten/Bankkarte/Kreditkarte im Falle elektronischer Bezahlung</li>
      <li>Bei Änderungen: bisherige Geschäftszahl des derzeit gültigen Parkpickerls</li>
    </ul>
  </div>
</wm-formblock>

Formular: Block duplizieren

Der gesamte Block wird geklont und mit einer benutzerdefinierten Überschrift an den bestehenden Block angehängt.

Vorschau

Adresse

Stock

Tür

Code

<wm-formblock duplicate="address_block" cloneheadinglabel="Zustelladresse" duplicatelabel="Alternative Zustelladresse" deleteLabel="Zustelladresse verwerfen" id="address_section" max="1">
  <div id="address_block" class="address_block">
    <h2>Adresse</h2>
    <wm-stack vertical gap="s">
      <wm-stack gap="s" grow="">
        <wm-input type="text" label="PLZ" name="address7" id="address7" required></wm-input>
        <wm-input type="text" label="Ort" name="address8" id="address8"></wm-input>
      </wm-stack>
      <wm-input type="text" label="Straße" name="address1" id="address1" required></wm-input>
      <wm-input type="text" label="Hausnummer (einschließlich Block, Gruppe, Parzelle, Stiege)" name="address2" id="address2" required></wm-input>
      <wm-stack gap="s" equal="" grow="">
        <div>
          <label for="address5">Stock</label>
          <input type="text" name="address5" id="address5" />
        </div>
        <div>
          <label for="address6">Tür</label>
          <input type="text" name="address6" id="address6"/>
        </div>
      </wm-stack>
    </wm-stack>
  </div>
</wm-formblock>

Formular: Block teilweise duplizieren

Anstelle des gesamten Blocks werden nur Teile innerhalb des Blocks dupliziert. Die maximale Anzahl an Klonen kann selbst festgelegt werden.

Vorschau

Beilagen

Bitte beachten Sie, dass nur eine Datei pro Eingabefeld übermittelt werden kann. Möchten Sie mehrere Dateien übermitteln (zum Beispiel die Vorder- und Rückseite eines Dokuments), fassen Sie diese bitte vorher als ZIP- oder PDF-Datei zusammen. Die Gesamtgröße aller Anhänge darf maximal 40 MB betragen. Dokumentenformate für die elektronische Kommunikation mit der Stadt Wien

Beilage

Code

<wm-formblock duplicate="file" duplicateLabel="Weitere Beilage" max="3">
  <div>
    <h2>Beilagen</h2>

    <p>
      Bitte beachten Sie, dass nur eine Datei <strong>pro Eingabefeld</strong> übermittelt werden kann. Möchten Sie mehrere Dateien übermitteln (zum Beispiel die Vorder- und Rückseite eines Dokuments), fassen Sie diese bitte vorher als ZIP- oder <abbr title="Portable Document Format">PDF</abbr>-Datei zusammen. Die Gesamtgröße aller Anhänge darf maximal 40 <abbr title="Megabyte">MB</abbr> betragen. <a href="https://www.wien.gv.at/info/e-mails/dokumente/index.html" target="_blank" title="Wird in neuem Fenster geöffnet">Dokumentenformate für die elektronische Kommunikation mit der Stadt Wien</a>
    </p>

    <div id="file">
      <wm-input label="Bezeichnung" name="desc"></wm-input>
      <wm-upload label="Datei auswählen" name="file">
        <strong>Beilage</strong>
      </wm-upload>
    </div>
  </div>
</wm-formblock>

Dev

Weitere Beispiele

Formular: Block Klone vorbefüllen

Klone können auch server-seitig manuell erstellt werden.

Vorschau

Teilnehmer*innen

Code

<wm-formblock duplicate="address_block" id="address_section" max="3" cloneHeadingLabel="Weitere Teilnehmer*innen $">
    <div id="address_block" class="address_block">
      <h3>Teilnehmer*innen</h3>
      <wm-input label="Vorname" name="vorname" required></wm-input>
    </div>
    <div data-clone>
      <h3>Teilnehmer*innen</h3>
      <wm-input label="Vorname" name="vorname" required></wm-input>
    </div>
  </wm-formblock>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/FormBlock/FormBlock.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>

JavaScript

import { FormBlock } from './wienermelange/assets/js/components/FormBlock/FormBlock.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`cloneHeadingLabel`	Benutzerdefinierte Überschrift	`String`	leer
`highlight`	Section mit oder ohne Hintergrund.	`'nebelgrau'`	leer
`type`	Art des Blocks	`'text'`	leer
`duplicateLabel`	Label des "Duplizieren"-Buttons	`String`	`"Weitere hinzufügen"`
`deleteLabel`	Label des Löschen-Buttons	`String`	`"Löschen"`
`duplicate`	'true' für das gesamte Element oder ID für das Element, das dupliziert werden soll	`String`	leer
`min`	Mindestanzahl von Blöcken	`Number`	`1`
`max`	Maximalanzahl von Blöcken	`Number`	leer

Slots

Name	Beschreibung
`default`	Text

Methoden

Eigenschaft	Optionen	Argumente
`getUpdateComplete`		/

Events

Event	Beschreibung	Rückgabewert
`delete`
`wm-block-deleted`	Block wurde gelöscht.	`{ totalBlocks, totalClones, deletedBlock }`
`wm-block-duplicated`	Block wurde dupliziert.	`Boolean`

CSS API

Property	Beschreibung
`--formblock-color`	Hintergrundfarbe für Formularblöcke
`--formblock-padding--mobil`	Innenabstand (Mobilansicht unter 64em)
`--formblock-max-inline-size`	Maximalbreite für den Content
`--formblock-padding--desktop`	Innenabstand (Desktopansicht ab 64em)
`--formblock-input-background`	Hintergrundfarbe für Formularelemente auf nicht-weißem Hintergrund
`--formblock-gap`	Abstand zwischen Blöcken

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at