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