Verschachtelte tabellarische Eingabemaske

[Marcel Stör]

Es ist immer wieder erstaunlich, welchen Ärger einem (mir) tabellarische Eingabemasken machen können. Wie würdet ihr folgendes Formular mit HTML resp. CSS umsetzen:

http://www.frightanic.com/misc/address_modify.png

Entscheidend ist die Ausrichtung rechts mit und ohne *. Natürlich möchte ich auf Pixelschiebereien und fixe Breiten verzichten...

Die Breite der Eingabefelder richtet sich nach der Breite der ganzen "Box" und den Labeln.

Grüße

[Matze]

Es ist immer wieder erstaunlich, welchen Ärger einem (mir) tabellarische Eingabemasken machen können.

Warum benutzt du sie dann? Gut in dem Fall seh ich das nichtmal so eng.

Wie würdet ihr folgendes Formular mit HTML resp. CSS umsetzen:

mit float. Entweder float:left für die Bezeichnungen oder float:right für die Eingabefelder.

Grüße, Matze

[Marcel Stör]

Es ist immer wieder erstaunlich, welchen Ärger einem (mir) tabellarische Eingabemasken machen können.

Warum benutzt du sie dann? Gut in dem Fall seh ich das nichtmal so eng.

Weil ich die Anforderungen nicht selbst stelle ;-) Die Richtlinien an die ich mich halten muss (Stichwort corporate identity) verlangen das eben so.

[Matze]

Hallo,

Weil ich die Anforderungen nicht selbst stelle ;-) Die Richtlinien an die ich mich halten muss (Stichwort corporate identity) verlangen das eben so.

Die Richtlinien sehen eine Tabelle vor? Warum fragst du dann nach einer CSS-Lösung, die ich dir übrigens bereits gab.

Grüße, Matze

[Marcel Stör]

Hallo,

Weil ich die Anforderungen nicht selbst stelle ;-) Die Richtlinien an die ich mich halten muss (Stichwort corporate identity) verlangen das eben so.

Die Richtlinien sehen eine Tabelle vor? Warum fragst du dann nach einer CSS-Lösung, die ich dir übrigens bereits gab.

Danke für die erste Antwort. Ja, ich habe sie gesehen, wollte jedoch trotzdem deinen Einwand ("Warum benutzt du sie denn?") beantworten. Ausserdem meine ich, dass die Bedeutung von "tabellarisch" nicht sofort mit HTML <table> gleichzusetzen ist. Ein tabellarisches Layout kann ich auch mit CSS erreichen.

Grüsse

[Matze]

Hallo,

Ausserdem meine ich, dass die Bedeutung von "tabellarisch" nicht sofort mit HTML <table> gleichzusetzen ist. Ein tabellarisches Layout kann ich auch mit CSS erreichen.

Tabellarische Ausgaben erfordern IMHO schon ein Table-Element, genau wie Menüs auch eine Liste.
Ob es in dem Fall sinnvoll wäre, darüber könnte man streiten.

Grüße, Matze

[Marcel Stör]

Hallo,

Ausserdem meine ich, dass die Bedeutung von "tabellarisch" nicht sofort mit HTML <table> gleichzusetzen ist. Ein tabellarisches Layout kann ich auch mit CSS erreichen.

Tabellarische Ausgaben erfordern IMHO schon ein Table-Element, genau wie Menüs auch eine Liste.
Ob es in dem Fall sinnvoll wäre, darüber könnte man streiten.

Persönlich mein ich, dass es sinnvoll wäre, ja. Mein Ausgangspunkt war aus diesem Grund folgendes Skelett:

  
<table width="600" border="0">  
  <tr>  
    <td>Kategorie</td>  
    <td><select name="category" id="category"></select>&nbsp;*</td>  
  </tr>  
  <tr>  
    <td>Name</td>  
    <td><input name="name" type="text" id="name">&nbsp;*</td>  
  </tr>  
  <tr>  
    <td>Strasse / Nr. </td>  
    <td><input name="street" type="text" id="street">&nbsp;*&nbsp;<input name="residenceId" type="text" id="residenceId">&nbsp;*&nbsp;</td>  
  </tr>  
  <tr>  
    <td>Postfach</td>  
    <td><input name="postOfficeBoxFlag" type="checkbox" id="postOfficeBoxFlag" value="checkbox">  
      <input name="postOfficeBox" type="text" id="postOfficeBox" disabled="disabled"></td>  
  </tr>  
</table>  

Die dynamische Breitenanpassung der Eingabefelder ist jedoch problematisch, da bei einigen am Ende noch * dazukomment und bei anderen nicht. Aus diesem Grund der Hinweis auf CSS.

Grüsse

[Patrick Andrieu]

Hallo Marcel!

http://www.frightanic.com/misc/address_modify.png

Ich würde die Sternchen eher neben dem Text stellen, welches die jeweiligen Felder beschreibt. Rein aus Gewohnheit, da es auf vielen Seiten so gehandhabt wird und viele User das also »so kennen«:

Kategorie*: [FELD]

Entscheidend ist die Ausrichtung rechts mit und ohne *. Natürlich möchte ich auf Pixelschiebereien und fixe Breiten verzichten...

Hier verstehe ich nicht, was Du erreichen willst, sorry.

Grüße aus Frankfurt/Main,
Patrick

[Marcel Stör]

Hallo Marcel!

http://www.frightanic.com/misc/address_modify.png

