WEB-Team-A4/public/bestellformular.html

154 lines
6.1 KiB
HTML
Raw Permalink Normal View History

2023-04-24 18:06:45 +02:00
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2023-05-05 14:01:06 +02:00
<title>Bestellungen</title>
<style>
2023-05-16 09:47:43 +02:00
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
</style>
<script src="javascript/formchecker.js" async="true" ></script>
2023-04-24 18:06:45 +02:00
</head>
<body>
<header>
<nav>
<div class="navbar-mobile">
2023-05-05 13:13:50 +02:00
<div class="nav-container" >
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
2023-05-05 13:13:50 +02:00
<div class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
2023-05-05 13:13:50 +02:00
</div>
</div>
<div id="header-mobile-farbe">
<span class="header-mobile-text">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
</span>
</div>
<div id="header-mobile-farbe" class="header-mobile-logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
2023-04-24 18:06:45 +02:00
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
2023-04-24 18:06:45 +02:00
</nav>
</header>
2023-04-28 09:01:09 +02:00
<h1 id="begrueßung_bestellung_abschließen">Bestellung abschließen</h1>
<div id="fehlerbox"></div>
2023-05-03 18:28:36 +02:00
<form name="Bestellformular" >
2023-04-24 18:06:45 +02:00
<table class="bestellung_tabelle">
<tr>
<th class="feld_vorn"> <label for="anrede">&nbsp;Anrede</label></th>
<th class="stern">*</th>
<td> <input type="text" id="anrede" maxlength="30">
</td>
</tr>
<tr>
<th class="feld_vorn"><label for="titel">&nbsp;Titel</label></th>
<th class="stern"></th>
<td><input type="text" id="titel" maxlength="30"></td>
</tr>
<tr>
<th class="feld_vorn"><label for="vorname">&nbsp;Vorname</label></th>
<th class="stern">*</th>
<td><input type="text" id="vorname"></td>
</tr>
<tr>
<th class="feld_vorn"><label for="name">&nbsp;Name</label></th>
<th class="stern">*</th>
<td><input type="text" id="name"></td>
</tr>
<tr>
<th class="feld_vorn"> <label for="straße">&nbsp;Straße</label></th>
<th class="stern">*</th>
<td><input type="text" id="straße"></td>
</tr>
<tr>
<th class="feld_vorn"><label for="hausnummer">&nbsp;Hausnummer</label></th>
<th class="stern">*</th>
<td><input type="text" id="hausnummer"></td>
</tr>
<tr>
<th class="feld_vorn"><label for="plz">&nbsp;PLZ</label></th>
<th class="stern">*</th>
<td><input type="text" min="0" id="plz"></td>
2023-04-24 18:06:45 +02:00
</tr>
<tr>
<th class="feld_vorn"> <label for="wohnort">&nbsp;Wohnort</label></th>
<th class="stern">*</th>
<td><input type="text" id="wohnort"></td>
</tr>
<th class="feld_vorn"><label for="email">&nbsp;EMail</label></th>
<th class="stern">*</th>
<td><input type="email" id="email"></td>
</table>
2023-05-03 18:28:36 +02:00
2023-05-05 13:13:50 +02:00
2023-04-24 18:06:45 +02:00
</form>
<p id="tabellenbeschreibung">Die Felder mit einem * (Sternchen) sind Pflichtfelder.</p>
<p id="gesamtkosten"><strong>Die Gesamtkosten (inkl. MwSt.)</br>belaufen sich auf: 5,30€</strong>
<p>
<input type="checkbox" class="checkbox_ausrichtung">
<label for="checkbox_barzahlung" class="checkboxen">Ich akzeptiere die Barzahlung und habe
den</br>Rechnungsbetrag bei
Lieferung verfügbar.</label>
</p>
<p>
<input type="checkbox" class="checkbox_ausrichtung">
<label for="checkbox_datenschutzerklärung" class="checkboxen">Ich akzeptiere die Bestimmungen der</label>
<a href="datenschutz.html" class="checkboxen">Datenschutzerklärung.</a>
</p>
2023-05-03 18:28:36 +02:00
2023-04-24 18:06:45 +02:00
<div class="button_abschließen_position">
<p><a id="bestellbutton" class="button_abschließen" href="bestellung_erfolgreich.html" >Kostenpflichtig bestellen</a></p>
2023-05-03 18:28:36 +02:00
2023-04-24 18:06:45 +02:00
</div>
<footer>
<nav class="navbar-desktop" style="--items: 2;">
2023-04-24 18:06:45 +02:00
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
<div id="balken"></div>
</footer>
</body>
</html>