juplo.de Git - website/blob - src/main/webapp/WEB-INF/views/test/formulare.jsp

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