Strohhalm

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Privat

 

Anmelde-Formular



Als Strohhalm-Mitglied registrieren.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Magazin

 

strohhalm.org / Magazin / Programmierung Clientseitig / Formulare: Platz sparen mit Tabreitern

Formulare: Platz sparen mit Tabreitern

drwitt. Nachricht an drwitt.+3 -0.14. August 2005, 10:32

Je komplexer die Datensätze einer datenbankgestützten Webanwendung strukturiert sind, desto länger wird oft das Webformular zum Bearbeiten. Dieser Artikel zeigt, wie man ein Formular mit Hilfe von ein wenig Javascript in mehrere Tabs aufteilen kann, so wie man es z.B. von den „Eigenschaften”-Dialogen des Betriebssystems kennt. Ungeduldige können gleich zum fertigen Beispiel-Formular [/content/magazin/57/tabreiter.html].

Als Beispiel für einen solchen Datensatz mag eine CMS-generierte Webseite eines selbstgestrickten CMS dienen. Jedes Webseitenobjekt hat zahlreiche Eigenschaften, die sich in verschiedene Kategorien einteilen lassen:

Allgemeine Eigenschaften
Diese Felder beschreiben inhaltliche Aspekte, z.B.
  • Seitentitel
  • Überschrift
  • Seitentext
  • Angaben zu Bildern etc.
Technische Details
Was sonst noch eine gute Webseite ausmacht, z.B.
  • Stylesheet
  • Javascript-Include
  • Alternative Darstellungen
Spezialfelder
Angaben, die die Zugänglichkeit verbessern, z.B.
  • mod_rewrite
  • Link-Text

Navigation und Formular: HTML und CSS

Für jedes Datenfeld der drei Kategorien wird ein Eingabfeld benötigt. Alle Eingabefelder einer Kategorie sollten in einem Fieldset gruppiert werden. In HTML sieht das dann so aus:

<form method="post" id="formular" action="index.html"> <fieldset id="properties"> <legend>Eigenschaften bearbeiten</legend> <ul> <li> <label for="title">Seitentitel</label> <input type="text" id="title" /> </li> <li> <label for="inhalt">Inhalt</label> <textarea id="inhalt" rows="8" cols="20"></textarea> </li> </ul> </fieldset> <fieldset id="details"> <legend>Technische Details</legend> <ul> <li> <label for="css">CSS-Datei</label> <input type="text" id="css" /> </li> <li> <label for="js">Javascript-Datei</label> <input type="text" id="js" /> </li> </ul> </fieldset> <fieldset id="access"> <legend>Benutzerfreundlichkeit</legend> <ul> <li> <label for="mod_rewrite">mod_rewrite URL</label> <input type="text" id="mod_rewrite" /> </li> <li> <label for="link">Link-Text</label> <input type="text" id="link" /> </li> <li> <label for="bookmark">Bookmark</label> <input type="text" id="bookmark" /> </li> </ul> </fieldset> <fieldset> <legend>Eingaben speichern</legend> <input type="submit" id="ok" /> <input type="reset" id="stop" /> </fieldset> </form>

In der Standardformatierung ist das natürlich noch nicht ganz brauchbar. Wir passen also die grundlegenden CSS-Formatierungen an:

form { width: 30em; padding: 0.1em; } fieldset.inactive { display: none; } fieldset legend { font-weight: bold; } fieldset ul { list-style-type: none; padding: 0em; } fieldset ul li { clear: both; } fieldset ul li label { font-size: 0.9em; text-align: right; float: left; width: 7.5em; margin-right: 1.5em; }

Der einfachste Weg, um sich auch ohne Javascript in diesem Formular schnell zu bewegen und das gewünschte Fieldset in den Mittelpunkt zu rücken, ist eine Verweisliste zu den einzelnen Fieldsets, die dem Formular vorangestellt wird. Dabei werden wir die Links schon ein wenig auf ihren späteren Einsatz vorbereiten und einen onclick-Handler einbauen:

<ul class="clearfix" id="formnavi"> <li><a href="#properties" onclick="return Switch_Tabs(this);">Eigenschaften</a></li> <li><a href="#details" onclick="return Switch_Tabs(this);">Details</a></li> <li><a href="#access" onclick="return Switch_Tabs(this);">Accessibility</a></li> </ul>

