Skip to content

Commit 565f651

Browse files
Pesho08Pesho08
committed
Formular validiert und Nav verbessert mit flexbox
1 parent 31ef4fc commit 565f651

2 files changed

Lines changed: 43 additions & 68 deletions

File tree

‎Formular.html‎

Lines changed: 42 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" class="main-bg">
2+
<html lang="de" class="main-bg">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -19,130 +19,102 @@
1919
</ul>
2020
</nav>
2121
</header>
22+
2223
<main>
2324
<h1>Formular</h1>
2425
<p>
2526
Hier ist ein Formular, das du ausfüllen kannst. Es ist wichtig, dass du
2627
alle Pflichtfelder (*) ausfüllst.
2728
</p>
2829

29-
<form
30-
action="https://gibm.becknet.ch/formular/formular.php"
31-
method="post"
32-
>
30+
<form action="https://gibm.becknet.ch/formular/formular.php" method="post">
31+
<!-- Anrede -->
3332
<div>
3433
<label>Anrede *</label><br />
35-
<input type="radio" id="radio" name="Anrede" value="Herr" required />
34+
<input type="radio" id="Herr" name="Anrede" value="Herr" required />
3635
<label for="Herr">Herr</label>
37-
<input type="radio" id="radio" name="Anrede" value="Frau" required />
36+
<input type="radio" id="Frau" name="Anrede" value="Frau" required />
3837
<label for="Frau">Frau</label>
39-
<input
40-
type="radio"
41-
id="radio"
42-
name="Anrede"
43-
value="Divers"
44-
required
45-
/>
38+
<input type="radio" id="Divers" name="Anrede" value="Divers" required />
4639
<label for="Divers">Divers</label>
4740
</div>
41+
42+
<!-- Beruf -->
4843
<div>
4944
<label for="Beruf">Beruf *</label><br />
50-
<select id="dropdown" class="Beruf">
45+
<select id="Beruf" name="Beruf" class="Beruf" required>
46+
<option value="">Bitte wählen</option>
5147
<option value="HatJob">Hat einen Job</option>
5248
<option value="Arbeitslos">Arbeitslos</option>
5349
</select>
5450
</div>
51+
52+
<!-- Vor- und Nachname -->
5553
<div>
5654
<label for="Vorname">Vorname *</label><br />
57-
<input
58-
type="text"
59-
id="textarea"
60-
name="Vorname"
61-
minlength="1"
62-
maxlength="100"
63-
autofocus
64-
required
65-
/>
66-
<br />
67-
<br />
55+
<input type="text" id="Vorname" name="Vorname" minlength="1" maxlength="100" required autofocus />
56+
<br /><br />
6857
<label for="Nachname">Nachname *</label><br />
69-
<input
70-
type="text"
71-
id="textarea"
72-
name="Nachname"
73-
minlength="1"
74-
maxlength="100"
75-
required
76-
/>
58+
<input type="text" id="Nachname" name="Nachname" minlength="1" maxlength="100" required />
7759
</div>
60+
61+
<!-- Geburtsdatum -->
7862
<div>
7963
<label for="Geburtsdatum">Geburtsdatum *</label><br />
8064
<input type="date" id="Geburtsdatum" name="Geburtsdatum" required />
8165
</div>
66+
67+
<!-- Adresse -->
8268
<div>
8369
<label for="Strasse">Strasse *</label><br />
84-
<input
85-
type="text"
86-
id="textarea"
87-
name="Strasse"
88-
minlength="1"
89-
maxlength="100"
90-
required
91-
/>
92-
<br />
93-
<br />
94-
<label for="PLZ">PLZ */ORT</label><br />
70+
<input type="text" id="Strasse" name="Strasse" minlength="1" maxlength="100" required />
71+
<br /><br />
72+
<label for="PLZ">PLZ *</label><br />
9573
<input type="text" id="PLZ" name="PLZ" maxlength="4" required />
96-
<input
97-
type="text"
98-
id="textarea"
99-
name="Ort"
100-
minlength="1"
101-
maxlength="100"
102-
placeholder="Ist zurzeit nicht verfügbar"
103-
disabled
104-
/>
74+
<br />
75+
<label for="Ort">Ort</label><br />
76+
<input type="text" id="Ort" name="Ort" placeholder="Ist zurzeit nicht verfügbar" disabled />
10577
</div>
78+
79+
<!-- Kontakt -->
10680
<div>
10781
<label for="Email">Email *</label><br />
10882
<input
10983
type="email"
110-
id="textarea"
84+
id="Email"
11185
name="Email"
11286
minlength="1"
11387
maxlength="100"
11488
pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
11589
placeholder="max.mustermann@example.de"
11690
required
11791
/>
118-
<br />
119-
<br />
92+
<br /><br />
12093
<label for="Passwort">Passwort *</label><br />
12194
<input
12295
type="password"
123-
id="textarea"
96+
id="Passwort"
12497
name="Passwort"
125-
minlength="1"
98+
minlength="8"
12699
maxlength="100"
100+
autocomplete="off"
101+
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
102+
title="Mindestens 8 Zeichen, 1 Zahl, 1 Großbuchstabe"
127103
required
128104
/>
129105
</div>
130106

107+
<!-- Optionales Feld -->
131108
<div>
132109
<label for="Telefon">Telefon</label><br />
133-
<input
134-
type="tel"
135-
id="textarea"
136-
name="Telefon"
137-
minlength="1"
138-
maxlength="100"
139-
/>
110+
<input type="tel" id="Telefon" name="Telefon" minlength="1" maxlength="100" />
140111
</div>
141112

113+
<!-- Nachricht -->
142114
<div>
143115
<label for="Nachricht">Nachricht *</label><br />
144116
<textarea
145-
id="textarea"
117+
id="Nachricht"
146118
name="Nachricht"
147119
rows="4"
148120
cols="50"
@@ -151,9 +123,11 @@ <h1>Formular</h1>
151123
required
152124
></textarea>
153125
</div>
126+
127+
<!-- Buttons -->
154128
<div>
155129
<input type="submit" id="Senden" name="Senden" value="Senden" />
156-
<input type="reset" id="Löschen" name="Löschen" value="Löschen" />
130+
<input type="reset" id="Loeschen" name="Loeschen" value="Löschen" />
157131
</div>
158132
</form>
159133
</main>

‎css/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ ul li {
4040
}
4141

4242
ul li a {
43+
flex-wrap: wrap;
4344
margin: 10px;
4445
display: block;
4546
padding: 8px;

0 commit comments

Comments
 (0)