Tutorial: Formular wien.gv.at (Newsletter)
In diesem Tutorial erstellen wir ein Formular inklusive Validierung.
Der Aufbau der Seite und des head-Elements wird auf der Seite "Erste Schritte" erklärt.
Das Ergebnis dieses Tutorials ist diese Template-Seite.
<!DOCTYPE html>
<!-- Natürliche Sprache des Dokuments. Anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<!-- Die CSS-Klasse "wien" ist nur für den Standard wien.gv.at-Header notwendig -->
<html lang="de" class="wien">
<head>
<!-- Encoding der Seite, muss im Dokument vor dem <title> kommen -->
<meta charset="UTF-8">
<!-- Viewport Meta Tag für responsive Designs, muss im Dokument vor dem <title> kommen. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Seitentitel. Muss einzigartig sein. -->
<title> | Stadt Wien</title>
<!-- Wiener Melange Stylesheet -->
<link rel="stylesheet" href="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">
<!-- Font für bessere Performance vorladen -->
<link rel="preload" href="https://assets.wien.gv.at/theme/202/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>
<!-- Buttons -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Button/Button.js" type="module"></script>
<!-- Checkboxen -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Checkbox/Checkbox.js" type="module"></script>
<!-- Extrahiert und zeigt Copyright-Information aus Bildern an -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Copyright/Copyright.js" type="module"></script>
<!-- Form -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Form/Form.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/FormErrorsummary/FormErrorsummary.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/FormBlock/FormBlock.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/Notification/Notification.js" type="module"></script>
<!-- Header durch JavaScript angereichert -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Header/Header.js" type="module"></script>
<!-- Icons -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Icon/Icon.js" type="module"></script>
<!-- Input -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Input/Input.js" type="module"></script>
<!-- Erweitert Listen -->
<script src="https://assets.wien.gv.at/theme/202/js/components/List/List.js" type="module"></script>
<!-- Modals -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Modal/Modal.js" type="module"></script>
<!-- Hauptnavigation durch JavaScript angereichert -->
<script src="https://assets.wien.gv.at/theme/202/js/components/NavMain/NavMain.js" type="module"></script>
<!-- Radio-Button -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Radio/Radio.js" type="module"></script>
<!-- Titel der Seite durch JavaScript angereichert -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Stage/Stage.js" type="module"></script>
<!-- Stack -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Stack/Stack.js" type="module"></script>
<!-- Favicon für ältere Browser -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Alternative für favicon.ico, skalierbar und berücksichtigt Dark Mode. (Browser Support: https://caniuse.com/link-icon-svg) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Homescreen Icon für iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Kanonische URL -->
<link rel="canonical" href="https://handbuch.wien.gv.at/development/tutorials/formular/">
<!-- Beschreibung der Seite, maimal 150 Zeichen lang, muss einzigartig sein. -->
<meta name="description" content="Beschreibung der Seite">
<!-- Farbe des UI im Browser. Anpassen oder entfernen.-->
<meta name="theme-color" content="#75cde3">
<!-- Seitentitel -->
<meta property="og:title" content="Seitentitel">
<!-- Beschreibung der Seite -->
<meta property="og:description" content="Beschreibung der Seite">
<!-- Absoluter Pfad zum Vorschaubild. Muss geändert werden -->
<meta property="og:image" content="https://handbuch.wien.gv.at/images/meta.png">
<!-- Sprache der Seite -->
<meta property="og:locale" content="de">
<!-- Seitentyp -->
<meta property="og:type" content="website">
<!-- Url der Seite. Muss geändert werden -->
<meta property="og:url" content="https://wwww.wien.gv.at">
<!-- Großes Vorschaubild auf X -->
<meta name="twitter:card" content="summary_large_image">
<!-- Handle der Site auf X. Anpassen, entfernen oder so lassen. -->
<meta name="twitter:site" content="@StadtWien">
</head>
<body>
<div class="wm-skip-link wm-h-vh">
<a href="#content" class="wm-e-button">
Zum Inhalt springen
</a>
</div>
<!-- Header auf jeder Seite -->
<wm-header>
<!-- Erste Zeile im Header. Trägt den Titel und das Logo. -->
<div>
<!-- Titel der Microsite -->
<!-- <a href="/development/tutorials/seitenstruktur/template/">
</a> -->
<!-- Stadt Wien Logo, linkt immer zur wien.gv.at Startseite -->
<a href="https://wien.gv.at">
<svg viewBox="0 0 311 142" width="80" role="img" aria-labelledby="site-logo1">
<title id="site-logo1">Startseite wien.gv.at</title>
<path fill="#FF0000" d="M55.3 53.6V15.3H14.2c0 13.3 1 26.2 2.9 38.3h38.2zM55.3 65.7h-36c6.9 32.7 20.2 57.1 36 62.2V65.7zM67.3 53.6V15.3h41.1c0 13.3-1 26.2-2.9 38.3H67.3zM67.3 65.7h36c-6.9 32.7-20.2 57.1-36 62.2V65.7z"></path>
<path fill="currentColor" d="M153.5 65.2c-2.4 0-4.7-.3-6.9-1s-4.4-1.7-6.6-3.1l1.3-8.4h.3c2.1 1.6 4.1 2.7 6.2 3.3 2.1.6 4 .9 5.7.9 5 0 7.5-1.9 7.5-5.6 0-1.3-.4-2.5-1.1-3.5-.7-1-2-2.1-3.8-3.1l-6-3.4c-3.5-1.9-5.9-4-7.4-6.2s-2.2-4.7-2.2-7.4c0-4.2 1.4-7.5 4.2-9.9 2.8-2.4 6.6-3.6 11.3-3.6 4.3 0 8.3 1.1 11.9 3.2l-1.3 8.1h-.3c-1.4-1-3-1.7-4.9-2.2-1.9-.5-3.6-.7-5.3-.7-4.4 0-6.6 1.7-6.6 5 0 1.2.4 2.3 1.1 3.3.8 1 2.2 2.1 4.4 3.3l5.3 2.9c3.3 1.8 5.8 3.8 7.3 6s2.3 4.8 2.3 7.8c0 4.5-1.5 8-4.5 10.6-2.8 2.5-6.8 3.7-11.9 3.7zM183.8 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6H188v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10zM209 64.6c-3.2 0-5.7-.8-7.5-2.5-1.9-1.7-2.8-4-2.8-7.1 0-3.1 1.1-5.5 3.2-7.3 2.2-1.8 5.1-2.8 8.8-3.2l9.1-.9v-.1c0-1.8-.5-3.1-1.5-4-1-.9-2.8-1.4-5.4-1.4-1.9 0-3.9.2-5.9.7-2 .5-3.6 1-4.8 1.6h-.4l1.3-7.7c1.4-.6 3.1-1 5.1-1.5 2-.4 4.2-.6 6.4-.6 4.9 0 8.5 1.1 10.8 3.4 2.3 2.3 3.4 5.6 3.4 10v10.4c0 1.7.1 3.4.4 5 .2 1.6.6 3 1.2 4.2v.4h-8.5c-.3-.6-.5-1.5-.7-2.4-.2-1-.3-1.9-.4-2.7h-.4c-.8 1.6-2.3 2.9-4.3 4s-4.4 1.7-7.1 1.7zm-1.1-10.3c0 1 .3 1.8.9 2.4.6.6 1.7 1 3.1 1 2.3 0 4.1-.7 5.6-2s2.2-3.1 2.2-5.2v-.8l-6.9.8c-1.7.2-3 .6-3.8 1.1-.7.6-1.1 1.5-1.1 2.7zM260.9 64v-4.9h-.4c-1 1.8-2.4 3.2-4.3 4.2s-4 1.5-6.4 1.5c-2.9 0-5.4-.7-7.6-2.1-2.2-1.4-3.9-3.4-5.1-6-1.2-2.6-1.8-5.6-1.8-9 0-3.4.6-6.4 1.8-9 1.2-2.6 2.9-4.5 5.1-6 2.2-1.4 4.7-2.1 7.6-2.1 2.2 0 4.2.4 6 1.3 1.8.9 3.2 2.1 4.2 3.6h.5V15.3h9.1V64h-8.7zm-8.1-7c2.5 0 4.4-.9 5.9-2.6 1.5-1.7 2.2-4 2.2-6.7 0-2.8-.7-5.1-2.2-6.7-1.5-1.7-3.5-2.5-5.9-2.5-2.5 0-4.5.8-5.9 2.5-1.5 1.6-2.2 3.9-2.2 6.8 0 2.8.7 5.1 2.2 6.7 1.4 1.6 3.3 2.5 5.9 2.5zM284.9 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6h-6.4v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10.1zM161.6 126.1h-11c-1.1-2.4-2.3-5.4-3.5-9-1.3-3.6-2.5-7.5-3.6-11.9-1.2-4.4-2.2-8.9-3.1-13.7-.9-4.7-1.5-9.4-1.8-14.1h9.9c.3 4.3.9 8.8 1.7 13.5.8 4.7 1.7 9.2 2.8 13.7 1.1 4.4 2.2 8.5 3.4 12.2h.5l9.9-33h7.3l9.9 33h.5c1.2-3.7 2.3-7.8 3.3-12.2 1-4.4 1.9-9 2.7-13.7.8-4.7 1.3-9.2 1.7-13.5h9.7c-.3 4.7-1 9.4-1.8 14.1-.9 4.7-1.9 9.3-3.1 13.7-1.2 4.4-2.4 8.3-3.6 11.9-1.3 3.6-2.4 6.6-3.5 9h-11l-8.2-27.4h-.7l-8.4 27.4zM213.1 88.3c-1.7 0-3.1-.5-4.2-1.6s-1.6-2.4-1.6-4 .5-3 1.6-4 2.5-1.6 4.2-1.6c1.7 0 3.1.5 4.2 1.6 1.1 1 1.6 2.4 1.6 4s-.5 2.9-1.6 4c-1.1 1-2.5 1.6-4.2 1.6zm-4.6 37.8V93.4h9.1v32.7h-9.1zM241.4 126.9c-3.6 0-6.6-.7-9.2-2.1-2.6-1.4-4.6-3.4-5.9-5.9-1.4-2.6-2.1-5.5-2.1-9 0-3.6.7-6.7 2.2-9.3 1.5-2.6 3.5-4.6 6-5.9 2.6-1.4 5.5-2.1 8.7-2.1 4.8 0 8.5 1.5 11.2 4.4 2.7 2.9 4 7 4 12.2v2l-22.5 2.5c.6 2 1.7 3.4 3.2 4.2 1.6.8 3.5 1.2 5.7 1.2 2.1 0 4.2-.3 6.4-.8 2.1-.6 3.7-1.2 4.8-1.9h.5l-1.3 7.8c-1.2.6-2.9 1.2-5.1 1.8-2.1.6-4.3.9-6.6.9zm-.5-27c-2 0-3.7.6-5 1.9-1.3 1.2-2.1 3.1-2.4 5.6l13.9-1.6c-.3-2-1-3.5-2.1-4.4-1.3-1-2.7-1.5-4.4-1.5zM262.6 126.1V93.4h8.2V99h.4c.8-1.9 2.2-3.4 4.1-4.6 1.9-1.1 4.1-1.7 6.6-1.7 3.8 0 6.8 1.3 9 3.8s3.3 6.1 3.3 10.6v19.1h-9.1v-17.9c0-5.1-2.1-7.7-6.3-7.7-2.1 0-3.8.8-5.1 2.3-1.3 1.5-1.9 3.5-1.9 6v17.3h-9.2z"></path>
</svg>
</a>
<!-- Standard wien.gv.at Menü -->
<wm-nav-main type="hidden">
<a href="/nojs" class="fallback">
Menü
<svg width="26" height="26" viewBox="0 0 123.14 123.14" id="burger" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h123.14v123.14H0z"/><path d="M17.67 27.59h87v-6h-87zM17.67 58.57h87v6h-87zM17.67 95.49h87v6h-87z"/>
</svg>
</a>
<div slot="precontent">
<wm-stack horizontal="" gap="xs" alignment="center">
<wm-icon iconid="language"></wm-icon>
<wm-list type="horizontal" separator="pipe" gap="xxs">
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Bosanski Hrvatski Srpski</a></li>
<li><a href="#">Türkçe</a></li>
</ul>
</wm-list>
</wm-stack>
</div>
<ul>
<li>
<a href="#">
<wm-icon iconid="home"></wm-icon>
Startseite
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="pin"></wm-icon>
Stadtplan
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="amtswege"></wm-icon>
Amtswege
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="contact"></wm-icon>
Kontakte
</a>
</li>
<li>
<a href="#">
<wm-icon iconid="money"></wm-icon>
Jobs
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
Freizeit
</a>
<ul>
<li>
<a href="#">
Veranstaltungen
</a>
</li>
<li>
<a href="#">
Baden
</a>
</li>
<li>
<a href="#">
Sport
</a>
<ul>
<li><a href="#">Übersicht</a></li>
<li><a href="#">Sportmöglichkeiten</a></li>
<li><a href="#">Kurse</a></li>
<li><a href="#">Vereine</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
Wohnen
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Verkehr
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Bildung
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Gesundheit
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Umwelt
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Zusammenleben
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Stadtentwicklung
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Politik
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
<li>
<a href="#">
Wirtschaft
</a>
<ul>
<li><a href="#">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>
</ul>
</li>
</ul>
<div>
<wm-list type="horizontal">
<ul>
<li><a href="https://facebook.com/wien.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="facebook">Facebook</wm-icon></a></li>
<li><a href="https://instagram.com/stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="instagram">Instagram</wm-icon></a></li>
<li><a href="https://x.com/Stadt_Wien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="twitter">X (Twitter)</wm-icon></a></li>
<li><a href="https://tiktok.com/@stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="tiktok">TikTok</wm-icon></a></li>
<li><a href="https://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</wm-icon></a></li>
<li><a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</wm-icon></a></li>
</ul>
</wm-list>
<p>
<a href="#">
<strong>NEWSLETTER</strong>
</a>
</p>
</div>
</wm-nav-main>
</div>
<!-- Zweite Zeile im Header für Microsite-Navigation, sonstige Buttons oder die Suche. -->
<!-- <div>
<wm-nav-main microsite>
<ul></ul>
</wm-nav-main>
</div> -->
</wm-header>
<!-- Hauptinhalt der Seite -->
<main id="content">
<!-- Titel der Seite -->
<wm-stage>
<h1 slot="content">Tutorial: Formular wien.gv.at (Newsletter)</h1>
</wm-stage>
<wm-section contentsize="text">
<h2></h2>
<wm-form validate>
<p>
Der Newsletter der wien.gv.at-Redaktion informiert Sie regelmäßig über neue Serviceangebote, Termine und aktuelle Themen aus der Stadt.
</p>
<form>
<wm-stack grow>
<wm-input type="text" label="Vorname" required size="32"></wm-input>
<wm-input type="text" label="Nachname" required size="32"></wm-input>
</wm-stack>
<wm-input type="email" label="E-Mail" required size="32"></wm-input>
<wm-checkbox labels="Ja, ich stimme zu, dass die von mir oben angegebenen personenbezogenen Daten zum Zweck des Newsletterversands gemäß der datenschutzrechtlichen Informationen verarbeitet und gespeichert werden. Ich kann diese Zustimmung jederzeit widerrufen." values="1" name="gruppe" required></wm-checkbox>
<wm-radio legend="Newsletter-Format" labels="HTML (mit Formatierung);Text (ohne Formatierung)" values="html;text" name="format" required></wm-radio>
<button>Jetzt anmelden</button>
</form>
</wm-form>
</wm-section>
</main>
<!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
<footer>
<!-- Copyright-Information wird aus Bildern extrahiert und automatisch hier angezeigt-->
<wm-copyright></wm-copyright>
<!-- Weiterführende Links -->
<wm-list type="horizontal" separator="pipe" alignment="center">
<ul></ul>
</wm-list>
© Stadt Wien, Rathaus, A-1010 Wien
</footer>
<!-- Live-Region -->
<div role="status" class="wm-h-vh"></div>
<!-- Wrapper für Modals -->
<wm-modal></wm-modal>
</body>
</html>Für die Erstellung von Formularen gibt es unterschiedliche Lösungen.
Natives HTML
Man kann ein Formular komplett ohne Web-Components erstellen. Wenn man sich dafür entscheidet, muss man sich selbst um die Validierung und Darstellung von Validierungsfehlern kümmern.
<form>
<div>
<label for="firstname">
Vorname <abbr title="Pflichtfeld">*</abbr>
</label>
<input type="text" id="firstname" required size="30">
</div>
<div>
<label for="email">E-Mail</label>
<input type="email" id="email" aria-describedby="msg_email" required aria-invalid="true" size="30">
<div class="wm-forms-message" id="msg_email">Bitte E-Mail angeben</div>
</div>
<button>Jetzt anmelden</button>
</form>Input-Web-Component
Dasselbe Formular kann auch in weniger Zeilen mit der Hilfe der Input-Web-Komponente geschrieben werden.
<script src="./wienermelange/assets/js/components/Input/Input.js" type="module"></script><form>
<wm-input type="text" label="Vorname" required size="30"></wm-input>
<wm-input type="email" label="E-Mail" required size="30" error="Bitte E-Mail angeben"></wm-input>
<button>Jetzt anmelden</button>
</form>Validierung
Die native Formular-Validierung funktioniert auch mit der Input-Komponente. Wenn man die Fehlerdarstellung nicht dem Browser überlassen möchten, muss das Formular in der Form-Komponente ausgeliefert werden.
<script src="./wienermelange/assets/js/components/Form/Form.js" type="module"></script><wm-form>
<form>
<wm-input type="text" label="Vorname" required size="30"></wm-input>
<wm-input type="email" label="E-Mail" required size="30" error="Bitte E-Mail angeben"></wm-input>
<button>Jetzt anmelden</button>
</form>
</wm-form>
Mit dem validate-Attribute lässt sich das gesamte Formular auch live validieren, ohne dass das Formular abgesendet werden muss.
<wm-form validate>
<form>
<wm-input type="text" label="Vorname" required size="30"></wm-input>
<wm-input type="email" label="E-Mail" required size="30" error="Bitte E-Mail angeben"></wm-input>
<button>Jetzt anmelden</button>
</form>
</wm-form>Weitere Tutorials
Kontakt
Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht
bietet?
handbuch@ma53.wien.gv.at