Ist es schlecht Design Tabellen-Tags zu verwenden, wenn Formulare in HTML angezeigt wird?

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

Frage

behalte ich, dass div Tags hören sollte zu Layoutzwecken verwendet werden und keine Tags table. So gilt, dass auch das Layout bilden? Ich weiß, dass ein Formularlayout noch ein Layout, aber es scheint, wie Formularlayouts mit divs der Schaffung von mehr html und css erfordert. Also in diesem Sinne Formulare sollten Layouts verwenden div-Tags statt?

War es hilfreich?

Lösung

Ja, es gilt für Formularlayouts. Beachten Sie, dass es auch ist Tags wie FIELDSET und LABEL, die für das Hinzufügen von Struktur zu einer Form speziell existiert, es ist also nicht wirklich eine Frage von nur DIV verwenden. Sie sollten ein Formular mit ziemlich minimal HTML Markup können, und lassen Sie CSS den Rest der Arbeit tun. Z. 

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Andere Tipps

Ich denke, es ist ein Mythos, dass Formen „schwierig“ Layout schön mit guten HTML und CSS sind. Das Niveau der Kontrolle, die CSS Sie über Ihr Layout gibt geht weit darüber hinaus, was jeder klobig tabellenbasierten Layout je tun würde. Dies ist keine neue Idee, wie dieser Smashing Zeitschriftenartikel von Art und Weise im Jahr 2006 zeigt, zurück.

Ich neige dazu, Varianten der folgenden Markup in meinen Formularen zu verwenden. Ich habe einen generischen .form Stil in meinem CSS und dann Varianten für Texteingaben, Kontrollkästchen, wählen Textfelder etc etc. 

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

Die Tische sind nicht böse. Sie sind mit Abstand die beste Option, wenn Tabellendaten angezeigt werden muss. Formen IMHO sind nicht tabellarischen Daten - sie Formen sind, und CSS bietet mehr als genug Werkzeuge, um das Layout Formen wie Sie wollen

.

Wenn Sie nur eine einfach Zeile Spalte Griffart Layout benötigen, sollten Sie sich nicht schuldig fühlen Tabellen. Ich weiß nicht, wie jemand, dass ‚schlechtes Design‘ nennen kann, nur weil es nicht CSS ist. Ich habe gesehen, viele schlechten CSS-basiertes Design. Ich liebe CSS und denke, es ist weit überlegen in vielerlei Hinsicht zu herkömmlichen verschachtelten Tabellen-Layouts, sondern tun, was funktioniert Bestzeiten und was ist am einfachsten auf wichtiger, impactful Entscheidungen zu halten und zu bewegen.

Das allgemeine Prinzip ist, dass Sie unabhängig von HTML-Elemente am besten vermitteln den semantischen Inhalt verwenden möchten, die Sie beabsichtigen, und dann auf CSS verlassen, um visuell, dass semantische Inhalte darstellen. Im Anschluss an diesem Grundsatz viele Eigenleistungen kauft einschließlich einfachen ort allgemeiner optische Veränderungen, Suchmaschinen-Optimierung, Multiscreen-Layouts und Zugänglichkeit.

So ist die kurze Antwort lautet: Sie können tun, was Sie wollen, aber bewährte Verfahren vorschlagen, dass Sie nur Tabellen-Tags verwenden, tabellarische Daten darzustellen und stattdessen verwenden, was HTML-Tags am besten vermitteln, was es ist, dass Sie darstellen möchten. Es könnte zunächst ein wenig schwieriger sein, aber wenn man auf den Gedanken gewöhnen, werden Sie sich fragen, warum Sie jemals andere Art und Weise getan hat.

Je nachdem, was Sie versuchen, mit dem Formular zu tun, sollte es nicht nehmen, dass viel mehr Markup semantisches Markup und CSS zu verwenden, vor allem, wenn Sie sich auf die Kaskadierung Eigenschaften von CSS verlassen. Auch, wenn Sie mehrere gleichen Form auf mehreren Seiten auf Ihrer Website haben, der semantische Ansatz ist viel effizienter, sowohl Code und aufrecht zu erhalten.

Um Formulare so zugänglich wie möglich zu machen und semantisch korrekt, ich benutze das folgende Format: 

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

Ich benutze CSS meist bis CSS wird ein Hemmschuh. Zum Beispiel ist es viel einfacher, eine 3 + Säule (3 Sätze von Etikett + Formularfeld) Form unter Verwendung einer Tabelle als in CSS zu erstellen. Ich konnte nicht das Layout erhalten, um richtig aussehen in allen gängigen Browsern rein mit CSS und ich war zu viel Zeit bekommen sie zu arbeiten. Also sagte ich schrauben und ich habe es einfach mit Hilfe einer Tabelle. Tabelle ist nicht schlecht.

Es ist eine Grauzone. Nicht alles, was in Markup hat Grenzen klar definiert, und dies ist ein Fall, in dem Sie Ihre persönliche Präferenz erhalten zu verwenden und ein Urteil Anruf. Es ist nicht ganz paßt die Idee von Daten organisiert werden, aber die Zellen über mehrere Achsen bezogen, und das ist die Faustregel, ich nutze, um zu entscheiden, ob etwas in einer Tabelle paßt oder nicht.

Es ist sicherlich einfacher Tisch zu verwenden, als div eine Tabelle Layout, aber denken Sie daran, dass ein Tisch etwas bedeuten soll - es Daten in einer regelmäßigen Art und Weise für den Benutzer präsentiert mehr zu sehen, als Kisten auf dem Bildschirm setzen in eine bestimmte Reihenfolge. Im Allgemeinen denke ich, Formen Layout divs verwenden sollte, um zu entscheiden, wie die Formularelemente angezeigt werden.

Eine Sache, die ich oft nicht in dieser Form Layout Fragen besprochen sehen, wenn Sie eine Tabelle Ihr Formular Layout gewählt haben (mit Etiketten auf der linken Seite und Felder auf der rechten Seite, wie in einer der Antworten erwähnt), dann dass das Layout ist festgelegt. Bei der Arbeit hatten wir vor kurzem einen schnellen ‚proof of concept‘ unserer Web-Anwendungen in Arabisch zu tun. Die Anwendungen, die Tabellen für Formularlayouts waren im Grunde stecken benutzt hatte, während ich in der Lage war, auf allen meinen Seiten die Reihenfolge aller Formularfelder und Etikett umgekehrt von etwa zehn Zeilen in meiner CSS-Datei ändern.

Wenn Sie Ihre Formulare werden in tabellarischer Form gelegt (zB Etiketten auf der linken Seite und Felder auf der rechten Seite), dann ja, Verwendung Tabellen-Tags.

Eine Form nicht „Präsentation“ ist, fragen Sie Daten, die Sie nicht in der Regel vorhanden Daten. Ich benutze eine Menge von Inline-Editing in tabellarischen Daten. Obviousely verwende ich die datacells - td als Halter für die Eingangselemente, wenn sie von Präsentation Eingangsschalt

.

Die meisten der Antworten, die ich hier gesehen habe, scheint angemessen. Das einzige, was ich hinzufügen würde, die speziell auf apathisch oder den Herrn Matts ist <dl>/<dt>/<dd> zu verwenden. Ich glaube, diese stellen die Liste semantisch. 

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

Vielleicht möchten Sie diese restyle, aber das sagt semantisch, was los ist, das ist eine Liste von „Begriffe“ haben (<dt>) und „Definitionen“ (<dd>), mit dem Begriff das Etikett und die Definition zu sein die Benutzer eingegebenen Werte werden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top