ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-15 09:42:21 +02:00
parent beb3c1bda2
commit ee8cc31e77
22 changed files with 546 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_grundlagen/uebungen/o01_kontaktformular.html
+299 -64
View File
@@ -1,11 +1,15 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung optional 01: Kontaktformular</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
@@ -19,79 +23,310 @@
Eingabefeldern (for und id).
</p>
</div>
<div class="container py-5">
<h1>Kontakt</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
<form class="form-contact">
<div class="row">
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-firstname" class="form-label">First name:</label>
<input
type="text"
name="firstname"
id="input-firstname"
class="form-control input-firstname"
required />
</div>
</div>
<!-- ▲ /col ▲ -->
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-lastname" class="form-label">Last name:</label>
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
</div>
</div>
<!-- ▲ /col ▲ -->
</div>
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-email" class="form-label">E-mail</label>
<input type="email" name="email" id="input-email" class="form-control input-email" required />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-subject" class="form-label">Subject</label>
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
</div>
</div>
</div>
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="textarea-message" class="form-label">Message</label>
<textarea
name="message"
id="textarea-message"
cols="12"
rows="8"
class="form-control textarea-message"></textarea>
</div>
<h1>Kontakt</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
<form class="form-contact">
<!-- Anrede -->
<fieldset class="mb-3">
<legend class="form-label">Anrede</legend>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" id="input-radio-f" value="f" required />
<label for="input-radio-f" class="form-check-label">Frau</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" id="input-radio-m" value="m" required />
<label for="input-radio-m" class="form-check-label">Herr</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender" id="input-radio-d" value="d" required />
<label for="input-radio-d" class="form-check-label">Divers</label>
</div>
</fieldset>
<!-- Vorname / Nachname -->
<div class="row">
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-firstname" class="form-label">Vorname</label>
<input
type="text"
name="firstname"
id="input-firstname"
class="form-control"
autocomplete="given-name"
required />
</div>
</div>
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
<div class="row">
<div class="col">
<div class="mb-3">
<button type="submit" class="btn btn-dark button-submit">Send</button>
</div>
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-lastname" class="form-label">Nachname</label>
<input
type="text"
name="lastname"
id="input-lastname"
class="form-control"
autocomplete="family-name"
required />
</div>
</div>
</form>
</div>
</div>
<!-- Adresse -->
<div class="row">
<div class="col-12 col-md-8">
<div class="mb-3">
<label for="input-street" class="form-label">Straße</label>
<input
type="text"
name="street"
id="input-street"
class="form-control"
placeholder="Musterstraße"
autocomplete="address-line1"
required />
</div>
</div>
<div class="col-12 col-md-4">
<div class="mb-3">
<label for="input-house-number" class="form-label">Hausnummer</label>
<input
type="text"
name="house-number"
id="input-house-number"
class="form-control"
placeholder="12a"
required />
</div>
</div>
</div>
<!-- PLZ / Stadt -->
<div class="row">
<div class="col-12 col-md-4">
<div class="mb-3">
<label for="input-zip" class="form-label">Postleitzahl</label>
<input
type="text"
name="zip"
id="input-zip"
class="form-control"
placeholder="12345"
autocomplete="postal-code"
required />
</div>
</div>
<div class="col-12 col-md-8">
<div class="mb-3">
<label for="input-city" class="form-label">Ort</label>
<input
type="text"
name="city"
id="input-city"
class="form-control"
placeholder="Musterstadt"
autocomplete="address-level2"
required />
</div>
</div>
</div>
<!-- Land / Bundesland / Kanton -->
<div class="row">
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="select-country" class="form-label">Land</label>
<select name="country" id="select-country" class="form-select" autocomplete="country" required>
<option value="" selected disabled>Bitte Land auswählen</option>
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</select>
</div>
</div>
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="select-state" id="label-state" class="form-label">Bundesland / Kanton</label>
<select name="state" id="select-state" class="form-select" disabled required>
<option value="" selected disabled>Bitte zuerst ein Land auswählen</option>
</select>
</div>
</div>
</div>
<!-- E-Mail -->
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="input-email" class="form-label">E-Mail</label>
<input type="email" name="email" id="input-email" class="form-control" autocomplete="email" required />
</div>
</div>
</div>
<!-- Betreff -->
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="input-subject" class="form-label">Betreff</label>
<input type="text" name="subject" id="input-subject" class="form-control" />
</div>
</div>
</div>
<!-- Nachricht -->
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="textarea-message" class="form-label">Nachricht</label>
<textarea name="message" id="textarea-message" rows="8" class="form-control"></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-dark">Senden</button>
</div>
</div>
</form>
</div>
</main>
<script>
'use strict';
const countryEl = document.querySelector('#select-country');
const stateEl = document.querySelector('#select-state');
const stateLabelEl = document.querySelector('#label-state');
const germany = [
'Baden-Württemberg',
'Bayern',
'Berlin',
'Brandenburg',
'Bremen',
'Hamburg',
'Hessen',
'Mecklenburg-Vorpommern',
'Niedersachsen',
'Nordrhein-Westfalen',
'Rheinland-Pfalz',
'Saarland',
'Sachsen',
'Sachsen-Anhalt',
'Schleswig-Holstein',
'Thüringen',
];
const austria = [
'Burgenland',
'Kärnten',
'Niederösterreich',
'Oberösterreich',
'Salzburg',
'Steiermark',
'Tirol',
'Vorarlberg',
'Wien',
];
const switzerland = [
'Aargau',
'Appenzell Ausserrhoden',
'Appenzell Innerrhoden',
'Basel-Landschaft',
'Basel-Stadt',
'Bern',
'Freiburg',
'Genf',
'Glarus',
'Graubünden',
'Jura',
'Luzern',
'Neuenburg',
'Nidwalden',
'Obwalden',
'Schaffhausen',
'Schwyz',
'Solothurn',
'St. Gallen',
'Tessin',
'Thurgau',
'Uri',
'Waadt',
'Wallis',
'Zug',
'Zürich',
];
countryEl.addEventListener('change', () => {
const country = countryEl.value;
let regions;
stateEl.innerHTML = '';
stateEl.disabled = false;
if (country === 'de') {
regions = germany;
stateLabelEl.textContent = 'Bundesland';
} else if (country === 'at') {
regions = austria;
stateLabelEl.textContent = 'Bundesland';
} else if (country === 'ch') {
regions = switzerland;
stateLabelEl.textContent = 'Kanton';
}
const firstOption = document.createElement('option');
firstOption.textContent = 'Bitte auswählen';
firstOption.value = '';
firstOption.disabled = true;
firstOption.selected = true;
stateEl.appendChild(firstOption);
regions.forEach((region) => {
const option = document.createElement('option');
option.textContent = region;
option.value = region;
stateEl.appendChild(option);
});
});
</script>
</body>
</html>