-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
142 lines (142 loc) · 44 KB
/
form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html><html lang="de"><head><title>Form | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="FormDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.deform.html"><meta property="og:title" content="Form"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle.css"><link rel="stylesheet" href="assets/css/ide-editmode.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header></header><main><div class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-component-header"><div class="c-component-header__action-wrapper"><div class="c-component-header__cta-wrapper"> <a class="c-cta c-cta--small is-active" href="form.html"><span class="c-cta__text">All Themes</span></a></div></div></div></div></div></div></div><div id="figma" class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-8"><div class="c-text c-markdown"><h1>Form Elements</h1><p>Form Elemente werden verwendet, um Benutzereingaben zu sammeln. Die Benutzereingaben werden meist zur Verarbeitung an einen Server gesendet.</p></div></div></div></div></div><div id="form" class="c-section pt-2 pb-3"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-mw-8"><div class="c-code-block__intro"><div class="c-text"><h3>Default</h3></div></div><div class="c-code-block"><div class="c-code-block__preview"><div class="c-form"><form data-submit="form" method="POST" data-validate="true" data-action="/assets/media/mailer.php" data-json="{"phpScriptPath":"/assets/media/mailer.php"}"> <input type="hidden" name="todo" value="mailer"> <input type="hidden" name="MAILSUBJECT" value="Email Betreff"> <input type="hidden" name="MESSAGE_OK" value="Deine Nachricht wurde erfolgreich gesendet! :)"> <input type="hidden" name="MESSAGE_FAIL" value="Deine Nachricht konnte leider nicht gesendet werden! :("><h3>Kontakt</h3><div class="g-row"><div class="g-col-12 g-col-tp-6"><div class="c-form__input-item"> <label class="c-label" for="email">Email</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="email" name="email" id="email" aria-label="Bitte Ihre E-Mail-Adresse eintragen" placeholder="E-Mail" data-required="true"></div><div class="c-message">Bitte Ihre E-Mail-Adresse eintragen.</div></div></div></div><div class="g-row"><div class="g-col-12 g-col-tp-6"><div class="c-form__input-item"> <label class="c-label" for="name">Vorname</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="name" id="name" aria-label="Bitte Ihren Vornamen eintragen" placeholder="Vorname" data-required="true"></div><div class="c-message">Bitte Ihren Vornamen eintragen.</div></div></div><div class="g-col-12 g-col-tp-6"><div class="c-form__input-item"> <label class="c-label" for="surname">Nachname</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="surname" id="surname" aria-label="Bitte Ihren Nachnamen eintragen" placeholder="Nachname" data-required="true"></div><div class="c-message">Bitte Ihren Nachnamen eintragen.</div></div></div><div class="g-col-9 g-col-mw-10 g-col-tp-8"><div class="c-form__input-item"> <label class="c-label" for="street">Straße</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="street" id="street" aria-label="Bitte Ihre Straße eintragen" placeholder="Straße" data-required="true"></div><div class="c-message">Bitte Ihre Straße eintragen.</div></div></div><div class="g-col-3 g-col-mw-2 g-col-tp-4"><div class="c-form__input-item"> <label class="c-label" for="number">Hausnr</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="number" id="number" aria-label="Bitte Ihre Hausnummer eintragen" placeholder="41" data-required="true"></div><div class="c-message">Bitte Ihre Hausnummer eintragen.</div></div></div><div class="g-col-3 g-col-mw-2 g-col-tp-4"><div class="c-form__input-item"> <label class="c-label" for="zip">PLZ</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="zip" id="zip" aria-label="Bitte Ihre Postleitzahl eintragen" value="48145" data-required="true" readonly></div><div class="c-message">Bitte Ihre Postleitzahl eintragen.</div></div></div><div class="g-col-9 g-col-mw-10 g-col-tp-8"><div class="c-form__input-item"> <label class="c-label" for="city">Stadt</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="city" id="city" aria-label="Bitte Ihre Stadt eintragen" placeholder="Stadt" data-required="true"></div><div class="c-message">Bitte Ihre Stadt eintragen.</div></div></div></div><div class="c-form__input-item"> <label class="c-label" for="iban">IBAN</label><div class="c-input__label"><div class="c-input__tooltip-wrapper"></div></div><div class="c-input__container"> <input class="c-input" type="text" name="iban" data-type="iban" data-mask="iban" id="iban" aria-label="Bitte Ihre IBAN eintragen" placeholder="DE02100100100006820101" data-required="true"></div><div class="c-message">Bitte Ihre IBAN eintragen.</div></div><div class="c-form__input-item"> <label class="c-label" for="message">Nachricht</label><textarea class="c-input" name="message" data-type="text" id="message" aria-label="Bitte Ihre Nachricht eintragen" placeholder="Ihre Nachricht" data-required="true"></textarea><div class="c-message"><span>Bitte Ihre Nachricht eintragen.</span></div></div><div class="c-form__cta-wrapper"><div class="c-cta-group c-cta-group--stack"> <button class="c-cta c-cta--primary" type="submit"> <span class="c-cta__text">Absenden</span></button></div></div></form></div></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">data-submit</span>=<span class="hljs-string">"form"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"POST"</span> <span class="hljs-attr">data-validate</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">data-action</span>=<span class="hljs-string">"/assets/media/mailer.php"</span> <span class="hljs-attr">data-json</span>=<span class="hljs-string">"{<span class="hljs-symbol">&quot;</span>phpScriptPath<span class="hljs-symbol">&quot;</span>:<span class="hljs-symbol">&quot;</span>/assets/media/mailer.php<span class="hljs-symbol">&quot;</span>}"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"todo"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"mailer"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"MAILSUBJECT"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Email Betreff"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"MESSAGE_OK"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Deine Nachricht wurde erfolgreich gesendet! :)"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"MESSAGE_FAIL"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Deine Nachricht konnte leider nicht gesendet werden! :("</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Kontakt<span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-row"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-12 g-col-tp-6"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"email"</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre E-Mail-Adresse eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"E-Mail"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihre E-Mail-Adresse eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-row"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-12 g-col-tp-6"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"name"</span>></span>Vorname<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihren Vornamen eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Vorname"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihren Vornamen eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-12 g-col-tp-6"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"surname"</span>></span>Nachname<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"surname"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"surname"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihren Nachnamen eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Nachname"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihren Nachnamen eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-9 g-col-mw-10 g-col-tp-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"street"</span>></span>Straße<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"street"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"street"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre Straße eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Straße"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihre Straße eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-3 g-col-mw-2 g-col-tp-4"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"number"</span>></span>Hausnr<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"number"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre Hausnummer eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"41"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihre Hausnummer eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-3 g-col-mw-2 g-col-tp-4"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"zip"</span>></span>PLZ<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"zip"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"zip"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre Postleitzahl eintragen"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"48145"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">readonly</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihre Postleitzahl eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"g-col-9 g-col-mw-10 g-col-tp-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"city"</span>></span>Stadt<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"city"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"city"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre Stadt eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Stadt"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihre Stadt eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"iban"</span>></span>IBAN<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__label"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__tooltip-wrapper"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input__container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"iban"</span> <span class="hljs-attr">data-type</span>=<span class="hljs-string">"iban"</span> <span class="hljs-attr">data-mask</span>=<span class="hljs-string">"iban"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"iban"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre IBAN eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"DE02100100100006820101"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span>Bitte Ihre IBAN eintragen.<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__input-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"message"</span>></span>Nachricht<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-input"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"message"</span> <span class="hljs-attr">data-type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"message"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Bitte Ihre Nachricht eintragen"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Ihre Nachricht"</span> <span class="hljs-attr">data-required</span>=<span class="hljs-string">"true"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-message"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span>></span>Bitte Ihre Nachricht eintragen.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-form__cta-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-cta-group c-cta-group--stack"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-cta c-cta--primary"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-cta__text"</span>></span>Absenden<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div></div></div></div><aside class="sidebar"><nav class="c-side-nav"> <button class="c-side-nav__nav-toggle" id="c-side-nav__toggle"><span class="c-side-nav__toggle-icon"></span></button><div class="c-side-nav__picture-wrapper"><a class="c-side-nav__picture-link" href="/"><div class="c-picture"> <img alt="Logo" src="assets/img/logo.svg"> <span class="c-badge" style="
position: absolute;
left: 101px;
bottom: -10px;
">v1.0.0</span></div></a><div class="c-cta-group"> <a class="c-cta" href="https://github.com/wirDesign-communication-AG/stadtwerke-muenster-design-system" target="_blank"><span class="c-cta__text">GitHub</span></a> <a class="c-cta" href="https://www.figma.com/file/wLXdixPS3eSOEmOtvxj6Jg/SWMS-?node-id=0%3A1" target="_blank"><span class="c-cta__text">Figma</span></a></div><div class="c-cta-group c-filter"><span class="c-input-wrapper " data-action="wrapper"><div class="c-input__container"> <input autofocus class="c-input c-filter__input" type="search" name="input" id="input" aria-label="Componentenfilter. Bitte Text eintragen." placeholder="Filter Components..."></div></span></div></div><div class="c-side-nav__nav-wrapper"><ul><li><p>Introduction</p><ul><li> <a class="" href="index.html" title="Overview">Overview</a></li><li> <a class="" href="getting-started.html" title="Getting Started">Getting Started</a></li><li> <a class="" href="accessibility.html" title="Accessibility">Accessibility</a></li><li> <a class="" href="principles.html" title="Principles">Principles</a></li><li> <a class="" href="theming.html" title="Theming">Theming</a></li></ul></li><li><p>Basics</p><ul><li> <a class="" href="animation.html" title="Animation">Animation</a></li><li> <a class="" href="colors.html" title="Colors">Colors</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/colors.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-primary" data-anchor="color-primary" title="Primary">Primary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-secondary" data-anchor="color-secondary" title="Secondary">Secondary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-special" data-anchor="color-special" title="Special">Special</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-backgrounds" data-anchor="color-backgrounds" title="Backgrounds">Backgrounds</a></li></ul></li><li> <a class="" href="graphics.html" title="Graphics">Graphics</a></li><li> <a class="" href="layout.html" title="Layout">Layout</a></li><li> <a class="" href="icons.html" title="Icons">Icons</a></li><li> <a class="" href="logo.html" title="Logo">Logo</a></li><li> <a class="" href="spacing.html" title="Spacing">Spacing</a></li><li> <a class="" href="typography.html" title="Typography">Typography</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/typography.html#typo-intro" data-anchor="typo-intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-headlines" data-anchor="typo-headlines" title="Headline">Headline</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-text" data-anchor="typo-text" title="Text">Text</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-quote" data-anchor="typo-quote" title="Quote">Quote</a></li></ul></li></ul></li><li><p>Form-Elements</p><ul><li> <a class="" href="checkbox.html" title="Checkbox">Checkbox</a></li><li> <a class="" href="date-picker.html" title="Date-Picker">Date-Picker</a></li><li> <a class="" href="dropdown.html" title="Dropdown">Dropdown</a></li><li> <a class="" href="file-upload.html" title="File-Upload">File-Upload</a></li><li> <a class="is-active" href="form.html" title="Form">Form</a></li><li> <a class="" href="input.html" title="Input">Input</a></li><li> <a class="" href="radio-button.html" title="Radio-Button">Radio-Button</a></li><li> <a class="" href="switch.html" title="Switch">Switch</a></li><li> <a class="" href="toggle-button.html" title="Toggle-Button">Toggle-Button</a></li><li> <a class="" href="tooltip.html" title="Tooltip">Tooltip</a></li></ul></li><li><p>Basic Components</p><ul><li> <a class="" href="badge.html" title="Badge">Badge</a></li><li> <a class="" href="button.html" title="Button">Button</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/button.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/button.html#standard" data-anchor="standard" title="Variationen">Variationen</a></li><li> <a class="c-side-nav__section-link" href="/button.html#cta-group" data-anchor="cta-group" title="Gruppe">Gruppe</a></li></ul></li><li> <a class="" href="chips.html" title="Chips">Chips</a></li><li> <a class="" href="eye-catcher.html" title="Eye-Catcher">Eye-Catcher</a></li><li> <a class="" href="image.html" title="Image">Image</a></li><li> <a class="" href="loader.html" title="Loader">Loader</a></li><li> <a class="" href="lottie-animation.html" title="Lottie-Animation">Lottie-Animation</a></li><li> <a class="" href="messages.html" title="Messages">Messages</a></li><li> <a class="" href="quote.html" title="Quote">Quote</a></li><li> <a class="" href="text.html" title="Text">Text</a></li><li> <a class="" href="table.html" title="Table">Table</a></li><li> <a class="" href="video.html" title="Video">Video</a></li></ul></li><li><p>Modules</p><ul><li> <a class="" href="accordion.html" title="Accordion">Accordion</a></li><li> <a class="" href="breadcrumb.html" title="Breadcrumb">Breadcrumb</a></li><li> <a class="" href="card.html" title="Card">Card</a></li><li> <a class="" href="carousel.html" title="Carousel">Carousel</a></li><li> <a class="" href="hero.html" title="Hero">Hero</a></li><li> <a class="" href="hero-carousel.html" title="Hero-Carousel">Hero-Carousel</a></li><li> <a class="" href="navigation.html" title="Navigation">Navigation</a></li><li> <a class="" href="tabs.html" title="Tabs">Tabs</a></li><li> <a class="" href="text-picture.html" title="Text-Picture">Text-Picture</a></li></ul></li></ul></div></nav></aside></main><footer><div class="c-footer p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-footer__nav-wrapper"><nav class="c-footer__nav"><ul class="c-footer__nav-list"><li class="c-footer__nav-list-item"> <a href="impressum.html" title="Impressum">Impressum</a></li><li class="c-footer__nav-list-item"> <a href="datenschutz.html" title="Datenschutz">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>