juplo.de Git - website/blob - dist/potemkin/html-experimente/testlab.html

   1 <!DOCTYPE html>
   2 <html
   3     xmlns="http://www.w3.org/1999/xhtml"
   4     xmlns:layout="http://www.thymeleaf.org"
   5     xmlns:th="http://www.thymeleaf.org"
   6     layout:decorator="/templates/testlab"
   7     th:with="title='Media-Query-Test: BEISPIEL', uri='/potemkin/html-experimente/testlab.html'"
   8     >
   9   <head>
  10     <title>HTML-Experimente - Media-Query-Test: BEISPIEL</title>
  11     <!--/*-->
  12     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  13     <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
  14     <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
  15     <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
  16     <script src="../../js/less-1.7.0.min.js"></script>
  17     <!--*/-->
  18   </head>
  19   <body>
  20     <div layout:fragment="content" th:remove="tag">
  21       <form class="testlab form" action="#" method="get">
  22         <h2 class="f">Anzeigetext</h2>
  23         <div class="f textarea">
  24           <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
  25           <textarea class="f error" id="textarea_01" cols="50" rows="10">Eingegebener Text</textarea>
  26           <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
  27         </div>
  28       </form>
  29       <form class="testlab form" action="#" method="get">
  30         <h2 class="f">Textformatierung</h2>
  31         <fieldset class="f radiobutton cf">
  32           <legend class="f info">
  33             Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br />
  34             Online erscheint die Anzeige als normaler Fließtext.
  35           </legend>
  36           <hr class="f" />
  37           <div class="col2">
  38             <div class="f">
  39               <input class="f" id="radio_tbox_01" type="radio" name="radio_tbox" />
  40               <label class="f" for="radio_tbox_01">normaler Fließtext</label>
  41             </div>
  42             <div class="f">
  43               <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
  44               <label class="f" for="radio_tbox_02">Text zentriert</label>
  45             </div>
  46             <div class="f">
  47               <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
  48               <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
  49             </div>
  50             <div class="f">
  51               <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
  52               <label class="f" for="radio_tbox_04">Text fett</label>
  53             </div>
  54             <div class="f">
  55               <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
  56               <label class="f" for="radio_tbox_05">Text fett und rot</label>
  57             </div>
  58           </div>
  59           <div class="col2">
  60             <div class="f">
  61               <input class="f" id="radio_tbox_06" type="radio" name="radio_tbox" />
  62               <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
  63             </div>
  64             <div class="f">
  65               <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
  66               <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
  67             </div>
  68             <div class="f">
  69               <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
  70               <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
  71             </div>
  72             <div class="f">
  73               <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
  74               <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
  75             </div>
  76           </div>
  77         </fieldset>
  78       </form>
  79       <form class="testlab form" action="#" method="get">
  80         <h2 class="f">Einspaltige Radiobuttons...</h2>
  81         <fieldset class="f radiobutton">
  82           <div class="f">
  83             <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
  84             <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
  85           </div>
  86           <div class="f">
  87             <input class="f" id="radio_tbox_b02" type="radio" name="radio_tbox" />
  88             <label class="f" for="radio_tbox_b02">Option X</label>
  89           </div>
  90           <div class="f">
  91             <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
  92             <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>
  93           </div>
  94         </fieldset>
  95         <hr class="f" />
  96         <div class="f submit">
  97           <input class="f" type="submit" value="&gt; zur Übersicht" />
  98           <input class="f left" type="submit" value="&lt; zurück" />
  99           <input class="f" type="submit" value="&gt; weiter" />
 100         </div>
 101       </form>
 102       <form class="testlab form" action="#" method="get">
 103         <h2 class="f">Bild</h2>
 104         <fieldset class="f checkbox">
 105           <legend class="f">
 106             Du kannst Deiner Anzeige ein Bild hinzufügen.
 107             Das Bild erscheint nur online.
 108             Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
 109           </legend>
 110           <hr class="f" />
 111           <div class="f">
 112             <input class="f" id="checkbox_tbox_01" type="checkbox" name="checkbox_tbox" />
 113             <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
 114           </div>
 115           <div class="f">
 116             <input class="f" id="checkbox_tbox_02" type="checkbox" name="checkbox_tbox" />
 117             <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
 118           </div>
 119         </fieldset>
 120       </form>
 121       <form class="testlab form" action="#" method="get">
 122         <h2 class="f">Alleinstehende Checkbox</h2>
 123         <div class="f checkbox">
 124           <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
 125           <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
 126         </div>
 127       </form>
 128       <form class="testlab form" action="#" method="get">
 129         <h2 class="f">Kundendaten</h2>
 130         <p class="f required">
 131           <strong class="r">Pflichtfelder</strong> sind mit einem
 132           <strong class="r symbol">*</strong> markiert.
 133         </p>
 134         <div class="f text required">
 135           <label for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
 136           <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
 137         </div>
 138         <div class="f text required">
 139           <label for="text_tbox_02" class="f">Vorname</label>
 140           <input class="f" id="text_tbox_02" type="text" value="Max" />
 141         </div>
 142         <div class="f select required">
 143           <label for="text_tbox_03" class="f"><span class="required">* </span>Ort</label>
 144           <select class="f" id="text_tbox_03">
 145             <option>Dortmund</option>
 146             <option>Bochum</option>
 147             <option>Essen</option>
 148             <option>Mönchengladbach</option>
 149             <option>Oberhausen</option>
 150             <option>Castrop-Rauxel</option>
 151             <option>Düsseldorf</option>
 152           </select>
 153         </div>
 154         <div class="f text required">
 155           <label for="text_tbox_04" class="f"><span class="required">* </span>Straße/Hausnr.</label>
 156           <input class="f error" id="text_tbox_04" type="text" value="" />
 157           <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
 158         </div>
 159         <div class="f text required">
 160           <label for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
 161           <input class="f" id="text_tbox_05" type="text" value="" />
 162         </div>
 163         <div class="f text required">
 164           <label for="text_tbox_06" class="f">Telefon</label>
 165           <input class="f" id="text_tbox_06" type="text" value="" />
 166         </div>
 167         <hr class="f" />
 168         <div class="f submit">
 169           <input class="f" type="submit" value="&gt; weiter" />
 170         </div>
 171       </form>
 172       <form class="testlab form" action="#" method="get">
 173         <h2 class="f">Anzeige regionalisieren</h2>
 174         <p class="f">
 175           Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
 176           diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
 177           bestimmten Städten suchen.
 178           Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
 179           diesen Interessenten aber auch nicht gefunden.
 180         </p>
 181         <hr class="f" />
 182         <div class="f text">
 183           <label class="f" for="city">Stadt</label>
 184           <input id="city" type="text" class="f" />
 185           <p class="f info">
 186             Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
 187           </p>
 188         </div>
 189       </form>
 190       <form class="testlab form" action="#" method="get">
 191         <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
 192         <div class="f text required">
 193           <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
 194           <input class="f" id="text_tbox_05" type="password" value="t" />
 195         </div>
 196       </form>
 197       <form class="testlab form" action="#" method="get">
 198         <h2 class="f">Lade das Bild hoch</h2>
 199         <p class="f info">
 200           Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
 201           Das Bild darf nicht größer als 8 MByte sein.
 202         </p>
 203         <div class="f file required">
 204           <label for="file_tbox_01" class="f"><span class="required">* </span>Bild</label>
 205           <input class="f" id="file_tbox_01" type="file" />
 206         </div>
 207         <hr class="f" />
 208         <div class="f submit">
 209           <input class="f" type="submit" value="&gt; Doch kein Bild" />
 210           <input class="f" type="submit" value="&gt; Bild hochladen" />
 211         </div>
 212       </form>
 213       <div class="testlab form">
 214         <h2 class="f">Antworten</h2>
 215         <p class="f required">
 216           <strong class="r">Pflichtfelder</strong> sind mit einem
 217           <strong class="r symbol">*</strong> markiert.
 218         </p>
 219         <div class="f text required">
 220           <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
 221           <input id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
 222         </div>
 223         <div class="f text required">
 224           <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
 225           <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
 226         </div>
 227         <div class="f text required">
 228           <label class="f" for="subject"><span class="required">*</span> Betreff</label>
 229           <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
 230         </div>
 231         <div class="f textarea required">
 232           <label class="f" for="text"><span class="required">*</span> Nachricht</label>
 233           <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
 234         </div>
 235         <div class="f checkbox">
 236           <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" value="on"/>
 237           <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
 238         </div>
 239         <div class="f checkbox">
 240           <input id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" value="on"/>
 241           <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
 242         </div>
 243       </div>
 244       <div class="testlab form cf">
 245         <div class="col2 left">
 246           <h2 class="f">Weiter mit Anmeldung</h2>
 247           <div class="f text">
 248             <label class="f" for="username">Benutzername</label>
 249             <input class="f" name="username" id="username" type="text" tabindex="6" />
 250           </div>
 251           <div class="f text">
 252             <label class="f" for="password">Passwort</label>
 253             <input class="f" name="password" id="password" type="password" tabindex="7" />
 254           </div>
 255         </div>
 256         <div class="col2 right">
 257           <h2 class="f">Weiter ohne Anmeldung</h2>
 258           <!-- <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> -->
 259           <div class="f captcha cf">
 260             <span class="f">Was steht da?</span>
 261             <img class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
 262           </div>
 263           <div class="f text">
 264             <label class="f" for="captcha">Lösung</label>
 265             <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
 266           </div>
 267         </div>
 268       </div>
 269     </div>
 270   </body>
 271 </html>