Formularfelder in Liste durch Templateänderung

Hallo Leute,

um ein Formular ordentlich stylen zu können benötige ich die Ausgabe des HTML-Codes nach folgendem Schema:

HTML-Code:

---

<ul>
  <li>
  <input/>
  <label></label>
  </li>
  <li>
  ...
  </li>
</ul>

---

Sprich: ich möchte alle Formularelemente in einzelnen Listenpunkten.

Das Kapseln mit den <li>tags bekomme ich ja noch hin mit entsprechender Änderung im form_widget.tpl - wie schaffe ich aber die Kapselung mit dem <ul>tag für die gesamte Liste? Ist der richtige Ort hier das from.tpl? Aber welche Änderungen müsste ich hier vornehmen?

Als Grundlage verwende ich übrigens das modifizierte form_widget.tpl von Nina - hier zu finden: https://community.contao.org/de/showthread.php?t=154

P. S.:
Gibt es Tutorials der Art das und das php im .tpl ergibt das und das HTML? Und damit meine ich jetzt nicht das Tutorial zum fe_page.tpl

Nun, ich denke wir sollten besser hinterfragen weshalb du eine ul-li Auflistung möchtest :D Kannst du das erklären?

Hallo lieber Andreas,

ich weiß nicht ob es besser ist es zu hinterfragen ... ;) - aber wenn es zur Lösung des Problems irgendwie beiträgt, erkläre ich es gerne.

Erst mal ist es semantisch durchaus sinnvoll die Formularelemente in einer Liste zu strukturieren - von dem Standpunkt aus gesehen wäre eine <dl> vielleicht sogar noch treffender; wer will kann mir hierzu evtl. auch noch einen Templatevorschlag machen, brauche ich bestimmt auch noch irgendwann ... ;).

Ich möchte aber Textfeld <input type="text"> und Namen <label> untereinander anbringen - dazu floate ich sie innerhalb des Listenelements <li>. Durch die Blockeigenschaft von <li> erreiche ich, dass diese Kombination jeweils eine eigene Zeile bekommt - sehr praktisch zum Anlegen eines Formulars ganz allgemein.
Dazu möchte ich manche Textfelder nebeneinander und nicht untereinander anordnen - z. B.' Vorname' und 'Name'; anderes klassisches Beispiel Telefonummer und dazugehörige Vorwahlen. Das kann ich ganz leicht erreichen, indem ich den entsprechenden Listenelementen <li> eine passende Breite gebe und die nun wieder nebeneinander floaten lasse.

Macht das Sinn!? :) Deswegen würde ich mich freuen, wenn mir jemand einen Hinweis gibt, wie ich hier entsprechend das form.tpl, bzw. form_widget.tpl anpassen kann - darüber hinaus erhoffe ich mir, dass so generell meine Kenntnisse mit diesen vertrackten .tpl's wachsen - auch deshalb mein Interesse an einem tollen, informativen Tutorial dazu.

Weil es so schön passt:

... möchte ich mal ein paar Tutorials zum Gestalten von Formularen ganz allgemein hier posten:

Nick Rigby hat mal auf 'A List Apart' ein schönes Tutorial zu zugänglichen Formularen verfasst. Hier nennt er auch zwei Gründe, warum eine Anordnung in einer Liste seiner Meinung nach sinnvoll ist - hier mal die deutsche Übersetzung auf 'The Stylworkers' - dieser Meinung schließe ich mich natürlich ganz bescheiden an ... ;)

Ein andere schöner Beitrag zum Gestalten von Formularen findet sich auf WEB - SPIRIT von Sebastian Gollus - einfach mal hier reinschauen ...

Ich denke mal in beiden Beträgen wird ganz anschaulich gezeigt, warum so eine Listenanordnung Sinn macht.

Ich möchte dazu nur sagen dass du das gesamte Floating auch mit einem DIV machen kannst, welches du um jedes Widget (form_widget) legst.

Danke Andreas, die Alternative ist mir natürlich klar - aber ich will eine Liste, s. o.!! ;)

Niemand von den versierten php-Zauberern, die mir hier vielleicht weiterhelfen können?

Verstehe ich das jetzt richtig?

Du möchtest für jedes Formular-Element einen eigenen DIV umschließen?

Ne Quatsch, einfach mit Listenelementen umgeben. :/

Genau - bzw. zusammengehörende Formularelemente (<input> u. <label>) in ein Listenelement <li> ...

Ist nicht durchgetestet, aber Du kannst mal folgendes versuchen:

Änderung in der form.tpl!

Suche nach:

Code:

---

<?php if (!$this->tableless): ?>

<table cellspacing="0" cellpadding="0" summary="Form fields">
<?php echo $this->fields; ?>
</table>
<?php else: echo $this->fields; endif; ?>

---

Ersetze mit:

Code:

---

<ul id="testen">
<li id="test">
<?php if (!$this->tableless): ?>

<table cellspacing="0" cellpadding="0" summary="Form fields">
<?php echo $this->fields; ?>
</table>
<?php else: echo $this->fields; endif; ?>
</li>
</ul>

---

Vielleicht hilft Dir das zumindest einen Schritt weiter. ;)

Hallo Thomas,

da war der entscheidende Kniff mit bei!! Ich habe die Änderung im form.tpl so wie von dir vorgeschlagen übernommen - lediglich die Angaben für die <li>tags müssen im form_widget.tpl vorgenommen werden - dann schmeißt mir TL das Markup so raus, wie ich es brauche!!

Vielen Dank für deine Mühen, Thomas - super!! :)

Übrigens wen es interessiert hier das endgültige Formular, das ich mit den Template/view-Änderungen realisiert habe. ;)

Prima, wenn es funktioniert!

Hallo gHeldT,
schön das es nun klappt.
Aber:
Die Benutzerfreundlichkeit von deinem Formular ist nicht gerade hoch...
Das Problem: Zurücksetzen ist rechts.. da wo sonst _immer_ der Absende Butto ist.
Die meisten Leute klicken schneller als zu lesen.. d.h. die Eingaben sind weg...
Daher wird eigentlich der Zurücksetzen Button (o.ä.) inzwischen ganz weggelassen, da es dabei immer wieder zu Unfällen kommt. Aber so wie du das angeordnet hast würde es mich nicht wundern das viele Frustrierte Leute das Formular nicht ein 2. mal ausfüllen und es sein lassen.

Würde das also abändern ;-)

Viele Grüße

Hallo MacKP,

vielen Dank für deinen Hinweis - da ist natürlich was dran. Ich hoffe ja, dass das was in der Lesereihenfolge zuerst kommt auch zuerst genommen wird - wer die Tab-taste benutzt landet auch erst mal beim Absendebutton ... Aber die Gefahr besteht natürlich, da hast du Recht ... Hmmm, darüber muss ich erst mal nachdenken ... :)

@Thomas - noch mal vielen Dank für deinen entscheidenden Tip, der hat mir erst das nötige Markup ermöglicht.:D

Hallo Contao Community

Ich hab ein Formular erstellt, doch das Aussehen lässt extrem zu wünschen übrig... http://flexmedics.ch/contao/bewerbungsformular.html

Wie kann ich ansprechende Formulare kreieren? Gibt es da ein Plugin oder am besten alles per CSS?

lg
Patric

Hallo Patric,

mir kommt das hier spontan in den Sinn!

ciaobello