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-06-22 10:34:57 +02:00
parent eefc30fa85
commit 781b2c357b
1 changed files with 183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
01_grundlagen/uebungen/o01_kontaktformular-adel.html Normal file
View File

@@ -0,0 +1,183 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></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>Kontaktformular</h1>
<form class="form-contact">
<!-- Eigene CSS-Klasse -->
<div class="row">
<div class="col-12 col-md-2">
<div class="mb-3">
<label for="input-gender" class="form-label">Anrede</label>
<select id="input-gender" name="gender" class="form-select" required>
<option value="f">Frau</option>
<option value="m">Herr</option>
<option value="d">Divers</option>
</select>
</div>
</div>
<!-- ------------------------------------------------------------------- -->
<div class="col-12 col-md-5">
<!-- col-12: volle Breite auf Handy, col-md-6: halbe Breite auf Desktop -->
<div class="mb-3">
<!-- margin-bottom: 1rem -->
<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.."
required />
</div>
</div>
<!-- --------------------------------- -->
<div class="col-12 col-md-5">
<div class="mb-3">
<label for="lastname" class="form-label">Nachname</label>
<input
type="text"
id="lastname"
name="lastname"
class="form-control"
placeholder="Nachname eingeben..."
required />
</div>
</div>
</div>
<!-- --------------------------------------------- -->
<!-- ------------------------------------------------ -->
<div class="row">
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="E-Mail" class="form-label">E-Mail</label>
<input
type="text"
id="E-Mail"
name="E-Mail"
class="form-control"
placeholder="E-Mail eingeben..."
required />
</div>
</div>
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-birthdate" class="form-label">Geburtsdatum</label>
<input type="date" id="input-birthdate" name="birthdate" class="form-control" required />
</div>
</div>
</div>
<!-- ------------------------ -->
<!-- <label for="Adresse" class="form-lable">Adresse</label> -->
<!-- ------------------------------------------ -->
<div class="row">
<div class="col-12 col-md-4">
<div class="mb-3">
<label for="Strasse" class="form-lable">Straße</label>
<input
type="text"
id="Strasse"
name="Straße"
class="form-control"
placeholder="Straße eingeben..."
required />
</div>
</div>
<!-- --------------------------------------------- -->
<div class="col-12 col-md-4">
<div class="mb-3">
<label for="plz" class="form-lable">PLZ</label>
<input type="text" id="plz" name="PLZ" class="form-control" placeholder="PLZ" required />
</div>
</div>
<!-- ---------------------------------------------- -->
<div class="col-3 col-md-4">
<div class="mb-3">
<label for="Hausnr" class="form-Hausnr">Hausnummer</label>
<input type="text" id="Hausnr" name="Hausnr" class="form-control" placeholder="Hausnr" required />
</div>
</div>
</div>
<!-- /row ---------------------------------------------------- -->
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="Stadt" class="form-ort">Stadt</label>
<input type="text" id="Stadt" name="Stadt" class="form-control" placeholder="Stadt" required />
</div>
</div>
</div>
<!-- ----------------------------------------- -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-subject" class="form-label">Land</label>
<select id="input-subject" name="subject" class="form-select" required>
<option value="">Deutschland</option>
<option value="">Frankreich</option>
<option value="">Österreich</option>
</select>
</div>
</div>
</div>
<!-- ------------------------------------ -->
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="input-message" class="form-label">Nachricht</label>
<textarea
id="input-message"
name="message"
class="form-control"
rows="3"
placeholder=""
required></textarea>
</div>
</div>
</div>
<!-- ---------------------------------------- -->
<div class="row">
<div class="col-12">
<div class="mb-3 form-check">
<input
type="checkbox"
id="input-datenschutz"
name="datenschutz"
class="form-check-input"
value="datenschutz"
required />
<label for="input-datenschutz" class="form-check-label">
Ich habe die Datenschutzerklärung gelesen und akzeptiere sie.
</label>
</div>
</div>
</div>
<!-- ▲ /row ▲ -->
</form>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>