Beispiel:Bestellformular mit verschiedenen Abschnitten.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Bestell-Formular mit verschiedenen Abschnitten</title>
<style>
.js fieldset {
background: white;
border: 1px solid black;
border-radius: 0.5em;
margin: 0 0 1rem 0;
}
.js legend {
background: white;
border: 1px solid black;
border-radius: 0.5rem;
box-shadow: 0 0 0.5rem #888;
padding: 0.5rem 1rem;
}
.js #article-1,
.js #article-2 {
width: 2rem;
}
.js #recipient-zip,
.js #buyer-zip {
width: 2rem;
}
.js dt {
font-weight: bold;
padding: 0 0 0.5em 3em;
}
.js dt:not(:first-of-type) {
margin: 2em 0 0 0;
}
.js dd {
margin: 0;
padding: 0;
}
.js dd ul {
list-style: none;
padding: 0;
}
.js dd li {
margin: 0;
padding: 0;
}
.js dd label:first-of-type {
display: inline-block;
text-align: right;
width: 8em;
}
.js #message {
height: 5rem;
width: calc(100% - 1rem);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
// button zum ein- und ausschalten von CSS-Regeln
var b = document.createElement("button"),
f = document.forms[0],
onClick;
onClick = function () {
if (f.hasAttribute("class")) {
f.removeAttribute("class");
b.innerHTML = "CSS-Regeln zum Verschönern einschalten";
} else {
f.setAttribute("class", "js");
b.innerHTML = "CSS-Regeln deaktivieren";
}
};
b.addEventListener("click", onClick);
b.type = "button";
document.getElementsByTagName("main")[0].appendChild(
document.createElement("p")
).appendChild(b);
f.setAttribute("class", "js");
onClick();
});
</script>
</head>
<body>
<h1>Bestell-Formular mit verschiedenen Abschnitten</h1>
<main>
<form action="">
<fieldset>
<legend>Ware</legend>
<ul>
<li>
<label for="article-1">Plüsch-Teddybär</label>
<input id="article-1" name="article-1" type="number" value="0">
</li>
<li>
<label for="article-2">Sofakissen "Sonnenblume"</label>
<input id="article-2" name="article-2" type="number" value="0">
</li>
</ul>
</fieldset>
<fieldset>
<legend>Bezahlung</legend>
<p>
<label for="payment">Art der Bezahlung</label>
<select id="payment" name="payment">
<option value="ae">American Express Card</option>
<option value="master">MasterCard</option>
<option value="visa">VISA</option>
<option value="prepayment">Vorkasse</option>
</select>
</p>
<p>
<input id="email-receipt" name="email-receipt" type="checkbox">
<label for="email-receipt">Quittung per E-Mail</label>
<label for="email">an folgende Adresse</label>
<input id="email" name="email" type="email">
</p>
</fieldset>
<fieldset>
<legend>Versand</legend>
<dl>
<dt>Lieferanschrift</dt>
<dd>
<ul>
<li>
<label for="recipient-name">Name</label>
<input id="recipient-name" name="recipient-name">
</li>
<li>
<label for="recipient-address">Anschrift</label>
<input id="recipient-address" name="recipient-address">
</li>
<li>
<label for="recipient-zip">PLZ</label>
<input id="recipient-zip" name="recipient-zip">
<label for="recipient-city">Ort</label>
<input id="recipient-city" name="recipient-city">
</li>
</ul>
</dd>
<dt>Rechnungsanschrift</dt>
<dd>
<ul>
<li>
<label for="buyer-name">Name</label>
<input id="buyer-name" name="buyer-name">
</li>
<li>
<label for="buyer-address">Anschrift</label>
<input id="buyer-address" name="buyer-address">
</li>
<li>
<label for="buyer-zip">PLZ</label>
<input id="buyer-zip" name="buyer-zip">
<label for="buyer-city">Ort</label>
<input id="buyer-city" name="buyer-city">
</li>
</ul>
</dd>
</dl>
</fieldset>
<fieldset>
<legend>Zusatz</legend>
<p>
<label for="message">Ihre Nachricht an uns</label>
<textarea id="message"></textarea>
</p>
</fieldset>
<p><button>jetzt Kostenpflichtig bestellen</button></p>
</form>
</main>
</body>
</html>
