+++ /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/layout"
- th:with="uri='/projects/html-experimente/formulare.html'"
- >
- <head>
- <title>HTML-Experimente - Formulare</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>
- <article class="main" layout:fragment="maincontent">
- <header><h1>Formulare</h1></header>
- <form class="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="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="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="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="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="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="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="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="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="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="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>
- </article>
- </body>
-</html>
projects / website / blobdiff