Beispiel:Komplexes druck-stylesheet.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<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>Komplexes Druck-Stylesheet</title>
<script>//<![CDATA[
(function () {
document.addEventListener("DOMContentLoaded", function () {
Array.from(document.forms).forEach(function (f) {
var b = document.createElement("button"),
p = document.createElement("p");
b.textContent = "drucken";
p.className = "screen";
p.appendChild(b);
f.appendChild(p);
f.addEventListener("submit", function (ev) {
var sig = document.querySelectorAll("#signature span"),
place = document.querySelector("#place")
date = new Date(),
months = [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
];
if (sig.length && place) {
sig[0].textContent = place.value
+ ", den "
+ date.getDate()
+ ". "
+ months[date.getMonth()]
+ " "
+ date.getFullYear()
;
sig[1].textContent = String.fromCharCode(160);
}
self.print();
// formular nicht abschicken!
ev.preventDefault();
ev.stopPropagation();
return false;
});
});
});
}());
//]]></script>
<style>
@media print {
.screen {
display: none;
}
main > ul {
border: 1px solid black;
border-radius: 1em;
list-style: none;
margin: 4em 0 4em 0;
padding: 1em;
width: 30%;
}
fieldset,
legend {
background: white;
border: 1px solid black;
border-radius: 0.5em;
}
fieldset {
margin: 0 0 1em 0;
padding: 1em;
}
legend {
margin: 0 0 0 1em;
padding: 0.5em 1em;
}
fieldset ul {
list-style: none;
margin: 0;
padding: 0;
}
fieldset ul {
list-style: none;
margin: 0;
padding: 0;
}
ul label {
display: inline-block;
}
#person label {
width: 8em;
}
label:first-child::after {
content: ":";
}
#certified {
vertical-align: middle;
}
input:not([type="checkbox"]) {
border: none;
font-weight: bold;
}
[type="checkbox"] + label::before {
content: " - ";
}
[type="checkbox"] {
display: none;
}
[type="checkbox"]:not(:checked) + label {
display: none;
}
#place + span {
content: "";
display: block;
}
select {
border: none;
font-size: 100%;
font-weight: bold;
}
#signature {
padding-top: 5em;
text-align: right;
width: 100%;
}
#signature span {
border-bottom: 1px solid black;
display: inline-block;
margin-bottom: 1.5em;
position: relative;
text-align: left;
width: 40%;
}
#signature span:first-child {
float: left;
width: 40%;
}
#signature span::after {
bottom: -1.5em;
content: attr(data-title);
left: 1em;
padding-left: 1em;
position: absolute;
width: 100;
}
}
@media screen {
.print {
display: none;
}
main > p:first-child {
background: white;
border-radius: 0.5em;
margin: 0;
padding: 1em;
}
main > p:first-child em {
color: red;
display: block;
margin-bottom: 1em;
text-align: center;
}
form {
border: 1px dotted white;
margin: 1em 0;
padding: 1em;
}
fieldset,
legend {
background: white;
border: 1px solid black;
border-radius: 0.5em;
}
fieldset {
margin: 0 0 1em 0;
padding: 1em;
}
legend {
margin: 0 0 0 1em;
padding: 0.5em 1em;
}
fieldset ul {
list-style: none;
margin: 0;
padding: 0;
}
#person label:first-child {
display: inline-block;
width: 8em;
}
label[for="zip"] {
text-align: right;
width: 3em;
}
#zip {
width: 3em;
}
}
</style>
</head>
<body>
<h1 class="screen">Komplexes Druck-Stylesheet</h1>
<main>
<p class="screen">
<em>Das folgende Formular ist bitte
<strong>inhaltlich nicht ernst</strong>
zu nehmen!</em>
Spielen Sie mit den Angaben und testen Sie fleißig die
Druckvorschau Ihres Browsers.
Nach Betätigen des Buttons werden
<strong>in der Druckvorschau</strong> Ort und Datum mittels
JavaScript automatisch voreingetragen - wenn JavaScript
verfügbar ist.
</p>
<ul class="print">
<li>An</li>
<li>SELFHTML e.V.</li>
<li>c/o Matthias Apsel</li>
<li>Benziner Straße 34</li>
<li>D-19386 Hof Kreien</li>
</ul>
<form>
<h2>Antrag auf Erteilung eines Antragsformulars</h2>
<p class="screen">
Bitte füllen Sie dieses Formular hier im Browser aus,
drucken es, und senden es auf dem Postweg zu.
</p>
<fieldset id="issue">
<legend>Angaben zum Vorgang</legend>
<ul>
<li>
<label for="type">Art</label>
<select id="type" required>
<option disabled selected>-- bitte wählen --</option>
<option>Bestätigung der Nichtigkeit des Durchschriftexemplars</option>
<option>Erklärung der Versicherung der Vorschriftsmäßigkeit</option>
<option>Einreichung der Niederschrift des Auschussprotokolls</option>
</select>
</li>
<li>
<input id="certified" type="checkbox">
<label for="certified">als beglaubigte Kopie</label>
</li>
<li>
<input id="resubmission" type="checkbox">
<label for="resubmission">zur Wiedervorlage</label>
</li>
<li>
<input id="additional" type="checkbox">
<label for="additional">weitere Dokumente anhängend</label>
</li>
</ul>
</fieldset>
<fieldset id="person">
<legend>Angaben zur Person</legend>
<ul>
<li>
<label for="name">Name</label>
<input id="name" required>
</li>
<li>
<label for="firstname">Vorname</label>
<input id="firstname" required>
</li>
<li>
<label for="address">Anschrift</label>
<input id="address" required>
</li>
<li>
<label for="place">Wohnort</label>
<input id="place" required>
<span></span>
<label for="zip">PLZ</label>
<input id="zip" required>
</li>
<li>
<label for="birthdate">Geburtsdatum</label>
<input id="birthdate" type="date" required>
</li>
</ul>
</fieldset>
<p class="print" id="signature"><span data-title="Ort, Datum"></span> <span data-title="Unterschrift"></span></p>
</form>
<p class="screen">Inhaltliche Ideen sind von Reinhard Mey abgekupfert. Das unübertroffene Original findet man auf seiner Seite: <a href="http://www.reinhard-mey.de/start/texte/alben/einen-antrag-auf-erteilung">www.reinhard-mey.de</a></p>
</main>
</body>
</html>
