333 lines
9.7 KiB
HTML
333 lines
9.7 KiB
HTML
<!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">
|
|
<div class="alert alert-primary">
|
|
<h2>Übung optional 01: Kontaktformular</h2>
|
|
|
|
<p>
|
|
Erweitere das bestehende Kontaktformular mithilfe von Bootstrap-Komponenten um persönliche Angaben (Anrede
|
|
per Radio-Buttons) sowie eine strukturierte Adressabfrage (Straße, Hausnummer, PLZ, Ort und Länderauswahl).
|
|
Achte dabei auf ein responsives Grid-Layout und eine semantisch korrekte Verknüpfung von Labels und
|
|
Eingabefeldern (for und id).
|
|
</p>
|
|
</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>
|
|
|
|
<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>
|
|
</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>
|