Ich würde die Sternchen eher neben dem Text stellen, welches die jeweiligen Felder beschreibt. Rein aus Gewohnheit, da es auf vielen Seiten so gehandhabt wird und viele User das also »so kennen«:

Kategorie*: [FELD]

Würde ich auch so machen. Doch die Richtlinien an die ich mich halten muss (Stichwort corporate identity) verlangen das eben anders.

Entscheidend ist die Ausrichtung rechts mit und ohne *. Natürlich möchte ich auf Pixelschiebereien und fixe Breiten verzichten...

Hier verstehe ich nicht, was Du erreichen willst, sorry.

Tut mir leid. Offenbar ist es mir nicht gelungen, mich verständlich auszudrücken.

Man könnte die Label/Eingabefelder Kombinationen als Zeilen und Spalten einer Tabelle verstehen. Die Tabelle als solches hat eine Gesamtbreite. Die Label erfordern eine bestimmte Breite wenn sie nicht umgebrochen werden sollen. Daraus soll sich dann dynamisch die Restbreite für die Eingabefelder ergeben.
Einige Felder haben dann rechts noch den *, andere nicht. Trotzdem sollen alle Felder rechts schön ausgerichtet sein.

Grüsse

[Patrick Andrieu]

Hallo Marcel!

Einige Felder haben dann rechts noch den *, andere nicht. Trotzdem sollen alle Felder rechts schön ausgerichtet sein.

Mit »schön rechtsbündig« meinst Du, so:

| Pflichtfeld 1:              [FELD]* |
  | Kein Pflichtfeld:    [FELDFELDFELD] |

oder so:

| Pflichtfeld 1:              [FELD]* |
  | Kein Pflichtfeld:   [FELDFELDFELD]  |

?

Viele Grüße aus Frankfurt/Main,
Patrick

[Marcel Stör]

Hallo Marcel!

Einige Felder haben dann rechts noch den *, andere nicht. Trotzdem sollen alle Felder rechts schön ausgerichtet sein.

Mit »schön rechtsbündig« meinst Du, so:

| Pflichtfeld 1:              [FELD]* |
  | Kein Pflichtfeld:    [FELDFELDFELD] |

oder so:

| Pflichtfeld 1:              [FELD]* |
  | Kein Pflichtfeld:   [FELDFELDFELD]  |

So:

| Pflichtfeld 1:      [FELDFELDFELD]* |
   | Kein Pflichtfeld:   [FELDFELDFELD]  |

Grüsse

[Patrick Andrieu]

Hallo Marcel!

So:

| Pflichtfeld 1:      [FELDFELDFELD]* |
   | Kein Pflichtfeld:   [FELDFELDFELD]  |

Wenn Du bei der Tabellenlösung wie in Deiner letzten Antwort an Matze bleibst, warum nicht eine extra Spalte für die Sternchen? Da wäre nur noch die Zeile mit Postleitzahl/Ort, aber das ist lt. Deinem Screenshot die einzige Zeile (OK, Straße/Hausnummer auch), die »aus der Reihe« tanzt, da kann Dein &nbsp; (denn man ansonsten nicht als Spacer benutzen sollte) bleiben...

An die Puristen: Sind Formulare als tabellarische Daten anzusehen, die den Einsatz einer Tabelle rechtfertigen oder nicht?

Viele Grüße aus Frankfurt/Main,
Patrick

[Matze]

Hallo,

An die Puristen: Sind Formulare als tabellarische Daten anzusehen, die den Einsatz einer Tabelle rechtfertigen oder nicht?

Kommt auf das Formular an würde ich meinen.
Nur Name, E-Mail, Text (also ein simples Kontaktformular) rechtfertigt keine Tabelle.
Das Beispiel um welches es hier geht, kann hingegen getrost in eine Tabelle.
Wahrscheinlich einfach Geschmackssache^^

Grüße, Matze

[Vinzenz Mai]

Hallo Patrick,

Einige Felder haben dann rechts noch den *, andere nicht. Trotzdem sollen alle Felder rechts schön ausgerichtet sein.

Marcels Screenshot zeigt eindeutig

| Pflichtfeld 1:              [FELD]* |
  | Kein Pflichtfeld:   [FELDFELDFELD]  |

ersteres (gelöscht) sieht ja auch schrecklich häßlich aus.

Freundliche Grüße

Vinzenz

[Vinzenz Mai]

Hallo Marcel,

Man könnte die Label/Eingabefelder Kombinationen als Zeilen und Spalten einer Tabelle verstehen.

ja. Das ist verständlich. Je nach Standpunkt handelt es sich bei solchen
Formularen um tabellarische Daten. Nimmt man diesen Standpunkt ein, dann ist
die Umsetzung mit einer Tabelle oder verschachtelten Tabellen auch die
semantisch richtige :-)

Freundliche Grüße

Vinzenz

[Vinzenz Mai]

Hallo Marcel,

Es ist immer wieder erstaunlich, welchen Ärger einem (mir) tabellarische Eingabemasken machen können. Wie würdet ihr folgendes Formular mit HTML resp. CSS umsetzen:

http://www.frightanic.com/misc/address_modify.png

keine Lösung, außer dass ich persönlich eine (ggf. verschachtelte, siehe
Deine eigene Überschrift) Tabelle nähme, aber zwei interessante Threads zu
diesem Thema im Archiv hier verlinkt:

</archiv/2006/5/t130004/>
</archiv/2006/8/t133945/>

Freundliche Grüße

Vinzenz