What I know is what you get

Fast jede Web-Anwendung bietet den Usern die Möglichkeit, die eigenen Daten auf einer Profilseite zu bearbeiten. Mit JavaScript und CSS kann man diesen Vorgang angenehmer gestalten, indem man das Eingabeformular durch Stil und Swoosh-Effekte aufhübscht.

Dabei sollte aber auch beachtet werden, dass JavaScript und CSS nicht immer aktiviert sind - das Formular sollte also auch funktionieren, wenn beides ausgeschaltet ist.

In dieser Tutorial-Reihe werden wir Schritt für Schritt ein User-Formular mithilfe der MooTools veredeln. Der sich daraus ergebende Code sollte möglichst wiederverwendbar sein. Den Anfang machen wir mit den Passwort-Feldern.

Passwörter sind für User sehr wichtig: sie schützen die eigenen Daten vor unbefugtem Zugriff. Bei der Bearbeitung der Daten wird das Passwort jedoch in den meisten Fällen nicht geändert - es hat also keinen Sinn, die entsprechenden Felder jedes Mal anzuzeigen. Stattdessen wollen wir das Formular so einrichten, dass die Felder erst auf Anfrage angezeigt werden; so wird das Formular schlanker und der User muss sich keine Gedanken darüber machen, ob er die Felder jetzt ausfüllen muss oder nicht.

Das fertige Ergebnis findet sich hier.

Wir werden mit dem folgenden Formular arbeiten:

</p> <form id="f_user" action="" method="post"> <div class="row"> <label for="username">Username:</label></p> <input type="text" id="username" name="username" /> </div> <div class="row"> <label for="email">E-Mail:</label></p> <input type="text" id="email" name="email" /> </div> <div class="password-container"> <div class="row"> <label for="password">Password:</label></p> <input type="password" id="password" name="password" /> </div> <div class="row"> <label for="password_repeat">Repeat Password:</label></p> <input type="password" id="password_repeat" name="password_repeat" /> </div> </div> <div class="row"> <label> </label></p> <input type="submit" id="submit" name="submit" value="Save Changes" /> </div> </form> <p>

Damit wir später per JavaScript auf die zu versteckenden Elemente zugreifen können, schließen wir sie in ein Container-Element ein (”password-container”). Damit sind die Vorbereitungen auf HTML-Seite bereits vollendet. Auch mit ausgeschaltetem JavaScript kann der User das Formular ohne Probleme verwenden.

Das dazugehörige CSS sieht folgendermaßen aus:

<br /> *,<br /> html * {<br /> margin: 0;<br /> padding: 0;<br /> font-family: Arial, sans-serif;<br /> font-size: 13px;<br /> font-weight: normal;<br /> }</p> <p>body {<br /> margin: 2em auto;<br /> width: 50em;<br /> }</p> <p>div.row {<br /> margin-bottom: 1em;<br /> clear: both;<br /> }</p> <p>label {<br /> width: 12em;<br /> display: block;<br /> float: left;<br /> text-align: right;<br /> margin-right: 1em;<br /> white-space: nowrap;<br /> font-weight: bold;<br /> }<br />

Für die Verarbeitung der Passwort-Felder ergibt sich dieser Workflow:

1. Direkt nach dem Laden der Seite:
   1. Ausblenden der Passwort-Felder bzw. des Passwort-Containers
   2. Einblenden eines Links “Passwort ändern”
2. Beim Klick auf den “Passwort ändern”-Link:
   1. Einblenden des Passwort-Containers
   2. Ausblenden des “Passwort ändern”-Links

Um die Wiederverwendbarkeit dieses Features zu gewährleisten, setzen wir die Funktion in einer konfigurierbaren Klasse um. Beim Instanziieren eines neuen Objekts wird ein Konfigurations-Objekt übergeben, das alle benötigten Informationen enthält, um dieses oder andere Formulare um die Möglichkeit bereichert, einen Bereich beim Aufruf der Seite auszublenden und ihn per Klick auf einen Link wieder einzublenden

