Formularfelder nebeneinander anordnen

**typo** · 08.10.2009, 09:08

Hi,

habe ein Problem mit dem Formulargenerator. Ich habe mir ein neues Formular erstellt, das ist ja nicht so schwierig. Nun habe ich jedoch das Problem, das ich die Felder gerne nebeneinander anordnen will.

Also zum Beispiel: Plz und Ort nebeneinander, Vorname und Nachname nebeneinander.

Gibts hier eine Möglichkeit?, wie ich das möglichst sauber umsetzen kann?

Vielen Dank und beste Grüße

**Michael** · 08.10.2009, 09:41

Habe ich noch nie gebraucht, aber ich denke dazu ist das "tabellenlose Layout" im Forumlagenerator da.

Grüsse
Michael

**typo** · 08.10.2009, 10:16

Jap... leider schaffe ich das mit der Ausrichtung nicht, hat da evtl. jemand ein Beispiel wie ich das so CSS mäßig umsetzen kann?

**Michael** · 08.10.2009, 10:19

Hast du einen Link?

**ChrMue** · 08.10.2009, 11:27

ich habe wahrscheinlich nicht alle Styles erwischt, aber prinzipiell so:

Code:

#kontakt label 
{
  width:100px;
  float:left;
  clear:both;
  display:block;
}
#kontakt input, #kontakt select, #kontakt textarea
{
  width:230px;
  float:left;
}

Viel Erfolg
ChrMue

**typo** · 08.10.2009, 11:48

Jau hab ich http://cbvision.de/ ... dort sind die beiden Textfelder, die sollen nebeneinander angezeigt werden.

Vielen Dank und beste Grüße

**Andreas** · 08.10.2009, 12:42

Nimm mal das tabellenlose Layout, das dürfte dann mit CSS zu formatieren sein. Mit der Tabelle, das wird nicht gehen, da müsstest du das Template so umschreiben, dass jeweils 4 Zellen nebeneinander gerendert werden. Sag Bescheid, wenn du auf tabellenlos umgestellt hast, so dass wir versuchen können 2 Felder nebeneinander zu bekommen. Mach bitte insgesamt 4 Felder, sonst klappt es nachher mit 2, aber nicht mit 4.

Andreas

**Michael** · 08.10.2009, 12:49

Zitat von Michael

Habe ich noch nie gebraucht, aber ich denke dazu ist das "tabellenlose Layout" im Forumlagenerator da.

Ja, du hast bei deinem Link noch nicht auf das tabellenlose Layout umgestellt.
(Option beim Formulargenerator)

Grüsse
Michael

**typo** · 08.10.2009, 13:34

Hi,

hoppla hatte ich wohl leider vergessen, ist nun korrigiert! http://cbvision.de/ ... wäre super wenn jemand eine Lösung für mein Problem hätte, ich steh da wirklich auffm Schlauch!..

Beste Grüße

**Andreas** · 08.10.2009, 13:52

Ein erster Ansatz wäre

Code:

br {
  display: none;
}

Andreas

**do_while** · 08.10.2009, 17:27

... und dann kannst Du dem Form-Element Klassen mitgeben, die die Anordnung regeln, ob eine Umbruch folgen soll oder nicht, ob das Feld sichtbar ist oder ausgeblendet werden soll, usw.

Diese Klassen kannst Du dann in Deinem CSS entsprechend einstellen.

**typo** · 11.10.2009, 20:08

Hi,

habe jetzt mal die br's auf display:none gesetzt, leider scheitere ich immer noch an der Ausrichtung der Felder. Wäre echt super, wenn mir jemand kurz ein kleines Beispiel geben würde, wie ich die Felder richtig ausrichte

...

Vielen Dank und beste Grüße

**do_while** · 11.10.2009, 20:53

Hallo typo,

ganz einfaches Beispiel:
Feld 1: Feldname='vorname', Feldbezeichnung='Name', CSS-Klasse='clr col_0'
Feld 2: Feldname='nachname', Feldbezeichnung leer, CSS-Klasse='col_1'

Das CSS dazu:

Code:

#formular br
{
    float:left;
    display:none;
}
#formular label.clr
{
    clear:both;
}
#formular label,
#formular input.text
{
	float:left;
}
#formular input.col_0
{
	margin-right:20px;
}

Durch die Klassen col_0 und col_1 kannst Du mit CSS beliebig 'quasi' tabellarisch positionieren, die Klasse clr definiert den Beginn einer neuen Zeile. Für ganz spezielle Positionierungen kannst Du weitere Klassen vergeben.
#formular soll beispielhaft die CSS-ID des Formulars sein, damit nicht generell alle Formulare die gleichen Attribute bekommen.

(Ich hoffe ich habe beim Reduzieren meines Formulars nichts vergessen - ist nicht ausprobiert)

**typo** · 12.10.2009, 08:49

Hi Hagen,

vielen Dank für deine Hilfe, nun klappt es problemlos!...

Vielen Dank und beste Grüße

**closeup** · 14.12.2009, 10:22

Hi,

habe versucht, das nach obigem Beispiel umzusetzen. Allerdings sollen nun Beschriftung (label) und Formularfeld (input) in einer separaten Zeile stehen.

die Angabe #formular_me label{display:block;} bleibt wirkungslos.

Das restliche CSS für das Formular sieht folgendermaßen aus:

Code:

