Interaktive Formulare für Veranstaltungsanmeldung oder Bewerbungen gehören heute zu den selbstverständlichen Funktionen von Internetseiten. In der Universität Bielefeld werden Formulare durch eine Software namens "FormTools" verarbeitet. Diese Software wird im Hochschulrechenzentrum gehostet. Wenn Sie ein solches Formular erstellen wollen, wenden Sie sich an das Informationsmanagement.
Um ein Formular vorzubereiten, müssen Sie in einem html-Dokument folgende Code-Schnipsel einfügen:
Hier wird das Script angefordert, das die Pflichtfelder erzeugt (nicht vergessen diese Felder an die vorhandenen Feldnamen anzupassen):
<script type="text/javascript" src="http://frmtools.uni-bielefeld.de/formtools/global/scripts/rsv.js"></script>
<script type="text/javascript">
var rules = [];
rules.push("required,vorname,Vorname erforderlich");
rules.push("required,nachname,Name erforderlich");
rules.push("required,email,E-Mail erforderlich");
rules.push("valid_email,email,E-Mail ungültig");
rules.push("digits_only,alter,Beim Alter bitte nur Ziffern eingeben.");
// an den nachfolgenden Zeilen bitte nichts ändern
rsv.errorFieldClass = null;
rsv.displayType = "alert-all";
rsv.customErrorHandler = null;
</script>
So sieht der Formular-Kopf aus (Zieladresse und utf-8 codierung):
<form action="http://frmtools.uni-bielefeld.de/formtools/process.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" onSubmit="return rsv.validate(this, rules)">
Mit der FormTools-FormID wird das entsprechende Formular angesprochen:
<input type="hidden" name="form_tools_form_id" value="105" />
Dieses dient der Zeichensatzcodierung für den Internet Explorer, ansonsten werden Umlaute abgeschnitten:
<input name="cheat" type="hidden" value="ﭒ" />
Optionale Formularfelder:
Textfeld <input size="30" name="name" />
<input size="30" name="name" placeholder="mit Platzhalter" />
Textarea <textarea name="feldname" cols="50" rows="10"></textarea>
Radio-Buttons
<input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br />
<input type="radio" name="Zahlmethode" value="Visa"> Visa<br />
<input type="radio" name="Zahlmethode" value="AmericanExpress"> American Express
Mastercard
Visa
American Express
Checkboxen
<input type="checkbox" name="zutat" value="salami"> Salami<br />
<input type="checkbox" name="zutat" value="pilze"> Pilze<br />
<input type="checkbox" name="zutat" value="sardellen"> Sardellen
Salami
Pilze
Sardellen
Dropdownbox
<select name="Anrede">
<option value=" ">Bitte Anrede wählen</option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
File Upload
<input name="datei" type="file" size="15">
Datumseingabe
<script type="text/javascript" src="/javascript/calendarDateInput.js"></script>
<script>DateInput("Name_des_Datumfeldes", true, "DD-MON-YYYY")</script>
Am Ende wird das Formular abgeschlossen:
<input class="button" type="submit" value="Abschicken" />
</form>
So oder ähnlich sollte ihr Hinweis am Ende eines Formulars lauten:
Ihre personenbezogenen Daten werden zum Zweck der Organisation der Veranstaltung gespeichert. Die Daten werden vertraulich behandelt und nicht an Dritte weiter gegeben. Sie können jederzeit Informationen über die gespeicherten Daten erhalten und die Zustimmung zur Speicherung ebenfalls widerrufen. Nach Beendigung der Veranstaltung werden die Daten gelöscht.
Ich habe die Bedingungen gelesen und bin damit einverstanden.
Falls Sie Ihre Formulare im Unigrün gestalten möchten, müssen Sie noch folgende Zeilen in den Kopf der Datei einfügen:
<script src="http://www.uni-bielefeld.de/javascript/uniform/jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$(".input, .textarea, .select, .button").uniform();
});
</script>
<link rel="stylesheet" href="http://www.uni-bielefeld.de/javascript/uniform/css/uniform.default.css" type="text/css" media="screen" />
Dabei gilt es dann darauf zu achten, dass die angelegten Formularfelder mit den richtigen Klassennamen beschriftet werden:
Sie können diesen Code kopieren und in Ihre html-Seite integrieren.
Weitere Hinweise zur Erzeugung von Formularfeldern finden Sie bei SELFHTML.
