Wie Tabellen verwenden, um Formulare in HTML zu strukturieren und über Alternativen, wie FIELDSET
Oft als Layout-Tool gesehen, Tabellen mehr richtig als ein Verfahren behandelt für strukturelle Beziehungen zum Ausdruck. Zum Beispiel können Tabellen verwendet werden, um die Beziehungen zwischen den Eingabefeldern und ihren Erklärungen in einem Formular anzuzeigen. Dieses Dokument beschreibt die technischen Details beteiligt.
Tabellen und Formulare können so oder so verschachtelt werden. Aber wenn Sie setzen Formulare in Tabellen. Jedes Formular muss vollständig in eine einzige Tabellenzelle (ein TD-Element in der Praxis) enthalten sein. Dadurch sind die Formen, die jeweils völlig unabhängig. Siehe Dokument auf Entscheidungen in HTML-Formulare für einige einfache Beispiele.
Was wollen die Menschen wahrscheinlich öfter zu tun ist, zu nisten sie in der anderen Richtung: ein TABLE-Element innerhalb eines FORM-Elements. Dann werden alle Formularfelder innerhalb der Tabelle Zellen, in TR-Elemente innerhalb des Tabellenelement ist, das innerhalb des FORM-Element ist, sind Felder von derselben Form.
Sollten Tabellen verwendet werden Formulare zu strukturieren?
Es ist am besten Formen organisieren einfach: Sie Tabellen nicht verwenden, um einige bestimmtes Layout zu erzwingen, aber die Struktur, um anzuzeigen, wenn nötig. Browser sind zu erwarten Tabellen zu präsentieren und HTML-Dokumente in der Regel in einer Weise, die der Struktur entspricht in HTML ausgedrückt.
Um ein recht häufiges Beispiel zu nehmen: Angenommen, Sie möchten die Benutzer einen Artikel aus einer Liste in und Bestellformular abholen. Wahrscheinlich besteht die Produktinformationen von einigen Bereichen wie Produktname, Bestellnummer und den Stückpreis für jedes Produkt. Dies bedeutet, dass die Daten selbst von Natur aus tabellarischer sind. Warum es nicht Tisch machen? Das würde das Aussehen, die Struktur reflektieren. Es gibt einige technischen Details hier beteiligt sind; siehe Hinweise zur Verwendung von Kontrollkästchen oder Optionsfelder (anstelle von SELECT) für solche Zwecke.
Als ein einfaches Beispiel. betrachtet die Situation, in der ein Text (Feldbeschriftung oder so ähnlich) mit einem Eingabefeld zugeordnet ist. (Es gibt bessere Möglichkeiten für die in HTML 4.0 im Prinzip zu tun, aber zur Zeit die Tabelle Idee könnte besser sein..) Sie eine Tabelle einrichten konnten, wo die erste Spalte die Texte enthalten und die zweite Spalte enthält die entsprechenden Eingabefelder:
Auf Ihrem aktuellen Browser mit den aktuellen Einstellungen, würde dies wie folgt aussehen:
Ein weiterer typischer Fall für eine Tabelle verwendet, ist eine Reihe von Optionsfeldern zu organisieren. Es ist ein Beispiel dafür in Choices in HTML-Formularen sowie am Ende des aktuellen Dokuments.
Beachten Sie, dass in unserem Beispiel des Submit-Button außerhalb der Tabelle ist. Der Grund dafür ist, dass es eine andere Rolle als die anderen Felder. Es könnte auch in der Tabelle, aber vielleicht ist es leichter zu finden, wenn es nicht ist.
Sie auch, dass entgegen der landläufigen Meinung unter den Autoren bemerken, eine Reset-Taste ist nicht obligatorisch, oder sogar nützlich, in der Regel. Es ist besonders gefährlich, wenn neben mit einem Submit-Button präsentiert!
In Bezug auf Fragen des spezifisch auf die Kombination von Tabellen und Formularen zu beachten, dass, wenn Sie ein Formular in eine Tabellenzelle setzen, dann gibt man vielleicht einig unerwünschten zusätzlichen vertikalen Raum unterhalb der Form sein. Es gibt verschiedene Möglichkeiten, um zu versuchen, das zu unterdrücken. Wenn es nur eine Form in der Tabelle ist, eine der Möglichkeiten ist, die Struktur zu ändern, so dass die Form und die Tabelle die andere Art und Weise verschachtelt sind um: die Form der Tabelle enthält, auch wenn nur eine Zelle enthält Felder des Formulars. Technisch gesehen würde man nur den Start- und End-Tags der Form bewegen. Das bedeutet, etwa wie folgt (in einem Fall, in dem die Form, in der letzten Zelle der Tabelle angezeigt wird):
Natürlich könnte man mit Tabellen in Formularen verzichten. Sie könnten einfach schreiben z.B.
Auf Ihrem aktuellen Browser mit den aktuellen Einstellungen, würde dies wie folgt aussehen:
Die BR-Elemente verursachen Zeilenumbrüche. Es ist vor allem eine Frage des Geschmacks, ob man diesen Stil mit Hilfe von Tabellen bevorzugen. Der Hauptunterschied in typischer Darstellung ist, dass, wenn unter Verwendung einer Tabelle, die Eingabefelder „line up“ bildet eine Spalte. Und Stylesheets oder Präsentations-Attribut in Tabelle bezogenen Elementen verwendet werden könnten, um die Details der Präsentation vor.
Sie können auch jedes Paar von Feldtitel und Feldelement in einen eigenen Absatz machen, ein P-Elemente, z.B.
Auf Ihrem aktuellen Browser mit den aktuellen Einstellungen, würde dies wie folgt aussehen:
Auch wenn manche Leute diesen Platzverschwendung wäre sagen könnte, die Verwendung von einigen leeren vertikalen Raum (wie von den Browsern Art und Weise zu präsentieren Absätzen verursacht) ist nicht wirklich verschwenderisch.
Aber da argumentiert werden könnte, dass ein Feldname und ein Feld keinen Absatz bilden, können Sie alternativ DIV-Elemente anstelle von P-Elementen. Dies würde keinen zusätzlichen vertikalen Abstand einzuführen.
Eine Möglichkeit, eine Form der Strukturierung ist das FIELDSET Element.
Im Folgenden wird die Präsentation des Formulars auf Ihrem aktuellen Browser (links) und auf IE 4 (rechts):
Es ist auch möglich, die Verwendung von FIELDSET mit der Verwendung einer Tabelle zu kombinieren, beispielsweise zu strukturieren eine Gruppe von Optionsfeldern. Radioknöpfe und für das Kontrollkästchen ist das herkömmliche Verfahren des zugehörigen Text nach dem Optionsfeld oder Kontrollkästchen zu setzen. Dies ist etwas unlogisch, aber so häufig, dass die Zugänglichkeit Werkzeuge könnten damit umgehen besser als die logische Reihenfolge. Beispiel:
Daraus ergibt sich die folgende Darstellung auf Ihrem aktuellen Browser:
Es wäre vielleicht besser sein (in Fällen wie diesem zumindest, wenn es eine kleine Anzahl von Alternativen ist), wenn die Legende (die für die Gruppe von Optionsfeldern logisch eine Überschrift ist) auf der gleichen Linie wie die Alternativen erschienen. Aber die Syntax von FIELDSET macht dies unmöglich: das erste Element muss LEGEND sein. so kann man die Legende und die Tasten mit den Etiketten als eine Zeile in einer Tabelle organisieren.
Für Zugänglichkeit Gründe und aus Gründen der Klarheit wäre es besser, zu jeder Alternative auf einer Linie (Zeile) der eigenen, mit dem gleichen Ansatz wie oben, aber eine einspaltige Tabelle anstelle einer einzeiligen Tabelle erscheinen. Beispiel:
Ich habe oft argumentiert, dass ein solches Konstrukt ist eine Strukturtabelle (Tabellendaten) keine Layout-Tabelle. Es drückt die zweidimensionale Struktur der Daten in der Form, einschließlich der Eingabefelder. Aber viele Menschen nicht einverstanden ist. Wie auch immer, lassen Sie uns überlegen, wie Sie ohne die Verwendung einer Tabelle tabellarische Layout für eine Form erreichen könnte.
Es gibt verschiedene Ansätze, aber ein einfaches ist wie folgt: In HTML in einem Formularelement, verwenden Sie so etwas wie
Dies funktioniert ohne CSS, wenn auch nicht mit einem schönen Layout. Für das Layout können Sie CSS verwenden, um eine gemeinsame Breite für die Kennzeichnungselemente vorzuschlagen. Dies ist Mutmaßungen zu einem gewissen Grad, da Sie mögen, dass Breite haben, die für alle Etiketten ausreichend, aber nicht breiter als nötig. Beispiel:
Dies ist, wie es aus wie auf Ihrem Browser aussieht: