Ist es akzeptabel, Tabellen für Formulare zu verwenden? Oder ist es immer noch korrekter, Divs zu verwenden?

Question

Ich frage mich, ob es akzeptabel ist, wenn man table s für Formulare.

Streng genommen handelt es sich bei Name/Wert-Paaren um tabellarische Daten, nicht wahr? Und ein Formular ist nur ein vom Benutzer anpassbarer Satz von Name/Wert-Paaren. Ist es also richtig, Folgendes zu verwenden table s in diesem Fall? Oder sollte ich verwenden div mit CSS gestylt ist?

Answer 1

Feldsätze ausprobieren

Ich ziehe es vor, die Felder in logische Abschnitte zu unterteilen <fieldset> s mit einem <legend> jeder, weil:

• Der Code ist weniger unübersichtlich
• Die Standardformatierung ist benutzerfreundlich (besonders gut gefällt mir die Darstellung der Legende)
• Es ist einfach, mit CSS zu gestalten

Hier ein Beispiel für einen Code. Beachten Sie, dass die Etiketten for Attribut können Sie auf dieses Etikett klicken, um den Fokus auf die angegebene Eingabe zu verschieben (es entspricht dem id Attribut).

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

Für ein einfaches Layout können Sie etwas wie folgt verwenden:

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

Ver dieser Artikel für ein ausführlicheres Tutorial.

Answer 2

Beide sind richtig .

Ich bevorzuge die Verwendung einiger div / li da ich dadurch einige verschiedene Layouts erstellen kann, aber tables para forms sind nicht verpönt.

Standardmäßig bietet Django Formulare in Tabellenform.

Answer 3

Ein Formular ist kein Tabellenkalkulationsprogramm.

Es ist so einfach, Formularelemente mit CSS zu gestalten, dass ich keinen Wert darin sehe, das Markup mit Tabellen zu verschleiern. Ich persönlich finde, dass die Gestaltung von Formularen mit CSS einfacher als zu diesem Zeitpunkt Tabellen zu verwenden. Zum Beispiel:

HTML:

<fieldset>
  <label for="FirstName">First Name</label>
  <input type="text" id="FirstName" />

  <label for="LastName">Last Name</label>
  <input type="text" id="LastName" />

  <label for="Age">Age:</label>
  <select id="Age">
    <option>18-24</option>
    <option>25-50</option>
    <option>51-old</option>
  </select>
</fieldset>

CSS:

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

Mit einfachen Variationen dieses Themas können Sie großartig aussehende, leicht zugängliche Formulare erstellen, die ohnehin einfacher zu handhaben sind als Tabellen. Ich habe diesen grundlegenden Ansatz verwendet und ihn auf einige ziemlich komplexe, mehrspaltige Dateneingabeformulare ausgeweitet, und das ohne Probleme.

Answer 4

Sie können Tabellen verwenden. So einfach ist das.

Answer 5

Ja

Ja, Sie können Tabellen verwenden. Divs sollen Tabellen für das Layout auf Seitenebene ersetzen, aber nicht für, nun ja, Tabellen. Sie können sie innerhalb von Seiten verwenden, wenn sie Ihr Problem lösen.