In diesem Fall ist dies unser Konfigurationsobjekt:

<br /> var config = {<br /> frm: ‘f_user’,<br /> passwordContainer: ‘.password-container’,<br /> divChangePasswordClass: ‘row’,<br /> showPasswordLabel: ‘Change password’<br /> };<br />

• frm: ID des Formulars, das gepimpt werden soll
• passwordContainer: CSS-Klasse des Passwort-Containers
• divChangePasswordClass: CSS-Klasse, die dem DIV-Element zugewiesen werden soll, in dem sich der “Passwort ändern”-Link befindet. In diesem speziellen Fall ist das “row”, aber in anderen Formularen werden sicherlich andere Klassen-Namen benötigt, die nicht fest in den Code der JavaScript-Klasse geschrieben werden sollten.
• showPasswordLabel: Text, der als Link dargestellt werden soll

Und hier ist endlich die Klasse, die es mit dem Konfigurationsobjekt aufnehmen wird:

<br /> var PimpedUserForm = new Class({</p> <p>/**<br /> * Constructor, is called when a new instance is created<br /> */<br /> initialize: function(config) {<br /> this.config = config;</p> <p>// Prepare the form<br /> this.prepareUserForm();<br /> },</p> <p>/**<br /> * Prepares the user form<br /> */<br /> prepareUserForm: function() {<br /> // Hide password container<br /> var elFrm = $(this.config.frm);<br /> var elPwdContainer = elFrm.getElements(this.config.passwordContainer)[0];</p> <p>// Abort if elPwdContainer is not available<br /> if (!elPwdContainer) {<br /> return;<br /> }</p> <p>// Add the div that contains the “Change password” link<br /> var aChangePasswordID = ‘a_change_password’;</p> <p>var divChangePassword = new Element(’div’, {<br /> ‘class’: this.config.divChangePasswordClass,<br /> ‘html’: ‘ <p><label for="' + aChangePasswordID + '"> </label><a id="' + aChangePasswordID + '" href="#">‘ + this.config.showPasswordLabel + ‘</a></p> <p>‘<br /> }<br /> );</p> <p>// Insert the div<br /> divChangePassword.injectAfter(elPwdContainer);</p> <p>// Hide the password container<br /> var fxPwdContainer = new Fx.Slide(elPwdContainer);<br /> fxPwdContainer.hide();</p> <p>// Observe “Change password link”<br /> var aChangePassword = $(aChangePasswordID);</p> <p>aChangePassword.addEvent(’click’, function(e) {<br /> var e = new Event(e);<br /> e.stop(); // Prevents the link from being executed</p> <p>// Create the slide effects<br /> var fxPwdContainer = new Fx.Slide(elPwdContainer);<br /> var fxPwdLink = new Fx.Slide(aChangePassword);</p> <p>// Chain the effects: slide out the “Change password” link, then slide in the password container<br /> fxPwdLink.slideOut().chain(function(){fxPwdContainer.slideIn()});<br /> });<br /> }<br /> });<br />

Zum Schluss führen wir noch alles zusammen, denn im Moment stehen die einzelnen Komponenten noch einzeln da und bewirken gar nichts. In den <head>-Bereich der HTML-Datei kommen nun die Aufrufe, um die Klasse nach dem Seitenaufruf auf das Formular anzuwenden:

<br /> <script type="text/javascript" src="/js/mootools-1.2-complete-min.js"></script><br /> <script type="text/javascript" src="PimpedUserForm.class.js"></script></p> <p><script type="text/javascript"> window.addEvent('domready', function() { var config = { frm: 'f_user', passwordContainer: '.password-container', divChangePasswordClass: 'row', showPasswordLabel: 'Change password' }; this.pimpedUserForm = new PimpedUserForm(config); }); </script><br />

Und so sieht das fertige Ergebnis aus.

Über Verbesserungsvorschläge und sonstige Rückmeldungen freue ich mich natürlich - die Kommentare stehen euch offen!