Anordnung von Formularbuttons

[Ares]

Hallo!

Ich arbeite gerade an einem Kontaktformular. Das ganze ist etwas aufwendiger, kein einfaches Formular, sondern ein Dialog mit mehreren Seiten.

Die Kunden sollten zunächst den genauen Kontaktwunsch etc. angeben können, dann die persönlichen Daten, etc.

Am Ende jeder Seite soll es nun zwei Buttons geben:
1: < Zurück zur vorherigen Seite
2: Weiter zum nächsten Schritt >

Die Buttons sollen in einer Zeile stehe, der Zurück-Button ganz links und der Weiter Button ganz rechts.

Der Weiter-Button soll zu dem Formular der aktuellen Seite gehören (Kundendaten etc. absenden), der Zurück-Button soll das Skipt nur veranlassen die vorherige Dialogseite anzuzeigen.

Wie kann ich das realisieren?

Beide Buttons könnten zum gleichen Formular gehören. Beim Absenden könnte ich dann anhand des Values bestimmen, welcher Button geklickt wurde und die entsprechende Aktion ausführen. Das Value ist jedoch die Beschriftung des Buttons. Ich finde es etwas "unschön" den Button anhand von "< Zurück zur vorherigen Seite" zu identifizieren. Zudem soll das Ganze in verschiedenen Sprachen laufen und man müsst auf verschieden Beschriftungen prüfen. Ich weiß nicht, ob das durch die Umlaute problemlos möglich ist.

Die andere Möglichkeit ist, dass ich den Zurück-Button in ein eigenes Formular setzte. Dann weiß ich aber nicht, wie ich die Buttons in der gewünschten Form anordnen soll. Es würde ja erst der Form-Container für das eigentliche Seiten Formular kommen und dann der der Form-Container für den Zurück Button. Der Zurück-Button würde also immer eine Zeile unter dem Weiter-Button angezeigt.
Ich wüsste nicht wie das mit CSS anders formatieren könnte. Die Buttons liegen ja schließlich in verschiedenen Containern...

Auf Java-Skript möchte ich gerne verzichten...

Hat jemand eine Idee, wie man das einfach und elegant lösen kann?

Besten Dank!
Ares

 

[littleHtml Freak]

du könntest das mit css erreichen indem du (das müsste so gehen denke ich)

float: right;

für beide buttons definierst und dann jeweils noch den abstand zur rechten seite und zu linken seite. ung. so:

position: absolute;
left oder right: 10px;

mfg

 

[Ares]

Danke für deine Antwort. So ganz löst das mein Problem aber nicht. Ich stehe vor zwei verschiedenen Problemen:

1. Beide Buttons in einem Form-Container
==> Positionierung der Buttons ist kein Problem. Aber wie bekomme ich die getrennt Funktionalität hin?

2. Für jeden Button einen eigenen Form-Container
==> Getrennte Funktionaliät ist kein Problem (sind ja zwei verschiedene Forms), aber die Positionierung gelingt nicht.

Die Positionierung ist also nur ein Problem, wenn ich zwei Form-Container verwende. Dann sieht das ganze ja so aus:

<form methode="post">
   ...
   <input type="hidden" name="action" value="nextPage">
   <input type="submit" value="Weiter zum nächsten Schritt">
</form>
<form methode="post">
   <input type="hidden" name="action" value="prevPage">
   <input type="submit" value="Zurück">
</form>

Weil der Zurück-Button in einem anderen Form-Container ist, kann ich ihn nicht in die gleiche Zeile wie den Weiter-Button "floaten"...

 

[Efchen]

Hallo,

warum muss es denn eigentlich überhaupt ein Zurück-Button sein? Jeder Browser hat doch schon einen Zurück-Button.

Ja, ist natürlich doof, wenn man von der dritten auf die zweite Seite geht, und dann darauf hingewiesen wird, dass die Seite POST-Daten enthält, ob man die übernehmen will.

Ob man das evtl. mit Sessions lösen kann? Um die Daten immer komplett parat zu haben und zu wissen, auf welcher Seite man sich eigentlich befindet? Welcher Button gedrückt wurde, müsste sich doch herausfinden lassen.

Sind jetzt nur mal so Gedanken, die mir durch den Kopf gingen.

Gruß,
-Efchen

Nachtrag: Ganz Quick & Dirty wäre es natürlich, wenn man zwei Formulare verwendet und die Buttons absolut positioniert. Aber ... wenn Du zwei Formulare hast, fehlen Dir beim Zurückgehen doch die Werte, oder wie willst Du das lösen?

 

[Ares]

warum muss es denn eigentlich überhaupt ein Zurück-Button sein? Jeder Browser hat doch schon einen Zurück-Button.

Ja, ist natürlich doof, wenn man von der dritten auf die zweite Seite geht, und dann darauf hingewiesen wird, dass die Seite POST-Daten enthält, ob man die übernehmen will.

Genau das ist das Problem. So manch ein Nutzer weiß nicht was es heißt, wenn der Browser meldet "Es wurden POST-Daten gesendet, sollen diese erneut gesendet werden?". Das soll durch einen einen eigenen Zurück-Button des Dialogs gelöst werden.

Aber warum der Button überhaupt notwendig ist, ist ja auch egal. Die Aufgabe ist nun mal, dass man einen Weiter und einen Zurück-Button haben soll

Ob man das evtl. mit Sessions lösen kann? Um die Daten immer komplett parat zu haben und zu wissen, auf welcher Seite man sich eigentlich befindet? Welcher Button gedrückt wurde, müsste sich doch herausfinden lassen.

