Beispiel:Komplexes druck-stylesheet.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>