--- /dev/null
+<!DOCTYPE html>
+<html
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:layout="http://www.thymeleaf.org"
+ xmlns:th="http://www.thymeleaf.org"
+ layout:decorator="templates/testlab"
+ th:with="title='Media-Query-Test: BEISPIEL', uri='/projects/html-experimente/testlab.html'"
+ >
+ <head>
+ <title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
+ <!--/*-->
+ <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
+ <style type="text/css">
+ @import '../../css/screen.min.css' screen;
+ @import '../../css/print.min.css' print;
+ </style>
+ <!--*/-->
+ </head>
+ <body>
+ <div layout:fragment="content" th:remove="tag">
+ <form class="testlab 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">< </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+ </div>
+ </form>
+ <form class="testlab 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>
+ <form class="testlab 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="> zur Übersicht" />
+ <input class="f left" type="submit" value="< zurück" />
+ <input class="f" type="submit" value="> weiter" />
+ </div>
+ </form>
+ <form class="testlab 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>
+ <form class="testlab 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>
+ <form class="testlab 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">< </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="> weiter" />
+ </div>
+ </form>
+ <form class="testlab 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>
+ <form class="testlab 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>
+ <form class="testlab 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="> Doch kein Bild" />
+ <input class="f" type="submit" value="> Bild hochladen" />
+ </div>
+ </form>
+ <div class="testlab 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 class="testlab 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>
+ </body>
+</html>
projects / website / blobdiff