Formatierte Formulare ohne Tabellen

[Ole]

Hi

für alle die schon immer mal die Design-Tabellen um die Formulare wegbekommen wollte, das ganze aber doch bündig halten wollte, hier eine kleine Anleitung. mit ein bisserl CSS alles kein problem.

vorher
------

<table>
 <tr>
  <td>Vorname</td>
  <td><input type="text" name="vorname"></td>
 <tr>
 <tr>
  <td>Nachname</td>
  <td><input type="text" name="nachname"></td>
 <tr>
</table>

nachher
-------

<style type="text/css">
.formcont
         {
          align: left;
          width: 250px;
          clear: both;
         }

.inpucont
         {
          float: right;
         }
</style>

<div class="formcont"><input type="text" class="inpucont" name="vorname">Vorname</div>
<div class="formcont"><input type="text" class="inpucont" name="nachname">Nachname</div>

nur mal so als ansatz :)

so long
ole
(8-)>

[Christian Seiler]

Hallo Ole,

für alle die schon immer mal die Design-Tabellen um die Formulare wegbekommen wollte,

Wieso Design-Tabelle? Ein Formular kann man durchaus auch als semantische Tabelle betrachten, siehe auch: </archiv/2002/12/t32885/>. Insofern würde ich die Tabelle gar nicht ersetzen _wollen_.

Viele Grüße,
Christian

[Ole]

hi

Wieso Design-Tabelle? Ein Formular kann man durchaus auch als semantische Tabelle betrachten, siehe auch: </archiv/2002/12/t32885/>. Insofern würde ich die Tabelle gar nicht ersetzen _wollen_.

So wies ausschaut haben wir da etwas unterschiedliche Standpunkte :)
Das macht aber nichts, es ist ja genug Platz für uns beide in dieser Welt ;)

so long
ole
(8-)>

[Der Martin]

Hallo Ole,

dein Ansatz gefällt mir grundsätzlich. Auch wenn ich -wie Christian Seiler- der Ansicht bin, dass dies einer der wenigen Fälle ist, in denen auch eine Tabelle sinnvoll ist.

Bei deinem Ansatz stört mich ein wenig, dass ich die Größenangaben explizit brauche. Bei der zweispaltigen Tabelle (z.B. links die Beschriftungen, rechts die INPUTs) ergibt sich die Breite der Spalten und damit das saubere Layout quasi von allein anhand der Inhalte.
An dem Punkt müsste man vielleicht noch ein wenig tüfteln, dann könnte mir das richtig gefallen.

Aber zwei Dinge stören mich bei deinem Ansatz noch.

Schönes Wochenende,

Martin

[Ole]

hi

Aber zwei Dinge stören mich bei deinem Ansatz noch.

ist ja auch nur ein ansatz...hat noch einige macken und unzulänglichkeiten, aber ein ansatz :)

so long
ole
(8-)>

[Der Martin]

[...]

Aber zwei Dinge stören mich bei deinem Ansatz noch.

Das hätte ich hier nicht _noch einmal_ erwähnen müssen, sorry! ;)

Schönes Wochenende,

Das meine ich allerdings wirklich so.

Martin

[Tobias Kloth]

Hallo Ole,

<div class="formcont"><input type="text" class="inpucont" name="vorname">Vorname</div>
<div class="formcont"><input type="text" class="inpucont" name="nachname">Nachname</div>

da gefällt mir die Lösung vom Parkbanksitzer aus </archiv/2004/6/82748/#m482821> aber besser.

Grüße aus Nürnberg
Tobias

[Ole]

hi

ist ja auch nur ein ansatz :)

da gefällt mir die Lösung vom Parkbanksitzer aus </archiv/2004/6/82748/#m482821> aber besser.

gefällt mir auch gut :)

so long
ole
(8-)>

[MudGuard]

Hi,

<style type="text/css">
.formcont
         {
          align: left;

was soll das bitte sein? Eine Eigenschaft align gibt es in CSS nicht.

width: 250px;
          clear: both;
         }

.inpucont
         {
          float: right;

float ohne explizite Breitenangabe?

}
</style>

<div class="formcont"><input type="text" class="inpucont" name="vorname">Vorname</div>
<div class="formcont"><input type="text" class="inpucont" name="nachname">Nachname</div>

2 überflüssige div, dafür keine Labels.
Und wenn schon die div sein müssen, dann brauchen die input-Elemente keine Klasse - der descendant selector existiert.

ich würde eher
<label for="inputvorname">Vorname</label> <input type="text" name="inputvorname" id="inputvorname" />
<label for="inputnachname">Nachname</label> <input type="text" name="inputnachname" id="inputnachname" />
verwenden (ggf. noch ein inline-Element für Hinweise (wie "Dieses Feld muß ausgefüllt werden", Formatangaben bei einem Datum usw).

Die labels (mit Breite versehen - in em - links floaten und außerdem clear-en).

also
label { width:10em; float:left; clear:left; }

Falls die dritte Spalte benötigt wird, käme noch für die inputs hinzu:
input { width:12em; float:left; }

(falls mehrere Formulare vorhanden, bekommt jedes Formular seine id, dann kann per descendant selector die Breite der Labels/inputs pro Formular gesetzt werden - oder, falls unterschiedliche Bereiche innerhalb eines Formulars verwendet werden, dann halt ne id für die fieldset-Elemente)

Oder so, wie es momentan noch in meiner Webseite ist, eben doch per Tabelle - ich halte das nicht für grundsätzlich verkehrt, eine Spalte enthält alle Labels, die zweite enthält alle Datenfelder und die ggf. vorhandene dritte Spalte enthält Hinweise zum jeweiligen Eingabefeld - und für die einzelne Zeile besteht ja auch ein Zusammenhang, z.B. alles zum Vorname ist in einer Zeile).

cu,
Andreas