projects / website / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
HTML-Vorlagen für Blog-Seiten und Formular-Beispiele
[website] / src / main / webapp / WEB-INF / views / formulare.html
diff --git a/src/main/webapp/WEB-INF/views/formulare.html b/src/main/webapp/WEB-INF/views/formulare.html
new file mode 100644 (file)
index 0000000..afa587a
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/formulare.html
@@ -0,0 +1,304 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
+<link href='http://fonts.googleapis.com/css?family=PT+Serif:700' rel='stylesheet' type='text/css' />
+<title>Basiselemente - Formulare</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="stylesheet" type="text/css" href="/css/base.css" />
+<link rel="stylesheet" type="text/css" href="/css/screen/fonts.css" media="screen" />
+<link rel="stylesheet" type="text/css" href="/css/screen/util.css" media="screen" /><!-- Für den Clear-Fix-Hack -->
+<link rel="stylesheet" type="text/css" href="/css/screen/formulare.css" media="screen" />
+<style type="text/css">
+body {
+border: 1em solid #fff;
+margin: 0;
+padding: 0;
+background-image: none;
+background-color: #fff;
+}
+</style>
+</head>
+<body>
+<h1>Formulare</h1>
+<div style="width: 100%; border-left: 970px solid green; padding-bottom: 20px">970px
+<div style="width: 100%; margin-left: -970px; border-left: 670px solid yellow; padding-bottom: 20px">670px
+<div style="width: 100%; margin-left: -670px; border-left: 480px solid orange; padding-bottom: 20px">480px
+<div style="width: 100%; margin-left: -480px; border-left: 320px solid red; padding-bottom: 20px">320px
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Anzeigetext</h2>
+<div class="f textarea">
+<label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+<textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
+<span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Textformatierung</h2>
+<fieldset class="f radiobutton cf">
+<legend class="f info">
+Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
+Online erscheint die Anzeige als normaler Fließtext.
+</legend>
+<hr class="f" />
+<div class="col2">
+<div class="f">
+<input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_01">normaler Fließtext</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_02">Text zentriert</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_04">Text fett</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_05">Text fett und rot</label>
+</div>
+</div>
+<div class="col2">
+<div class="f">
+<input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+</div>
+</div>
+</fieldset>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Einspaltige Radiobuttons...</h2>
+<fieldset class="f radiobutton">
+<div class="f">
+<input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_b02">Option X</label>
+</div>
+<div class="f">
+<input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
+<label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+</div>
+</fieldset>
+<hr class="f" />
+<div class="f submit">
+<input class="f" type="submit" value="&gt; zur Übersicht" />
+<input class="f left" type="submit" value="&lt; zurück" />
+<input class="f" type="submit" value="&gt; weiter" />
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Bild</h2>
+<fieldset class="f checkbox">
+<legend class="f">
+Du kannst Deiner Anzeige ein Bild hinzufügen.
+Das Bild erscheint nur online.
+Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+</legend>
+<hr class="f" />
+<div class="f">
+<input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
+<label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+</div>
+<div class="f">
+<input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
+<label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+</div>
+</fieldset>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Alleinstehende Checkbox</h2>
+<div class="f checkbox">
+<input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
+<label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Kundendaten</h2>
+<p class="f required">
+<strong class="r">Pflichtfelder</strong> sind mit einem
+<strong class="r symbol">*</strong> markiert.
+</p>
+<div class="f text required">
+<label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
+<input class="f" id="text_tbox_01" type="text" value="Mustermann" />
+</div>
+<div class="f text required">
+<label for="text_tbox_02" class="f">Vorname</label>
+<input class="f" id="text_tbox_02" type="text" value="Max" />
+</div>
+<div class="f select required">
+<label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
+<select class="f" id="text_tbox_03">
+<option>Dortmund</option>
+<option>Bochum</option>
+<option>Essen</option>
+<option>Mönchengladbach</option>
+<option>Oberhausen</option>
+<option>Castrop-Rauxel</option>
+<option>Düsseldorf</option>
+</select>
+</div>
+<div class="f text required">
+<label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
+<input class="f error" id="text_tbox_04" type="text" value="" />
+<span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+</div>
+<div class="f text required">
+<label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
+<input class="f" id="text_tbox_05" type="text" value="" />
+</div>
+<div class="f text required">
+<label for="text_tbox_06" class="f">Telefon</label>
+<input class="f" id="text_tbox_06" type="text" value="" />
+</div>
+<hr class="f" />
+<div class="f submit">
+<input class="f" type="submit" value="&gt; weiter" />
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Anzeige regionalisieren</h2>
+<p class="f">
+Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+bestimmten Städten suchen.
+Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+diesen Interessenten aber auch nicht gefunden.
+</p>
+<hr class="f" />
+<div class="f text">
+<label class="f" for="city">Stadt</label>
+<input id="city" type="text" class="f" />
+<p class="f info">
+Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+</p>
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+<div class="f text required">
+<label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
+<input class="f" id="text_tbox_05" type="password" value="t" />
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<form class="form" action="#" method="get">
+<h2 class="f">Lade das Bild hoch</h2>
+<p class="f info">
+Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+Das Bild darf nicht größer als 8 MByte sein.
+</p>
+<div class="f file required">
+<label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
+<input class="f" id="file_tbox_01" type="file" />
+</div>
+<hr class="f" />
+<div class="f submit">
+<input class="f" type="submit" value="&gt; Doch kein Bild" />
+<input class="f" type="submit" value="&gt; Bild hochladen" />
+</div>
+</form>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<div class="form">
+<h2 class="f">Antworten</h2>
+<p class="f required">
+<strong class="r">Pflichtfelder</strong> sind mit einem
+<strong class="r symbol">*</strong> markiert.
+</p>
+<div class="f text required">
+<label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+<input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
+</div>
+<div class="f text required">
+<label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+<input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
+</div>
+<div class="f text required">
+<label class="f" for="subject"><span class="required">*</span> Betreff</label>
+<input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
+</div>
+<div class="f textarea required">
+<label class="f" for="text"><span class="required">*</span> Nachricht</label>
+<textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
+</div>
+<div class="f checkbox">
+<input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
+<label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+</div>
+<div class="f checkbox">
+<input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
+<label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+</div>
+</div>
+</div>
+<div style="width: 75%; margin-left: -320px; background-color: #fff;">
+<div class="form cf">
+<div class="col2 left">
+<h2 class="f">Weiter mit Anmeldung</h2>
+<div class="f text">
+<label class="f" for="username">Benutzername</label>
+<input class="f" name="username" id="username" type="text" tabindex="6" />
+</div>
+<div class="f text">
+<label class="f" for="password">Passwort</label>
+<input class="f" name="password" id="password" type="password" tabindex="7" />
+</div>
+</div>
+<div class="col2 right">
+<h2 class="f">Weiter ohne Anmeldung</h2>
+<!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+<div class="f captcha cf">
+<span class="f">Was steht da?</span>
+<img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
+</div>
+<div class="f text">
+<label class="f" for="captcha">Lösung</label>
+<input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>
Unnamed repository; edit this file 'description' to name the repository.