210 lines
7.6 KiB
HTML
210 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>FormularUebung</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">
|
|
<h1>FormularUebung</h1>
|
|
|
|
<form class="form-contact">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<div class="mb-3">
|
|
<label for="input-firstname" class="form-label">Vorname</label>
|
|
<input
|
|
type="text"
|
|
id="input-firstname"
|
|
name="firstname"
|
|
class="form-control input-firstname"
|
|
placeholder="Vorname eingeben..." />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<div class="mb-3">
|
|
<label for="input-lastname" class="form-label">Nachname</label>
|
|
<input
|
|
type="text"
|
|
id="input-lastname"
|
|
name="lastname"
|
|
class="form-control input-lastname"
|
|
placeholder="Nachname eingeben..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-8">
|
|
<div class="mb-3">
|
|
<label for="input-street-name" class="form-label">Straße</label>
|
|
<input
|
|
type="text"
|
|
id="input-street-name"
|
|
name="street-name"
|
|
class="form-control input-street-name"
|
|
placeholder="Straße eingeben..." />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm">
|
|
<div class="mb-3">
|
|
<label for="input-housenr" class="form-label">Hausnummer</label>
|
|
<input
|
|
type="text"
|
|
id="input-housenr"
|
|
name="housenr"
|
|
class="form-control input-housenr"
|
|
placeholder="Hausnr. eingeben..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bei type=number mit min="00000" und max="999999" sind Ergebnisse wie 7 möglich, daher type="text"-->
|
|
<div class="row">
|
|
<div class="col-12 col-sm">
|
|
<div class="mb-3">
|
|
<label for="input-zipcode" class="form-label">Postleitzahl</label>
|
|
<input
|
|
type="text"
|
|
id="input-zipcode"
|
|
name="zipcode"
|
|
class="form-control input-zipcode"
|
|
placeholder="PLZ eingeben..."
|
|
minlength="5"
|
|
maxlength="7" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-8">
|
|
<div class="mb-3">
|
|
<label for="input-town" class="form-label">Stadt/Ort</label>
|
|
<input
|
|
type="text"
|
|
id="input-town"
|
|
name="town"
|
|
class="form-control input-town"
|
|
placeholder="Ort eingeben..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="mb-3">
|
|
<label for="select-country" class="form-label">Land auswählen</label>
|
|
<select name="country" class="form-select" id="select-country">
|
|
<option value="" selected>Bitte Land auswählen</option>
|
|
<optgroup label="Südamerika">
|
|
<option value="ag">Argentinien</option>
|
|
<option value="br">Brasilien</option>
|
|
<option value="uy">Uruguay</option>
|
|
<option value="cl">Chile</option>
|
|
</optgroup>
|
|
<optgroup label="Europa">
|
|
<option value="de">Deutschland</option>
|
|
<option value="fr">Frankreich</option>
|
|
<option value="es">Spanien</option>
|
|
<option value="it">Italien</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="mb-3">
|
|
<label for="input-email" class="form-label">Type: email</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
class="form-control"
|
|
name="email"
|
|
id="input-email"
|
|
placeholder="E-Mail Adresse eingeben..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label for="input-subject" class="form-label">Thema</label>
|
|
<input
|
|
type="text"
|
|
id="input-subject"
|
|
name="subject"
|
|
class="form-control input-subject"
|
|
placeholder="Thema eingeben..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="mb-3">
|
|
<label for="input-message" class="form-label">Nachricht</label>
|
|
<textarea
|
|
id="input-message"
|
|
name="message"
|
|
class="form-control input-message"
|
|
placeholder="Deine Nachricht"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="mb-3">
|
|
<button type="submit" class="btn btn-dark">Formular abschicken</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Vorname, Nachname,
|
|
// Str, Hausnummer
|
|
// pls, ort
|
|
// Land (select)
|
|
// Email
|
|
// subject
|
|
// message
|
|
|
|
// btn
|
|
|
|
'use strict';
|
|
|
|
const form = document.querySelector('.form-contact');
|
|
|
|
// eventlistener function e soll bei abschicken ausgeführt werden
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault(); // Damit die Seite nich neu lädt wie beim Beispiel am Freitag
|
|
|
|
const firstnameEl = document.getElementById('input-firstname').value;
|
|
const lastnameEl = document.getElementById('input-lastname').value;
|
|
const streetEl = document.getElementById('input-street-name').value;
|
|
const housenrEl = document.getElementById('input-housenr').value;
|
|
const zipcodeEl = document.getElementById('input-zipcode').value;
|
|
const townEl = document.getElementById('input-town').value;
|
|
const emailEl = document.getElementById('input-email').value;
|
|
const subjectEl = document.getElementById('input-subject').value;
|
|
const messageEl = document.getElementById('input-message').value;
|
|
//Bei Feldern, wo man was auswählen muss
|
|
const countrySelectEl = document.querySelector('select[name="country"]');
|
|
// const country = countrySelectEl.options[countrySelect.selectedIndex].text;
|
|
const country = countrySelectEl.value;
|
|
console.log(countrySelectEl);
|
|
|
|
const summary = `Vorname: ${firstnameEl}, Nachname: ${lastnameEl}, Straße: ${streetEl} ${housenrEl}, PLZ: ${zipcodeEl}, Ort: ${townEl}, Land: ${country}, E-Mail: ${emailEl}, Thema: ${subjectEl}, Nachricht: ${messageEl}`;
|
|
|
|
console.log(summary);
|
|
alert(summary);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|