#formular_me form{width:470px;}
#formular_me br{float:left;display:none;}
#formular_me label.clr{clear:both;}
#formular_me label,#formular_me input.text{float:left;}
#formular_me input.text,#formular_me textarea{padding-left:0;vertical-align:middle;font-family:Arial, Helvetica, sans-serif;font-size:10pt;color:#000;}
#formular_me input.col_0{margin-right:40px;}

Wäre für Tipps sehr dankbar.

**Nikolas** · 11.01.2010, 10:13

Okay, ich hab es jetzt selbst über einen Umweg gelöst:

Habe das Template angepasst und das Input Element wird nun vom Label umschlossen, so dass ich die beiden Elemente (Input und zugehöriges Label) schon einmal gruppiert ansprechen kann.

Dann habe ich aus dem normalen Span und dem Mandatory-Span einfach ein Span gemacht (Ist für meine Zwecke so ausreichend). Daraufhin weise ich dem Span-Element im Label einfach display:block zu und so funktioniert es recht schön und sollte auch semantisch einwandfrei sein.

So sieht mein Template nun aus:

Code:

<?php if ($this->label): ?>
 <label for="ctrl_<?php echo $this->id; ?>" class="<?php echo $this->class; ?>">
   <span class="capt_lab <?php if ($this->mandatory): ?>mandatory<?php endif; ?>"><?php echo $this->label; ?><?php if ($this->mandatory): ?><strong>*</strong><?php endif; ?></span>
   <?php endif; ?> 
<?php echo $this->generateWithError(); ?>
<?php if ($this->label): ?></label>
<?php endif; ?> <br />

**Nikolas** · 11.01.2010, 16:46

Hm, okay.

Soweit man alle Pflichtfelder vernünftig ausfüllt und das Formular verschickt klappt alles ganz toll mit meiner Lösung.
In welchem Template find ich nun aber die Fehler Absätze. Wenn nach dem Absenden die Fehler angezeigt werden wird scheinbar auf ein anderes Template zugegriffen.
Die Input-Elemente befinden sich dann nicht mehr innerhalb des Label-Tags und die p error Absätze ebenfalls nicht.

Hoffe mir kann da einer helfen.

**Sebastian** · 11.01.2010, 16:48

HI

<input> darf sich nie im <label> befinden. Das Template dazu heißt form_widget.tpl, ab der nächsten Version wird aber alles besser.

Sebastian

**Nikolas** · 11.01.2010, 16:58

Darf es nicht?
Hättest du nen Link für mich? Dann bin ich nämlich arg falsch informiert und muss meine Lösung ja doch wieder überdenken... *argh*

Inwiefern wird sich was ändern in der neuen Version? Zufällig die Tickets zur Hand, wenn nich is auch nich wild - guck ich halt selbst

**Sebastian** · 11.01.2010, 17:04

HI

sorry, da finde ich auch nichts. Aber ich kenne es nur so:

HTML-Code:

<label for="feldname">Text</label><input id="feldname" />

Vielleicht geht es auch anders.

Zu den Änderungen: #1179, #1082, #939.

Sebastian

**Nikolas** · 11.01.2010, 17:21

Hast recht ich kannte das eigentlich auch nur so wie von dir beschrieben, irgendwo hatte ich die andere Variante dann mal aufgeschnappt.

Sie funktioniert soweit auch und ist sogar valide.
Hab dennoch was gefunden was dir Recht gibt und mich veranlasst eine andere Lösung zur Positionierung zu finden:

Warnhinweis: Implizite Labels

Nach den Spezifikationen ist es zulässig, das Label um das Kontrollelement herum zu legen, statt es ihm vor- oder nachzustellen. Hiermit könnte man sich als Webentwickler die Zuweisung über id="" und for="" sparen, da das Label nun durch diese Verschachtelung implizit zugeordnet ist:

<label>Text:<input type="text"></label>

Soweit die Theorie. Die Unterstützung für diese Variante ist jedoch selbst in aktuellen assistiven Programmen eher lückenhaft und daher nicht zu empfehlen. Die zum Zeitpunkt der Veröffentlichung aktuelle Version 7.1 des verbreiteten Screenreaders JAWS hat bis dato Probleme mit impliziten Labels, obwohl diese bereits seit 1997 Bestandteil der HTML 4-Empfehlung sind. So werden implizite Labels für Checkboxen und Radiobuttons sogar im Formularmodus nicht vorgelesen, bei Textfeldern ist dies nach Aussage von Nutzern "»Glückssache«". Um maximale Kompatibilität zu garantieren, sollten Sie auf die zuerst beschriebene Form der expliziten Verknüpfung zurückgreifen.

Falls Sie aus irgendwelchen Gründen gezwungen sein sollten, implizite statt explizite Labels zu benutzen, so können Sie den Label-Text in einem title-Attribut des jeweiligen Kontrollelementes wiederholen. In diesem Fall lesen JAWS, Window Eyes & Co. den Text des title-Attributs, sobald das Kontrollelement den Fokus erhält.

Quelle:http://www.einfach-fuer-alle.de/arti...html-elemente/

Valide ist es aber definitiv: Quelle
Danke für den Hinweis und die Links zu den Tickets. Ist schon mal ne gute Sache mit den Änderungen, bin gespannt auf die finale Version und kann Sie auch gut gebrauchen.

Schönen Gruß