Noch stehen die Listenelemente einfach untereinander. Damit sie wie anständige Tabreiter auch nebeneinander stehen, definieren wir die folgenden CSS-Eigenschaften. Der zusätzliche Selektor clearfix dient dazu, die gefloateten Listenelemente zu "clearen" und so das umgebende ul-Element mit einer vertikalen Ausdehnung zu versehen. (Über diese Clearing-Methode lasse ich mich hier nicht aus, das steht alles in einem prima externer LinkArtikel von Big John und Holly Bergevin [http://www.positioniseverything.net/easyclearing.html], der auch in einer externer Linkdeutschen Übersetzung [http://jassesnee.de/easyclear/index.html] verfügbar ist.)

#formnavi { list-style-type: none; padding: 0em; margin: 0em; } #formnavi li { float: left; margin: 0em 0.5em; padding: 0em; }

HTML-Formular

Jetzt, wo das grundlegende HTML und CSS beisammen ist, sollte das Formular in etwa so aussehen wie auf diesem Bild.

Tabs umschalten: Javascript

Das Prinzip eines Formulars mit Tabreiters ist ja, daß nach einem Klick auf einen Tabreiter das betreffende Tab eingeblendet wird. In die (X)HTML-Welt übertragen bedeutet das, daß die nicht benötigten Fieldsets unsichtbar sind, während das aktuelle angezeigt wird.

Wird das Formular geladen, sind zunächst alle Fieldsets sichtbar, und wir können sie mit Javascript wegzaubern. Zu beachten ist dabei, daß zunächst das erste Fieldset sichtbar bleibt und natürlich das letzte, das die Submit-Buttons enthält. Darüber brauchen wir uns allerdings keine Gedanken machen, denn die Javascript Funktion Init_Formular [#initjs] wird uns die Arbeit abnehmen. Weil allerdings auch mehrere Formulare in einer Seite möglich sind, teilen wir ihr beim Aufruf mit, welches Formular sie bearbeiten soll. Die Funktion wird beim Laden der Seite gleich ausgeführt.

var current_fieldset = null; window.onload = function() { Init_Formular("formular"); }

Init_Formular

Die Funktion Init_Formular sammelt zunächst alle fieldset-Elemente des Dokumentes und prüft jedes Fieldset, ob es ein Kindelement des angegebenen Formulars ist und eine ID besitzt. In diesem Fall wird die Sichtbarkeit durch Aufruf der Funktion Toggle_Fieldset [#togglejs] umgeschaltet. Weil ja das letzte Fieldset, das die Submitbuttons enthält, keine ID hat, wird dieses auch nicht umgeschaltet.

Beim Laden der Seite ist natürlich noch kein aktuelles Fieldset defininert, das per default angezeigt wird. Das erste fieldset, auf das alle Bedingungen zutreffen, wird dann als „aktuell” angenommen – und gleich wieder umgeschaltet.

function Init_Formular(form) { var i, fsid, fs = document.getElementsByTagName("fieldset"); for (i = 0; i < fs.length; i++) if (fs[i].parentNode.id == form && (fsid = fs[i].id)) { Toggle_Fieldset(fsid); if (current_fieldset == null) current_fieldset = fsid; } Toggle_Fieldset(current_fieldset); return true; }

Toggle_Fieldset

Die Funktion Toggle_Fieldset prüft, ob das angegebene Fieldset über einen CSS-Selektor verfügt. Normalerweise hat unser Fieldset keinen CSS-Selektor (siehe HTML-Code [#formhtml]), also wird class auf inactive gesetzt bzw. die CSS-Eigenschaft display auf none (nur Internet Explorer). Achtung: Durch das Setzen des CSS-Selektors in modernen Browsern wird das Element noch nicht ausgeblendet, dafür sorgt erst die CSS-Definition [#formcss], die wir oben vorgenommen haben. Nur im Internet Explorer wird das Fieldset schon jetzt ausgeblendet. Ist der CSS-Selektor inactive vorhanden, wird er wieder entfernt. So erscheint das Fieldset wieder auf der Bildfläche!

function Toggle_Fieldset(fieldset) { var fs= document.getElementById(fieldset); if (fs.className == "inactive") fs.className = null; else fs.className="inactive"; return true; }

Switch_Tabs

Diese Funktion realisiert den Tabreiter-Effekt. Wie dem Code für die Navigationsliste [#navihtml] entnommen werden kann, wird beim Klicken auf den Link dieser Funktion eine Referenz auf den link selbst übergeben. Durch das href-Attribut erfährt diese Funktion, welches Fieldset sichtbar gemacht werden soll. Wir erinnern uns: Jedes Fieldset hat eine ID mitbekommen, die im Verweisziel durch eine Raute (#) kenntlich gemacht ist. Der Rest ist ganz einfach: Das neue und das alte Fieldset werden beide umgeschaltet, und die ID des aktuellen Fieldset wird in current_fieldset gespeichert.

function Switch_Tabs(obj) { var target = obj.getAttribute("href"); var fsid = target.substr(target.search(/#/)+1, target.length-1); if (fsid == null) return false; var fsp = document.getElementById(fsid); if (fsp == null) return false; if (current_fieldset != null) Toggle_Fieldset(current_fieldset); if (Toggle_Fieldset(fsid) == true) current_fieldset = fsid; return false; }

Fertig!

Zum fertigen Beispiel-Formular [/content/magazin/57/tabreiter.html].

von externer LinkCarsten Witt (alias drWitt) [http://dailystar.de/].

Diskutieren Sie mit:

 
Nach oben springen

.(c) 2002 - 2017 strohhalm.org Community.Server powered by Manitu.Software powered by Mathias Bank
.Impressum + Team.Datenschutz