Formularfelder - fieldset/Liste oder Tabelle?

[Don P]

Hallo,

Möchte mal eure Meinung zu semantischen Markup erfragen.

In einem HTML-Template mit mehreren Tabs (ähnlich wie Browser-Tabs) sollen Formulardaten eingegeben werden. Es gilt, ein ziemlich übles Tabellenlayout zu verbessern. Übel deshalb, weil übreall mit feste breiten in Pixel angegeben sind. Ganze Tabelle z.B. 600px breit, Summe der Spalten aber 800px und dergleichen Unsinn.

Die Formularfelder sind z.B. in der Form

Name:        [____________]    (*)
Vorname:     [____________]

etc. In der 3.Spalte ist manchmal ein Bildchen zum Anklicken, hier als (*) dargestellt. Die Bezeichnungen in der 1.Spalte können mal länger, mal kürzer sein, v.a. weil dasselbe Dokument in verschiednenen Sprachen funktionieren muss. Also muss ich wohl eine Kompromissbreite vorsehen, damit's auf jeden Fall passt. Die Eingabefelder sollten natürlich immer schön untereinander stehen und die evtl. vorhandenen Bildchen in der dritten Spalte auch.

Nun frage ich mich:
Wie setzt man sowas am besten um? Es soll zwar tabellarisch aussehen, aber eigentlich ist es ja nur eine Liste von Feldern mit Label, die man auch in ein Fieldset packen und als Liste auszeichnen könnte. Nur fürchte ich, dass man dann zu viele Kapriolen mit DIV-Containern machen muss, um die Dreispaltigkeit zu realisieren...

In einem der Tabs stehen auch gar keine Eingabefelder, sondern nur so eine Liste als Zusammenfassung der eingegebenen Daten.

Danke für jede Anregung,
Don P

[Ole.]

Hallo,

es gibt schon seit Jahren die Diskussion ob Formulare tabellarisch sind oder nicht und deshalb auch semantisch korrekt in Tabellen gepackt werden dürfen oder nicht.

Solltest du keine Tabellen nutzen wollen, ist das auch nicht umbedingt weiter tragisch und durchaus lösbar.

Wenn du mit Listen arbeiten willst, könnte das ganz grob so funktionieren:

<ul>  
  <li>  
    <label for="feld-1">Vorname</label>  
    <input type="text" id="feld-1">  
    <img src="example.jpg" alt="">  
  </li>  
</ul>

  
li {overflow: hidden;}  
label {display: block; float: left; width: 200px;}  
input {float: left; width: 200px;}  
img {display: block;}  

Gruß
Ole

[Don P]

Hallo,

Wenn du mit Listen arbeiten willst, könnte das ganz grob so funktionieren: [...]

Wow vielen Dank! Das wäre mir lieber als eine Tabelle, weil man anscheinend mit weniger Markup auskommt. Nur ein <li> anstelle von <tr> plus drei <td>, und ohne DIV-Suppe, ideal.

Denke, so werde ich's wohl machen :)
Aber erst mal probieren ob's auch aussieht...

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Die Bezeichnungen in der 1.Spalte können mal länger, mal kürzer sein, v.a. weil dasselbe Dokument in verschiednenen Sprachen funktionieren muss. Also muss ich wohl eine Kompromissbreite vorsehen, damit's auf jeden Fall passt.

Du kannst auch für jede Sprache eine andere Breite angeben. [qa-css-lang]

Wie setzt man sowas am besten um? Es soll zwar tabellarisch aussehen, aber eigentlich ist es ja nur eine Liste von Feldern mit Label

Gehören die Dinge in einer Zeile zusammen? Gut. Haben die Dinge in einer Spalte Gemeinsamkeiten. Gut. Manchmal ist eine Tabelle auch einfach eine Tabelle.

Qapla'

[Don P]

Hallo,

Du kannst auch für jede Sprache eine andere Breite angeben. [qa-css-lang]

Interessant, css-lang kenne ich bis jetzt gar nicht. Leider hast du auf localhost verlinkt. Den kenne ich wiederum, aber er findet halt die Seite nicht ;)

Manchmal ist eine Tabelle auch einfach eine Tabelle.

LOL – Wo du echt hast, hast du recht :)

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Leider hast du auf localhost verlinkt.

Shit happens.

aber er findet halt die Seite nicht ;)

Hm, bei mir funzt’s. ;-)

Hey, da isses sogar auf deutsch! Hier (noch) nicht.

Qapla'