Komplizierte Form Tabelle vs div

Question

Ich suchte online nach Beispielen für die Implementierung des Formulars mit DIVs und alles, was ich sehe, ist ziemlich einfach eine Spalte Formen. Ich habe einige ziemlich komplizierte Formen, hier ist ein Bild von einem:

http://img835.imageshack.us/img835/8292/formn.jpg

Es ist leicht, um es mit Tisch zu machen arbeiten (was ich tue), das einzige Problem, das ich habe ist, dass manchmal Ich muß einige der Auswahlmöglichkeiten nicht anzeigen und die Werte um eine Zeile nach oben verschieben, um Lücken zu vermeiden.

Ich fing an, einige Formulare mit divs zu machen, aber sie fallen auseinander, wenn ich die Größe des Browserfensters ändere und es nicht einfach ist, Dinge auszurichten.

Dieses Thema ist hilfreich: Is it bad design to use table tags when displaying forms in html? aber nicht einige der Bedenken auszuräumen ich habe.

Was würden Sie als Lösung vorschlagen? Ich kann Werte dynamisch in der Tabelle löschen/einfügen oder versuchen, die DIVs zu machen.

Answer 1

Ich würde die div-Route gehen. Solange Sie bei der Anwendung von Floats auf Ihre Breiten achten, ist es ziemlich einfach, die Layouts in verschiedenen Bildschirmauflösungen richtig zu verwenden.

Hier sind ein paar Regeln:

1. eine maximale Breite auf dem Formular Set oder Wrapper-Elemente des Formulars. Wenn Sie Elemente in einer Reihe schweben lassen möchten, stellen Sie sicher, dass deren Breite nicht größer ist als diese Breite.
2. Wenn Sie Ihren floated-Elementen horizontale Abstände/Ränder hinzufügen, denken Sie daran, dass diese zur Gesamtbreite des Elements hinzukommen.
3. Vermeide es, prozentuale Breiten mit Pixelauffüllung und Rändern zu mischen. Wenden Sie die prozentuale Breite auf ein Elternelement und die Pixelauffüllung/Ränder auf ein Kindelement an.
4. Verwenden Sie Clearing-Elemente zwischen Ihren Zeilen von Elementen, um alles in einer Linie zu halten.

In Bezug auf die Markup, können Sie die Formularelemente zusammen mit CSS verwenden, um eine semantische Struktur zu schaffen:

<fieldset> 
    <legend>Fieldset Title</legend> 

    <label for="input1">Input 1:</label> 
    <span><input type="text" id="input1" name="input1"/></span> 
    <label for="input2">Input 2:</label> 
    <span><input type="text" id="input2" name="input2"/></span> 

    <br/> 

    <label for="input3">Input 3:</label> 
    <span><input type="text" id="input3" name="input3"/></span> 
    <label for="input4">Input 4:</label> 
    <span><input type="text" id="input4" name="input4"/></span> 
</fieldset> 

Und die CSS:

fieldset { 
    padding: 20px 0; 
    width: 600px; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    background: black; 
    color: white; 
} 

label, span{ 
    float: left; 
    width: 150px; 
} 

input { 
    width: 120px; 
} 

br { 
    clear: both; 
} 

Sie können see the result here.

Answer 2

Wenn es sich um eine Tabelle fester Breite handelt, ist es trivial, mit divs und floats zu arbeiten. Stellen Sie einfach jede Breite genau so ein, wie Sie möchten.

Für eine flüssigkeits Layout-Tabelle-und flüssige Layout im Allgemeinen ist sehr wünschenswert-es viel schwieriger ist es, eine Form ohne Tisch-style-Display anzuordnen, weil float und position für Berechnungen wie „diese Zelle erlauben nicht ohne weiteres tun ist die Hälfte der verbleibenden Breite des Elternteils, nachdem die Etiketten mit fester Breite zugewiesen wurden ".

Also in Fällen wie diesem, die sicherlich die Art der zweispaltigen Form Sie gebucht hat, sind die table-* CSS display Werte Ihre einzige Möglichkeit. Wenn Sie nur auf IE8 und die anderen modernen Browser zielen, können Sie divs verwenden und im Stylesheet display: table-row et al einstellen.Aus Gründen der Kompatibilität mit IE6-7 und anderen älteren/mobilen/Nischen-Browsern müssen Sie jedoch tatsächliche <table>/<tr>/<td> Elemente verwenden, da nur die modernen Browser Tabellen-CSS unabhängig von den Tabellenelementen unterstützen.

Es gibt keine Schande in diesem. Ein Formular ist sowieso irgendwie halb-tabellarisch und es gibt keinen praktischen Nachteil bei der Zugänglichkeit, da der Seiteninhalt in geeigneter Weise geordnet bleibt.

Hinweis: Bei Liquid-Layout-Formularen haben Sie auch das Problem, die Eingabefelder an das übergeordnete Element anzupassen. input { width: 100%; } fast macht es, aber nicht ganz, denn die width enthält nicht die Grenze oder Padding, die Eingaben standardmäßig erhalten. Sie können CSS3 box-sizing und die browserspezifischen Versionen davon verwenden, um das für moderne Browser zu umgehen, aber wenn Sie möchten, dass es genau auf Pixel auf IE6-7 ausgerichtet ist, müssten Sie Padding auf den Elternelementen gleich verwenden der Rand/Abstand im untergeordneten Eingabefeld.

Answer 3

• General information ist eine Art Liste, Liste key> Wert um genau zu sein - <dl /> wahrscheinlich die beste Struktur wäre für sie
• Issues values eine Tabelle,
• Ratings ist eine Tabelle,
• Both Redemption und Indicators sind Listen - ungeordnete Listen <ul />