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

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