Die Daten der vorherigen Seiten sind in einer Datenbank abgelegt, also quasi in einer Session. Diese müssen also nicht vom Zurück-Formular transportiert werden. Der Button müsste das Script nur anweisen statt der nächsten Seite die vorherige anzuzeigen...

Nachtrag: Ganz Quick & Dirty wäre es natürlich, wenn man zwei Formulare verwendet und die Buttons absolut positioniert.

Ich glaube nicht, dass die Lösung wirklich praktikabel ist. Wenn sich etwas an der Schriftgröße, etc. ändert, würde die absolute Positionierung des Buttons nicht mehr stimmen. Die beiden Buttons wären also nicht mehr in einer Zeile.

Gibt es denn sonst keine Möglichkeit?

 

[Efchen]

Aber warum der Button überhaupt notwendig ist, ist ja auch egal. Die Aufgabe ist nun mal, dass man einen Weiter und einen Zurück-Button haben soll

Wenn es sich nicht gerade um eine Prüfungsfrage oder Hausaufgabe handelt, finde ich das nicht. Das WWW ist ein Ort, wo man sich auf nichts stützen kann, außer dass es bei jemand anders sicher anders ist, als bei einem selbst. Ich finde, man muss bei der Verwirklichung von Websites sehr flexibel sein. Wenn es andere, bessere, nutzerfreundlichere Lösungen gibt, sollte man sie in Betracht ziehen.

Ich glaube nicht, dass die Lösung wirklich praktikabel ist. Wenn sich etwas an der Schriftgröße, etc. ändert, würde die absolute Positionierung des Buttons nicht mehr stimmen. Die beiden Buttons wären also nicht mehr in einer Zeile.

Warum das nicht? Auch absolute Positionierung sollte man mit der EInheit "em" machen können, dann würde sich die Position immer an der Schriftgröße orientieren. Außerdem kann man ja beide Buttons absolut positionieren und ihnen die selbe y-Koordinate zuweisen, dann wären sie auf jeden Fall in der selben Zeile.

Aber eine andere Lösung für Dein Problem fällt mir im Moment auch nicht ein. Mal zur Abwechslung ein interessantes Problem ;-)

Die meisten Websites, die ich kenne, die ein mehrseitiges Formular haben, haben entweder keinen eigenen Zurück-Button und warnen in Fettschrift davor, den Zurück-Button des Browsers zu verwenden (und wenn man es doch macht., ist das ganze Formular im A***), oder aber sie setzen auf den Zurück-Button des Browsers und kümmern sich nicht darum, ob der User die Meldung mit den POST-Daten versteht oder nicht (was ich durchaus verstehen kann, weil ein Nutzer sich mit seinem Browser schon vertraut machen sollte; gilt ja auch für andere Software, wer sich damit nicht auskennt, kann sie nur unzureichend bedienen).

Gruß,
-Efchen

 

[Ares]

Wenn es sich nicht gerade um eine Prüfungsfrage oder Hausaufgabe handelt, finde ich das nicht. Das WWW ist ein Ort, wo man sich auf nichts stützen kann, außer dass es bei jemand anders sicher anders ist, als bei einem selbst. Ich finde, man muss bei der Verwirklichung von Websites sehr flexibel sein. Wenn es andere, bessere, nutzerfreundlichere Lösungen gibt, sollte man sie in Betracht ziehen.

Nein, es handelt sich nicht um eine Prüfungs- oder Hausaufgabe. Aus dem Alter bin ich schon länger raus Es geht um die Webseite eines Vereins, und die Vorgabe die ich bekommen habe, sieht nun mal einen Weiter- und einen Zurück-Button vor...

Aber eine andere Lösung für Dein Problem fällt mir im Moment auch nicht ein. Mal zur Abwechslung ein interessantes Problem

Dann werde ich es mal der absoluten Positionierung versuchen...

oder aber sie setzen auf den Zurück-Button des Browsers und kümmern sich nicht darum, ob der User die Meldung mit den POST-Daten versteht oder nicht (was ich durchaus verstehen kann, weil ein Nutzer sich mit seinem Browser schon vertraut machen sollte; gilt ja auch für andere Software, wer sich damit nicht auskennt, kann sie nur unzureichend bedienen).

Dem Stimme ich nicht zu. Natürlich sollte der Nutzer ein gewisses Verständnis der Materie mitbringen, aber ich finde nicht, dass es Aufgabe des Nutzers sein sollte eine Fehlermeldung zu verstehen. Der Hinweis auf die gesendeten POST-Daten ist zwar keine Fehlermeldung im eigentliche Sinne, aber eine Informationen die der Nutzer eigentlich nicht braucht. Darum sollte sich die Webseite kümmern...

 

[Efchen]

Dem Stimme ich nicht zu. Natürlich sollte der Nutzer ein gewisses Verständnis der Materie mitbringen, aber ich finde nicht, dass es Aufgabe des Nutzers sein sollte eine Fehlermeldung zu verstehen. Der Hinweis auf die gesendeten POST-Daten ist zwar keine Fehlermeldung im eigentliche Sinne, aber eine Informationen die der Nutzer eigentlich nicht braucht. Darum sollte sich die Webseite kümmern...

Nein, das ist ja ne Meldung des Browsers. Also der Software, die der Nutzer bedient. Und die fragt ja eigentlich nur, ob er seine Daten nochmal senden will oder nicht.
Ich finde, es kann nicht Aufgabe eines Webmasters sein, Features der Browsersoftware zu umgehen oder neu zu programmieren.

Aber wir schweifen ab :-)

Gruß,
-Efchen